封装的套路：
1.写一个相对比较完善的用例
2.写一个空函数，没有形参，将刚刚的用例直接作为函数的函数体
3.根据使用过程中的需求抽象函数
代码记录如下：
<script>
function ajax (method,url,params,done) { method=method.toUpperCase();
var xhr=new XMLHttpRequest();
var tempArr=[];
if (typeof params=== 'object') {
for(var key in params){
var value = params[key];
tempArr.push(key+'='+value);
}
params=tempArr.join('&');
}
if (method==='GET') {
url+='?'+params;
}
xhr.open(method,url);
var data=null;
if (method==='POST') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
data=params;
}
params=params || null;
xhr.send(data); xhr.onreadystatechange=function () {
if (this.readyState!==4) return;
//reurn 无法再内部包含的函数中通过return给外部函数的调用返回结果
//由于异步模式下，这里的代码最后执行，所以不可能在外部通过返回的方法
done(this.responseText);
} }
ajax('POST','add.php',{key1 : 'value1',key2: 'value2'},function (res){
console.log(res);
}); </script>
jQuery中ajax的基本使用
<script src="jq-1.12.4.js"></script>
<script>
$.ajax({
url: 'add.php',
type: 'POST', //methor 请求方法
success : function(res){
console.log(res); //拿到的是响应体
},
dataType: 'json',
data: {id: 1, name:'张三'}
}); </script>
jQuery中ajax的回调函数使用
<script src="jq-1.12.4.js"></script>
<script>
$.ajax({
url: 'add.php',
type: 'POST',
beforeSend: function (xhr){
//在所有的发送请求的操作之前执行
console.log('beforeSend',xhr);
},
success: function(res){
//隐藏loading
//只有请求成功（状态码为200）才会执行这个函数
console.log(res);
}, error:(function(xhr) {
//隐藏loading
//只有请求不正常（状态码不为200）才会执行这个函数
console.log("error");
}),
complete:(function(xhr) {
//不管成功还是失败都会执行这个函数
console.log("complete");
})
}); </script>