JavaScript基础之AJAX简单的小demo

2023年5月28日上午12:21 • JavaScript

当创建Web应用程序时，需要异步处理与服务器的交互。这就是为什么Ajax对于现代Web开发至关重要。在这个简单的AJAX小demo中，我们将通过一个实际的例子学习AJAX。

1. AJAX的基本知识

AJAX全称“异步JavaScript和XML”，是一种创建快速动态Web内容的技术。通过AJAX，Web应用程序可以在不重新加载页面的情况下向Web服务器发送和接收数据，从而使Web应用程序更加快速和响应式。

2. 实现AJAX的步骤

要在Web页面中实现AJAX，需要执行以下5个步骤：

创建XMLHttpRequest对象。
指定响应函数。
打开一个请求。
发送请求。
处理响应。

下面通过一个示例来说明这5个步骤的实现过程。

下面是一个示例代码，代码中包含了以下几个步骤：

创建XHR请求对象。

let xhr = new XMLHttpRequest();

当xhr的状态改变时，执行回调函数。

xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('demo').innerHTML = xhr.responseText;
  }
}

打开一个请求。

xhr.open('GET', 'http://localhost:3000/test', true);

发送请求。

xhr.send();

处理响应。

如果响应成功并得到了响应文本，就将响应文本设为demo元素的innerHTML。

3. 示例说明

下面通过两个示例进一步说明AJAX的使用。

示例1：使用AJAX更新网页内容

在这个示例中，我们将使用AJAX来更新网页内容，当用户点击link元素时，页面内容将通过AJAX更新为link所对应的页面。

HTML代码

<a href="#" id="link" data-page="http://localhost:3000/page1">Page 1</a>
<div id="content"></div>

JavaScript代码

let link = document.getElementById('link');
let content = document.getElementById('content');

link.onclick = function() {
  let xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      content.innerHTML = xhr.responseText;
    }
  }

  xhr.open('GET', link.getAttribute('data-page'), true);
  xhr.send();

  return false;
}

代码解释

当用户点击link元素时:

创建XHR请求对象。
指定回调函数。当XHR的状态改变时，检查请求是否成功，如果成功，则将请求的响应内容设置为content元素的innerHTML属性。
打开XHR请求对象。通过ajax请求获取link元素data-page属性指定的URL。
发送XHR请求。
阻止默认事件，让链接不跳转。

示例2：使用AJAX与后台服务器交互

在这个示例中，我们将使用AJAX与服务器进行数据交互。在HTML表单中输入参数后，AJAX将数据发送到服务器，服务器返回响应数据，AJAX使用响应数据更新网页。

HTML代码

<form method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email">

  <button type="submit" id="submit">Submit</button>
</form>
<div id="result"></div>

JavaScript代码

let form = document.querySelector('form');
let result = document.getElementById('result');

form.onsubmit = function(event) {
  event.preventDefault();

  let xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()  {
    if(xhr.readyState == 4 && xhr.status == 200) {
      result.innerHTML = xhr.responseText;
    }
  };

  xhr.open('POST', '/submit', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send('name=' + encodeURIComponent(form.elements.name.value) + '&email=' + encodeURIComponent(form.elements.email.value));
};