实现一个AJAX请求

AJAX是Asynchronous JavaScript and XML的缩写，指的是通过Javascript的异步通信，从服务器获取XML文档从中提取数据，再更新当前页面的对应部分，而不用刷新整个网页
创建AJAX请求的步骤：

• 创建一个XMLHttpRequest对象
• 在这个对象上使用open方法创建一个HTTP请求,open方法所需要的参数是请求的方法，请求的地址，是否异步和用户的认证信息
• 在发起请求前，可以为这个对象添加一些信息和监听函数。一个 XMLHttpRequest对象一共有5个状态，当它的状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的readyState变为4时，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态status，如果状态是2xx或者304，则代表返回正常。这个时候就可以通过response中的数据来对页面进行更新了
• 还可以通过setRequestHeader方法来为请求添加头信息
• 当对象的属性和监听函数设置完成后，最后调用sent方法来向服务器发起请求，可以传入参数作为发送的数据体

const SERVER_URL = "/server"
//创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest()
//通过open方法创建一个HTTP请求
xhr.open("GET",url,true)
//设置状态监听函数
xhr.onreadystatechange = function(){
	if(this.readystate !== 4) return;
	//请求成功
	if(this.status === 200){
		handle(this.response);
	}else{
		console.log(this.statusText);
	}
};
//设置请求失败时的监听函数
xhr.onerror=function(){
	console.log(this.statusText);
}
//设置请求头信息
xhr.responseType="json";
xhr.setRequestHeader("Accept","application/json")
//发送Http请求
xhr.send(null);

使用promise封装实现

function getJSON(url){
	let promise = new Promise(function(resolve,reject){
		let xhr = new XMLHttpRequest();
		xhr.open("GET",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.setResponseHeader("Accept","application/json");
		xhr.send(null);
	});
	return promise;
}