一篇文章弄清楚Ajax请求的五个步骤

下面我来详细讲解一篇文章弄清楚Ajax请求的五个步骤，以下是完整攻略：

一、什么是Ajax

Ajax（Asynchronous JavaScript and XML）是一种利用JavaScript和XML进行客户端和服务器端的异步通信的技术。它可以在页面不刷新的情况下请求和接收数据，并实现页面的局部更新。

二、Ajax的五个步骤

创建XMLHttpRequest对象

使用Ajax时需要创建XMLHttpRequest对象，主要用于与服务器进行数据的交互。代码如下：

let xhr = new XMLHttpRequest();

通过open()方法设置请求方式、请求URL、是否异步

调用open()方法可以设置请求方式、请求URL和是否异步。代码如下：

xhr.open('GET', '/api/data', true);

发送请求

使用send()方法来向服务器发送请求，send()方法可以传入多种类型的参数，这取决于请求方式和需要发送的数据类型。代码如下：

xhr.send();

接收响应数据

发送请求后，需要接收服务器响应的数据。可以通过监听XMLHttpRequest对象的readystatechange事件来获取服务器响应。当readyState的值为4时，代表响应已经接收完成。代码如下：

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

处理数据

根据需要，可以对响应数据进行处理和操作。例如，可以将JSON格式的响应数据进行解析，并将解析后的数据渲染到页面上。示例代码如下：

let data = JSON.parse(xhr.responseText);
let list = document.querySelector('#list');
data.forEach((item) => {
    let li = document.createElement('li');
    li.innerText = item.title;
    list.appendChild(li);
});

三、示例说明

以下是两个使用Ajax请求数据并将数据渲染到页面上的示例说明。

示例一：使用Ajax请求和渲染GitHub上的用户信息

HTML部分：

<body>
  <input type="text" id="username">
  <button id="btn">查找</button>
  <ul id="list"></ul>
  <script src="script.js"></script>
</body>

JavaScript部分：

let xhr = new XMLHttpRequest();
let usernameInput = document.querySelector('#username');
let btn = document.querySelector('#btn');
let list = document.querySelector('#list');

btn.addEventListener('click', function() {
  let username = usernameInput.value;
  xhr.open('GET', 'https://api.github.com/users/' + username, true);
  xhr.send();
});

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    list.innerHTML = `
      <li><img src="${data.avatar_url}"></li>
      <li>名称：${data.name}</li>
      <li>GitHub地址：<a href="${data.html_url}">${data.html_url}</a></li>
    `;
  }
};

该示例中，用户在输入框内输入GitHub的用户名，点击按钮后，使用Ajax请求该用户的信息，并将信息渲染到页面上。

示例二：使用Ajax请求并渲染一个音乐列表