原生JavaScript实现Ajax异步请求

原生JavaScript实现Ajax异步请求的攻略如下：

原生JavaScript实现Ajax异步请求步骤

1. 创建XMLHttpRequest对象
   var xhr = new XMLHttpRequest();

2. 设置请求的方法、URL以及是否为异步请求
   xhr.open('GET', 'example.com/data.json', true);

3. 监听XMLHttpRequest对象的状态变化事件，并处理响应
   xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
}

4. 发送请求
   xhr.send();

示例说明

示例一：发起GET请求获取JSON数据

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
}
xhr.send();

以上代码通过原生JavaScript实现了一个GET请求，用于获取一个JSON格式的数据。在请求发送成功后，如果状态码为200，就可以获取到响应数据并进行处理。

示例二：向服务器发起POST请求

var xhr = new XMLHttpRequest();
xhr.open('POST', 'example.com/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
}
xhr.send('username=test&password=123456');

以上代码通过原生JavaScript实现了一个POST请求，用于向服务器发起登录请求。在请求发送成功后，会将用户名和密码以application/x-www-form-urlencoded的格式发送到服务器，并等待服务器响应。在请求成功后，可以获取到响应数据并进行处理。