封装原生 Ajax 请求

在 JavaScript 中，可以通过封装原生的 Ajax 请求来进行与服务器的数据交互。下面是一个封装了原生 Ajax 请求的示例代码，以及对代码的详细注解。

1.简单的Ajax封装代码

 <h2>ajax原生</h2><script>//1.创建xhr对象var xhr = new XMLHttpRequest();//2.准备发送('请求方式get/post','url地址'，boolean)布尔值是异步，默认为truexhr.open('get','ajax.php',true)//3.发送 send(),get请求send()为空，xhr.send();//4.监听函数//备注，监听当前ajax请求，经行到哪一步，xhr.onreadystatechange=function(){//状态改变，5种状态if(xhr.readyState===4&&xhr.status===200){console.log(xhr.responseText)}}    </script>

2.标准的Ajax封装代码

/*** 发起 Ajax 请求* @param {string} method - 请求方法，如 'GET' 或 'POST'* @param {string} url - 请求 URL* @param {object} data - 请求数据，可选* @param {function} successCallback - 请求成功的回调函数，可选* @param {function} errorCallback - 请求失败的回调函数，可选*/
function ajaxRequest(method, url, data, successCallback, errorCallback) {// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 监听请求状态变化xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {// 请求成功if (successCallback) {successCallback(xhr.responseText);}} else {// 请求失败if (errorCallback) {errorCallback(xhr.status);}}}};// 打开请求xhr.open(method, url, true);// 设置请求头xhr.setRequestHeader('Content-Type', 'application/json');// 发送请求if (data) {xhr.send(JSON.stringify(data));} else {xhr.send();}
}

上述代码封装了一个名为 ajaxRequest 的函数，用于发起 Ajax 请求。下面是对函数参数和代码逻辑的详细注解：

• method：请求方法，可以是 'GET'、'POST' 等。
• url：请求的 URL。
• data：请求的数据，可选参数。如果需要向服务器发送数据，可以通过这个参数传递。
• successCallback：请求成功的回调函数，可选参数。当请求成功时，将调用此函数，并将服务器返回的响应文本作为参数传递给它。
• errorCallback：请求失败的回调函数，可选参数。当请求失败时，将调用此函数，并将 HTTP 状态码作为参数传递给它。

在函数内部，首先创建了一个 XMLHttpRequest 对象，用于发送 Ajax 请求。然后通过监听 xhr 对象的 onreadystatechange 事件，来处理请求状态的变化。

当 xhr.readyState 的值等于 XMLHttpRequest.DONE 时，表示请求已完成。此时，根据 xhr.status 的值判断请求成功还是失败。如果 xhr.status 的值等于 200，表示请求成功，调用 successCallback 函数并将服务器返回的响应文本作为参数传递给它；否则，表示请求失败，调用 errorCallback 函数并将 HTTP 状态码作为参数传递给它。

接下来，使用 xhr.open 方法打开请求，并使用 xhr.setRequestHeader 方法设置请求头为 'Content-Type': 'application/json'。最后，使用 xhr.send 方法发送请求，如果存在 data 参数，则将其转换为 JSON 字符串并发送。

通过调用 ajaxRequest 函数，可以方便地发起 Ajax 请求，并通过传递回调函数来处理请求的结果。