JavaScript基础之AJAX简单的小demo

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

1. AJAX的基本知识

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

2. 实现AJAX的步骤

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

1. 创建XMLHttpRequest对象。
2. 指定响应函数。
3. 打开一个请求。
4. 发送请求。
5. 处理响应。

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

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

1. 创建XHR请求对象。

let xhr = new XMLHttpRequest();

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

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

1. 打开一个请求。

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

1. 发送请求。

xhr.send();

1. 处理响应。

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

3. 示例说明

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

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

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

1. HTML代码

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

1. 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;
}

1. 代码解释

当用户点击link元素时:

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

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

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

1. 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>

1. 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));
};

1. 代码解释

当用户提交表单时:

1. 创建XHR请求对象。
2. 指定回调函数。当XHR的状态改变时，检查请求是否成功，如果成功，则将请求的响应内容设置为result元素的innerHTML属性。
3. 打开XHR请求对象。将HTTP方法设置为POST，并将请求URL设置为服务器的提交URL。
4. 设置请求头。
5. 发送XHR请求，将表单数据作为请求体发送到服务器。

至此，我们已经学习了AJAX的基本知识和实现步骤，以及两个示例来说明AJAX的应用。借助AJAX，我们可以创建更加灵活、动态、快速响应的Web应用程序。