AJAX是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的 异步通信,从服务器 获取 XML 文档从中提取数据,再更新当前网⻚的对应部分,而不用刷新整个网⻚。
请求的方法
,请求的地址
,是否异步
和用户的认证信息
。4
的时候,代表服务器返回的数据接收完成,这个时候可以通过判断请求的状态,如果状态是2xx
或304
的话就代表返回正常。这个时候就可以通过response中的数据对页面进行更新了。const SERVER_URL="/server";
let xhr=new XMLHttpRequest();
//创建HTTP请求
xhr.open("GET", SERVER_URL,true);
//设置状态监听函数
xhr.onreadystatechange=function(){
if(this.readyState!==4)return;
//当请求成功时
if(this.status===200){
handle(this.response);
}else{
console.error(this.statusText);
}
};
//设置请求失败时的监听函数
xhr.onerror=function(){
console.error(this.statusText);
};
//设置请求头信息
xhr.response='json';
xhr.setRequestHeader("Accept","application/json");
//发送HTTP请求
xhr.send(null);
使用Promise封装
function getJSON(url) {
// 创建一个Promise对象
let promise = new Promise(function(resolve, reject) {
let xhr = new XMLHttpRequest();
// 新建一个http请求
xhr.open("GET", url, true);
//设置状态监听函数
xhr.onreadystatechange = function() {
if (this.readyState !== 4) return;
// 当请求失败或成功改变Promise状态
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("Accept", "application/json");
// 发送http请求
xhr.send(null);
});
return promise;
}