原生JS简单实现ajax的方法示例

实现 AJAX 的方法有很多种，其中最基础的一种方法是使用原生的 JavaScript（简称原生 JS）来实现。下面详细讲解如何简单实现 AJAX。

使用 XMLHttpRequest 对象发送 AJAX 请求

使用 XMLHttpRequest 对象发送请求是使用原生 JS 实现 AJAX 的最基础的一种方法。步骤如下：

1. 创建 XMLHttpRequest 对象

let xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // 兼容IE6及以下版本
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
} else {
    alert('您的浏览器不支持XMLHttpRequest对象！');
    return;
}

1. 打开一个链接

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

其中，第一个参数表示 HTTP 请求方法，如 GET、POST 等；第二个参数表示请求的 URL；第三个参数表示是否异步。

1. 发送请求

xhr.send();

1. 监听请求状态

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 请求成功
            console.log(xhr.responseText);
        } else {
            // 请求失败
            console.error(xhr.status, xhr.statusText);
        }
    }
};

其中，readyState 表示 XMLHttpRequest 的状态，一共有五个取值，分别为：

• 0：未初始化，尚未调用 open() 方法；
• 1：已打开，已调用 open() 方法，但尚未调用 send() 方法；
• 2：已发送，已调用 send() 方法，但尚未收到响应；
• 3：接收中，正在接收响应数据；
• 4：已完成，已接收到完整的响应数据。

status 表示 HTTP 响应状态码，2xx 表示请求成功，3xx 表示重定向，4xx 表示客户端请求错误，5xx 表示服务器错误。

使用 Fetch API 发送 AJAX 请求

使用 Fetch API 发送 AJAX 请求是一种相对较新的方法，它是基于 Promise 的，相比 XMLHttpRequest 对象更简单易用。示例如下：

fetch('http://example.com/api/getData')
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error('请求失败');
        }
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

其中，fetch() 方法返回一个 Promise 对象，then() 方法用来处理成功的回调函数，catch() 方法用来处理失败的回调函数。如果 HTTP 响应状态码为 2xx，则将响应对象转成 JSON 格式的数据；否则抛出错误。最终在控制台输出 JSON 格式的数据。