封装原生 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 请求，并通过传递回调函数来处理请求的结果。
)
)