AJAX 原理(XMLHttpRequest+Promise+URLSearchParams)
AJAX(Asynchronous JavaScript and XML)技术能够让浏览器与服务器通信而无需刷新页面。以下是使用XMLHttpRequest
, Promise
, 和 URLSearchParams
来实现AJAX请求的示例代码:
function fetchData(url, params) {
// 使用URLSearchParams来构建查询字符串
const queryString = new URLSearchParams(params).toString();
// 如果需要将GET参数附加到URL上,可以直接拼接
if (url.indexOf('?') === -1) {
url += '?' + queryString;
} else {
url += '&' + queryString;
}
// 返回一个Promise
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
if (this.status >= 200 && this.status < 300) {
// 请求成功
resolve(xhr.response);
} else {
// 请求出错
reject(new Error(xhr.statusText));
}
};
xhr.onerror = function() {
// 请求异常
reject(new Error("Network Error"));
};
// 发送请求
xhr.send();
});
}
// 使用方法
fetchData('https://api.example.com/data', {param1: 'value1', param2: 'value2'})
.then(response => {
console.log(response); // 处理响应数据
})
.catch(error => {
console.error(error); // 处理错误
});
这段代码定义了一个fetchData
函数,它接受一个URL和一个参数对象,然后使用XMLHttpRequest
发送异步GET请求,并返回一个Promise对象。通过Promise,我们可以在请求成功或失败时相应地处理响应或错误。使用URLSearchParams
来构建查询字符串。
评论已关闭