使用原生JavaScript写AJAX实例是一个非常常见的前端开发技巧。下面是该攻略的完整步骤：

一、定义AJAX对象

使用原生JavaScript实现AJAX请求需要创建一个XMLHttpRequest对象（简称XHR）。使用XHR对象来与服务器交互数据，可以不用刷新页面就能更新数据。创建XHR对象的代码如下：

let xhr = new XMLHttpRequest();

二、实现一个AJAX请求

当XHR对象创建成功后，我们需要使用open函数打开一个请求连接，然后通过send函数发送一个GET或POST请求，如下所示：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'url地址', true);
xhr.send();

其中，第一个参数是请求的类型，可以是 "GET" 或 "POST"。第二个参数是请求的URL地址。第三个参数指定了请求是否异步处理。如果这个参数是true（默认），JavaScript会继续执行，而不等待来自服务器的响应。

发送一个POST请求的代码如下：

let xhr = new XMLHttpRequest();
xhr.open('POST', 'url地址', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('name1=value1&name2=value2');

上述代码中，setRequestHeader 函数设置了 HTTP 请求头部信息。send() 函数之前，需要将参数格式化成类似name=value的形式，然后才能发送。

三、监听AJAX事件并处理响应

当XHR对象接收到服务器返回的响应后，我们需要监听XHR对象的readystatechange事件，并处理响应，如下：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'url地址', true);
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    //TODO: 处理成功响应
  } else if (this.readyState === 4 && this.status !== 200) {
    //TODO: 处理错误响应
  }
};
xhr.send();

在 onreadystatechange 函数中，我们需要检查readyState和status属性，以确定服务器是否成功响应。readyState 为 4 表示请求已完成，而status 为 200 表示响应成功。

下面给出一个完整的示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/users/octocat', true);
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

以上示例是从GitHub的API中获取用户octorcat的JSON数据，并将其打印到控制台。

再给出一个POST请求的示例：

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 201) {
    console.log(xhr.responseText);
  } else if (this.readyState === 4 && this.status !== 201) {
    console.log('请求出错');
  }
};
xhr.send('title=foo&body=bar&userId=1');

以上示例是向JSONPlaceholder发送一个包含标题、主体和用户ID的POST请求，并将响应打印到控制台。

本文链接：http://task.lmcjl.com/news/11228.html