XMLHttpRequest对象_Ajax异步请求重点(推荐)

什么是Ajax异步请求

Ajax全称为Asynchronous Javascript And XML，翻译成中文是“异步的 JavaScript 和 XML”。Ajax技术是一种在不重新加载整个页面的情况下，通过后台与服务器进行少量数据交换，实现页面的局部刷新，从而提高页面的响应速度和用户体验。在Ajax中，通过JavaScript的XMLHttpRequest对象来向服务器请求数据，获取数据后再通过DOM操作动态地将数据插入到页面。

XMLHttpRequest对象的基本使用

XMLHttpRequest对象是Javascript语言的核心，它提供了在客户端与服务器间进行数据解析和通信的功能。要使用XMLHttpRequest对象进行Ajax异步请求，需要经过以下几个步骤：

1. 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

1. 设置请求方法和请求地址

xhr.open('GET', 'http://example.com/api/data');

1. 发送请求

xhr.send();

1. 监听请求状态的变化

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取响应数据
    var response = xhr.responseText;
    // 将响应数据插入到页面中
    document.getElementById('data-container').innerHTML = response;
  }
};

以上步骤完成后，就可以向服务器发送请求并接收响应数据了。

XMLHttpRequest对象常用属性和方法

• readyState：当前请求的状态，取值0~4，分别代表未初始化、正在载入、已加载、交互完成，可通过该属性判断请求状态。
• status：当前请求返回的状态码，比如200表示正常并返回响应数据，404表示未找到请求资源。
• responseText：返回的响应数据，一般是字符串形式。
• open(method, url, async)：初始化请求方法和请求地址，async表示是否为异步请求。
• send()：发送请求，常用于GET和POST请求。

XMLHttpRequest对象示例

示例1：发送GET请求获取JSON数据

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/users');
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    var data = JSON.parse(response);
    // 将用户数据插入到页面中
    var userList = document.getElementById('user-list');
    data.forEach(function(user) {
      var li = document.createElement('li');
      li.innerHTML = user.name + ' - ' + user.email;
      userList.appendChild(li);
    });
  }
};

示例2：发送POST请求提交表单数据

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/api/submit');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var data = 'username=admin&password=123456';
xhr.send(data);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理响应数据
  }
};

以上示例分别演示了如何通过XMLHttpRequest对象发送GET和POST请求，并处理响应数据。在实际开发中，可以根据具体情况使用XMLHttpRequest对象发送各种类型的请求，从而实现异步加载数据和提交数据等功能。