原生JS写Ajax的请求函数功能

这里将详细讲解如何使用原生JS编写Ajax请求函数，具体过程包括：创建XMLHttpRequest对象、设置请求方式、设置请求体、发送请求、获取响应数据，下面我们一步一步来看。

创建XMLHttpRequest对象

在使用Ajax向服务器发送请求之前，需要创建一个XMLHttpRequest对象，它是浏览器提供的用于在后台与服务器进行通信的对象。创建方式如下：

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

以上代码会首先判断浏览器是否支持原生的XMLHttpRequest对象，若支持则创建该对象，否则会使用IE的ActiveXObject来创建相应对象。

设置请求方式和请求地址

接下来设置请求方式和请求地址。常用的请求方式有GET和POST，GET方式一般用于请求数据，而POST方式一般用于提交数据。请求地址可以是相对地址，也可以是绝对地址。

var method = "GET"; // 请求方式
var url = "example.com/data"; // 请求地址
xhr.open(method, url, true); // 调用open方法，准备发送请求

以上代码中，第三个参数表示请求是否异步。若为true，表示请求是异步的；若为false，表示请求是同步的。

设置请求头和请求体

接下来可以设置请求头和请求体。请求头常用的有Content-Type，用于指定请求体的格式，如下面的代码：

xhr.setRequestHeader("Content-Type", "application/json");

以上代码表示请求体的格式为JSON。

对于POST请求，常使用FormData对象来处理请求体，如下面的代码所示：

var formData = new FormData();
formData.append("name", "Tom");
formData.append("age", "20");
xhr.send(formData);

以上代码表示POST请求的请求体中包含2个参数，分别是name和age。

发送请求

设置完毕后，就可以发送请求了。如下所示：

xhr.send();

以上代码会发送一个异步HTTP请求到指定的地址。

获取响应数据

最后需要获取服务器的响应数据。可以通过xhr的readyState、status和responseText属性获取响应数据。如下所示：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

以上代码中，onreadystatechange事件会在状态改变时被触发。当状态为4（即请求完成）且HTTP状态码为200时，表示请求成功，可以获取到服务器返回的数据。

以下是一个完整的Ajax请求函数的实现：

function ajax(method, url, data, success) {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            success(xhr.responseText);
        }
    };
    xhr.open(method, url, true);
    if (method.toUpperCase() === "POST") {
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(data));
    } else {
        xhr.send();
    }
}

以上代码中，ajax函数封装了一次Ajax请求，包括请求方式、请求地址、请求体和回调函数等参数。使用时可以如下所示：

ajax("POST", "example.com/data", {name: "Tom", age: 20}, function(data) {
    console.log(data);
});