JavaScript 怎么封装一个 ajax 功能函数

封装一个ajax功能函数目的是简化进行HTTP请求的过程、提高代码的复用性及可维护性。关键步骤包括创建XMLHttpRequest对象、配置请求、发送请求以及处理响应。一个基本的封装函数应该允许用户定义请求的URL、方法（如GET或POST）、是否异步、请求头和处理响应的回调函数。

在封装函数中，核心概念是将请求参数和处理响应的逻辑作为参数传入，这使得函数能够针对不同的请求和数据处理需求提供灵活性。特别是，处理响应的回调函数是封装中最关键的部分。它需要在请求完成时触发，并且能够让调用者访问到响应数据。

一、功能函数的设计

在设计ajax功能函数之前，首先要确定函数的签名，即函数接受何种参数以及这些参数的作用。常见的参数设计包括：

url: 请求发送到的地址
method: 请求的HTTP方法，如GET或POST
data: 发送的数据，适用于POST请求
async: 是否进行异步请求
headers: 需要设置的请求头
success: 请求成功时的回调函数
error: 请求失败时的回调函数

二、创建XMLHttpRequest对象

封装函数的第一步是创建一个XMLHttpRequest对象，这个对象是实现ajax的主角。它允许JavaScript进行HTTP(S)通信。

function ajax(options) {
    var xhr = new XMLHttpRequest();
    // ...其余逻辑
}

三、配置请求

配置请求涉及到设置请求的HTTP方法、URL、是否异步以及任何请求头。此外，如果是POST请求，还需要适当处理发送的数据。

xhr.open(options.method, options.url, options.async);
for (var header in options.headers) {
    xhr.setRequestHeader(header, options.headers[header]);
}

四、发送请求

配置完成后，可以发送请求。如果请求方法是GET，可以直接发送；如果是POST，需要发送数据。

var data = options.data ? JSON.stringify(options.data) : null;
xhr.send(data);

五、处理响应

请求的响应通过事件处理函数来处理。尤其是load事件在请求完成时触发，无论请求成功还是失败。为了区分这两种情况，通常会检查status属性（例如，200表示成功）。

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        options.success && options.success(JSON.parse(xhr.responseText));
    } else {
        options.error && options.error(xhr.status, xhr.statusText);
    }
};

六、完整的ajax函数封装

将以上各个部分结合起来，我们可以得到一个较为完整的ajax函数封装：

function ajax(options) {
    var xhr = new XMLHttpRequest();
    var method = options.method.toUpperCase();
    var async = options.async !== false; // 默认为异步请求
    var data = null;
    if (method === 'POST' && options.data) {
        data = JSON.stringify(options.data);
        xhr.setRequestHeader('Content-Type', 'application/json');
    }
    xhr.open(method, options.url, async);
    for (var header in options.headers) {
        if (options.headers.hasOwnProperty(header)) {
            xhr.setRequestHeader(header, options.headers[header]);
        }
    }
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            options.success && options.success(JSON.parse(xhr.responseText));
        } else {
            options.error && options.error(xhr.status, xhr.statusText);
        }
    };
    xhr.send(data);
}

以上代码提供了一个简单但功能完整的ajax封装函数，它将使得进行ajax请求更为便捷。使用时，只需要按照自己的需求传递相应的参数即可。

七、使用封装的ajax函数

使用此封装函数可以这样：

ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    async: true,
    headers: {
        'Authorization': 'Bearer your-token'
    },
    success: function(data) {
        console.log('Request Successful', data);
    },
    error: function(status, statusText) {
        console.error('Request FAIled', status, statusText);
    }
});