1. 创建 XMLHttpRequest 对象。
2. 创建一个HTTP请求,并指定请求的:方法、URL、验证信息。
3. 设置响应请求状态变化的函数。
4. 发生请求。
5. 在回调函数中处理请求返回的数据。
6. 使用javascript和Dom实现局部刷新。
const url = "./api"
let xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
// 请求状态变化事件
xhr.onreadystatechange = function(){
// 请求未结束
if(this.readyState !== 4)
return;
// 请求成功
if(this.status == 200){
handler(this.response);
}
//请求异常
console.error(this.statusText);
return;
}
// 请求失败事件
xhr.onerror = function(){
console.error(this.statusText);
}
// 设置请求头
xhr.responseType = "json";
xhr.setRequestHeader("Accpet","application/json");
xhr.send();
基于 promise 封装
function Request(method,url,body){
let promise = new Promise(function(resolve,reject){
let xhr = new XMLHttpRequest();
xhr.open(method,url,true);
xhr.onreadystatechange = function(){
// 请求未结束
if(this.readyState !== 4)
return;
// 请求成功
if(this.status == 200)
resolve(this.response);
else
reject(new Error(this.statusText));
}
xhr.onerror = function(){
reject(new Error(this.statusText));
}
xhr.responseType = "json";
xhr.setRequestHeader("Accpet","application/json");
xhr.send();
});
return promise;
}