封装原生 Ajax 请求
在 JavaScript 中,可以通过封装原生的 Ajax 请求来进行与服务器的数据交互。下面是一个封装了原生 Ajax 请求的示例代码,以及对代码的详细注解。
1.简单的Ajax封装代码
<h2>ajax原生</h2>
<script>
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.准备发送('请求方式get/post','url地址',boolean)布尔值是异步,默认为true
xhr.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 请求,并通过传递回调函数来处理请求的结果。