手写一个ajax请求

1.需求：手动封装一个ajax请求
2.实现如下：
2.1获取异步请求对象

// 获取异步请求对象
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
    xhr=new XMLHttprequest();
}else{
	// 如果浏览器版本是IE8以下浏览器
    xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;}

2.2.创建ajax函数：

// url:"url路径"  type:请求方式  data:请求参数类型  dataType：返回的字符串类型
function ajax({url,type,data,dataType}){
return new Promise(function(resolve,reject){
	//1. 创建异步请求对象
	var xhr=getXhr();
	// 备注：无需通过上面的方式，简单的创建异步请求对象的简化代码如下：
	// var xhr = window.XMLHttpRequest ? new XMLHttprequest() : new ActiveXObject('Microsoft.XMLHttp');
	//2.绑定监听事件
	xhr.onreadystatechange=function(){
		// 当异步请求状态变为4时，并且返回的状态码为200，接收响应成功
		if(xhr.readyState==4&&xhr.status==200){
			// 当返回接收的字符串类型为json串时，自动转换json串
			if(dataType!==undefined
				&&dataType.toLowerCase()==="json")
				var res=JSON.parse(xhr.responseText)
			else
				// 否则直接获取返回的响应文本中的内容
				var res=xhr.responseText
			// 通过Promise，将返回的数据向后传递,相当于获取到请求数据将数据return出来
			resolve(res);
		}
	}
	// 如果请求方式为get请求，则将请求参数拼接在url后
	if(type.toLowerCase()==="get"&&data!==undefined){
		url+="?"+data;
	}
	//3.打开连接
	xhr.open(type,url,true);
	// 如果请求方式为post请求，则修改请求消息头
	if(type.toLowerCase()==="post")
		//增加：设置请求消息头
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//4.发送请求
	if(type.toLowerCase()==="post"&&data!==undefined)
		xhr.send(data);
	else
		xhr.send(null);})

2.3调用：引入对应的js文件，然后调用。如下图：

3.jQuery中调用ajax函数获取数据：通过promise中 .then(function(res) {}), 其中res即返回给客户端的数据。或者通过success：function(res){}来获取服务器返回的数据。
如下所示：
3.1通过success：function(res){}来获取服务器返回的数据

$.ajax({
    url:"header.html",
    success: function(res){
        $(res).replaceAll("header");
        $(`<link rel="stylesheet" href="css/header.css">`).prependTo("head");
    }
})

3.2通过promise中 .then(function(res) {})获取服务器返回的数据

$.ajax({
    url: "http://127.0.0.1:3000/index",
    type: "get",
    dataType: "json"
}).then(function(res) {...}

4.转载请注明出处。