基于promise封装Ajax的请求方法

1.Ajax请求是以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。
2.使用Ajax必须调用open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL和表示是否异步.

//规定请求类型（POST或GET）、请求地址url、异步async（true）同步（false）
xhr.open(obj.type, obj.url + "?" + params, obj.async)

3.而open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上

//发送请求
xhr.send(null)

4.接收到响应后，响应的数据会自动填充XMLHttpRequest对象(简称XHR)对象，相关属性如下：

属性名	说明
responseText	作为响应主体被返回的文本
responseXML	如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM文档
responseText	作为响应主体被返回的文本
status	响应的HTTP状态
statusText	HTTP状态的说明

5.接受响应之后，第一步检查status属性，以确定响应已经成功返回。一般而已HTTP状态代码为200作为成功的标志

200 – OK – 服务器成功返回了页面
400 – Bad Request – 语法错误导致服务器不识别
401 – Unauthorized – 请求需要用户认证
404 – Not found – 指定的URL在服务器上找不到
500 – Internal Server Error-- 服务器遇到意外错误，无法完成请求
503 – ServiceUnavailable – 由于服务器过载或维护导致无法完成请求

6.使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法； 服务器连接已建立；
2-发送，已经调用了send()方法，未接收到响应； 请求已接收；
3-接收，已经接收到部分响应数据； 请求处理中；
4-完成，已经接收到全部响应数据； 请求已完成；
代码：

function ajax(obj) {
		var  promise = new Promise((resolve,reject)=>{
			var xhr = null;
			var params = formsParams(obj.data)
			if (window.XMLHttpRequest) {
			    xhr = new XMLHttpRequest();
			} else {
			    xhr = new ActiveXObject("Microsoft.XMLHTTP");//兼容IE6及其以下版本浏览器
			}
			//连接和发送
			if (obj.type === 'GET') {
			    xhr.open(obj.type, obj.url + "?" + params, obj.async)
				//GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便提交给服务器。
			    xhr.send(null)
			} else if (obj.type === 'POST') {
				//设置表单提交时的内容类型
			    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			    xhr.open(obj.type, obj.url + "?" + params, obj.async)
				//POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的POST传输方式。
			    xhr.send(params)
			}
			xhr.onreadystatechange = function() {
			    if (xhr.readyState === 4) {
			        if (xhr.status >= 200 && xhr.status < 300) {
						resolve(xhr.responseText);
			        }else{
						reject(xhr.staus);
					}
			    }
			}
		})
		return promise
	}
	//参数格式化
	function formsParams(data) {
	    var arr = []
	    for (let index in data) {
	        arr.push(data[index])
	    }
	    arr.join('&')
	}
	
	//调用
	ajax({
	    type: 'GET',
	    url: 'https://api.apiopen.top/getJoke',
	    data: {},
	    async: true
	}).then(res=>{
		document.write(res);
	}).catch(err=>{
		console.log('请求失败！');
	})