原生js封装的ajax方法示例

这里是“原生js封装的ajax方法示例”的完整攻略：

简介

在前后端分离的现代web开发中，ajax技术得到了广泛应用。ajax可以在不刷新页面的条件下与后台服务器交互，实现了异步加载和动态更新页面的功能。在此过程中，封装一个通用的、可复用的ajax方法是非常必要的。本文将演示如何使用原生的JavaScript来封装一个ajax方法。

实现步骤

1. 按照顺序编写通用ajax函数的主要步骤

• 创建XHRHttpRequest对象
• 发送请求（open()和send()方法）
• 监听xhr对象状态的改变（onreadystatechange事件）
• 处理服务器响应数据

2. 步骤一：创建XHRHttpRequest对象

在JavaScript中，可以通过XMLHttpRequest（XHR）对象来与服务器进行交互。可以使用new运算符创建XHR对象：

var xhr = new XMLHttpRequest();

3. 步骤二：发送请求

创建XHR对象之后，需要用open()方法来设置请求的方法、URL、和是否异步等参数，再通过send()方法发送请求。具体实现如下：

var xhr = new XMLHttpRequest();
xhr.open(method, url, async);
xhr.send(data);

其中，method表示请求的方法，可以是“GET”或“POST”等；url表示请求的URL地址；async表示请求是否为异步请求，即在请求发送的同时可以继续执行后面的代码；data表示POST请求发送的数据，可以是FormData对象或一个字符串。

4. 步骤三：监听XMLHttpRequest对象状态的改变

每当XMLHttpRequest对象状态的readyState改变时，都会触发onreadystatechange事件。在回调函数中可以判断XMLHttpRequest对象的状态和HTTP响应码，根据情况进行处理。readyState的值代表当前XMLHttpRequest对象的状态，如下：

• 0：未初始化，XMLHttpRequest对象已被创建但未初始化（尚未调用open()方法）。
• 1：打开，XMLHttpRequest对象已经调用了open()方法，但尚未发送请求（尚未调用send()方法）。
• 2：发送，XMLHttpRequest对象已经调用了send()方法，但尚未接收到响应。
• 3：接收，XMLHttpRequest对象已经接收到部分响应数据。
• 4：完成，XMLHttpRequest对象已经接收到全部响应数据。

以下是一个示例代码：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            callback(xhr.responseText);
        } else {
            console.error(xhr.statusText);
        }
    }
};

5. 步骤四：处理服务器响应数据

当XMLHttpRequest对象接收到完整的响应数据时，就可以通过responseText或responseXML等属性获取响应数据。responseText属性返回服务器响应的文本数据，responseXML属性返回服务器响应的XML格式数据。以下是一个完整的ajax封装的实例：

function ajax(method, url, data, success) {
    // 1. 创建XHR对象
    var xhr = new XMLHttpRequest();

    // 2. 发送请求
    xhr.open(method, url, true);
    if (method === 'POST') {
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);

    // 3. 监听XHR对象状态的改变
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                success(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
}

这个函数接受四个参数：请求的方法（GET/POST），请求的URL地址，发送的数据（可以为空），和请求成功后的回调函数。当XMLHttpRequest对象的readyState属性为4时，表示数据已经接收完成，如果响应的状态码是200，就表示请求成功；否则，就表示请求失败。请求成功时，将服务器响应的数据通过回调函数返回。

以上就是“原生js封装的ajax方法示例”的完整攻略。如果您想进一步学习，可以参考MDN文档：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

阅读剩余 52%