在项目中，经常需要封装函数，而封装AJAX是很好的选择，可以通过传递参数动态进行异步交互，而且可以动态转判断并且转换JSON字符串
下面上步骤：
第一步，写出创建XMLHttpRequest异步对象的方法：
function createXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}然后现在页面中写出AJAX异步交互的流程雏形：
<script type="text/javascript" src="createXhr.js"></script>
<body>
<script type="text/javascript">
function ajax(){
var xhr = createXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
//如果想用post提交，添加消息头xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//使用get提交
xhr.open("get",url,true);
//post
//send(定义需要传字符串);
xhr.send(null);
}
</script>
</body>下面进行封装 -要求实现：可以动态选择post或者get提交方式，而且可以判断传回来的是否是JSON字符串，并且可以定义想要传的数据
<script type="text/javascript">
function ajax({type,url,data,dataType}){
return new Promise(open=>{
var xhr = createXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
if(dataType =="json")
open(JSON.parse(xhr.responseText));
else
open(xhr.responseText)
}
}
if(type == "get")
url = "?"+data;
xhr.open(type,url,true);
xhr.send(null);
else if(type == "post")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencode");
xhr.open(type,url,true);
xhr.send(data);
})
}
</script>这样封装完成
原理：
在函数中传入：type（用来传入选择post/get），url（传入要进行异步的文件路径），data（要进行传输的数据），
dataType（输入返回类型是不是json）
使用 return new Promise(open=>{})包裹函数，防止回调地狱的产生
判断返回的数据是否是json字符串 格式，如果是就进行转换
判断传入的请求方式是否是post/get并根据方式的不同进行不同的异步
再调用的时候：
(()=>{
ajax({
type:"xxx",
url:"xxx",
data:"xxx",
dataType:"xxx"
}).then(函数名=>{
函数体
});
})()这里使用了匿名函数自调，由于函数在创建的时候，使用了参数解构，故在调用的时候，这几个参数可以有也可以没有，
他们是不会影响顺序的，由于使用了防止回调地狱产生的return new Promise(open=>{})
故调用的时候，需要在参数结尾加.then(函数名=>{
函数体
})
案例使用：
假设有一个index页面，需要为其添加header.html和footer.html
第一步：在index中加入header，设置id为header，加入footer，设置其id为footer
第二步：在js中新建header.js和footer.js并调用动态异步获取
（1）header.js：
(()=>{
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","css/header.css");
document.head.appendChild(link);
ajax({
type:"get",
url:"header.html"
}).then(header=>{
document.getElementById("header").innerHTML=html;
});
})()原理：
先创建link并设置rel和href，并将link加入到index.html的head中 ->读取header.css样式
在从header.html中通过异步获取HTML中的内容并将header中的内容更改为异步请求回来的数据
第三步：
在index.html底部引入ajax.js与header.js
页脚步骤同header