今天给大家分享一下jquery中$.ajax()方法封装的原理，平时数据交互中会经常用到ajax方法，还是很好用的，
但是底层的封装原理如果了解的话，用起来会更得心应手些
jquery中Ajax操作进行了封装，在jquery中$.ajax()方法属于最底层的方法,第二层是load()、$.get()和$.post()方法，
第三层是$.getScript()和$.getJSON()方法。
重点来啦，$.ajax()方法的结构为：$.ajax(options)
该方法只有一个参数，但是在这个对象里包含了$.ajax()方法所需求的请求设置以及回调函数等信息，参数以key/value的形式存在，
所有参数都是可以选的
ajax参数可以有：
1:请求方式：type（get/post）
2:后台接口地址:url（可以从接口文档中查看）
3:通过data把前端传输后台的必要信息传过去：data（如 name = 'wandou' & sex = 'girl'）
4:前后端交互的格式：dataType（xml，html，script，json现在最常用的格式之一，jsonp等）
5：发送请求前所要执行的函数：beforeSend:function(){}
6:请求完成后调用的回调函数（请求成功或者失败时均调用）complete:function(){}
7:请求成功后调用的回调函数：success:function(){}
8:请求失败时被调用的函数：error:function(){}
......
还有好多其他的参数，最近常用到这些，就写这些吧，后面的有想要了解的可以在查阅一下其他的资料
$.ajax({
type:'',
url:'',
data:{},
dataType:'',
beforeSend:function(){
},
success:function(){
},
complete:function(){
}
})
<script src="../jquery-3.2.1.min.js"></script>
<script>
//先来看看需求是啥个样纸
//封装ajax工具函数*/
//有哪一些不确定的点
//确定的参数 类型 默认 参数具体值
//1.请求方式 字符串 get get,post
//2.请求地址 字符串 当前地址 后台处理程序的地址（接口地址）
//3.是否异步 布尔 true true false
//4.发送数据 对象 {} {name:'Echo',age:10}
//5.成功回调 函数 - 响应成功的时候要做的事情 （需求来决定）
//6.失败回调 函数 - 响应失败的时候要做的事情 （需求来决定）
//现在开始说原理喽
$(function(){
$.ajax();
//$是jquery中涵盖最大的一个对象，全局对象
});
window.$={};//这个在这就不多说了
$.ajax=function(options){
//判断 形参options是否接受了用户传入的实参
//如果接受到了，就证明用户传入了实参对象，就可以继续执行后续代码逻辑
//如果没有接收到，就证明用户没有传入实参，或者用户传入的实参不是对象类型的数据,就可以直接结束代码的执行
if(!options||typeof options != 'object'){
return false;
//options如果没接收到实参，他的值是false那么！options的值是true，
// （||只要一个是真的那么就是真的）那么短路运算不再执行，直接执行，return false
//用户输入了实参options的值就是true，！option的值就是false
//用户如果传入的实参不是对象类型，那么后面的值就是true
//就会进入if判断，就结束执行
}
//参数默认值的处理
var type=options.type != 'post'?'get':'post';
//短路运算的或运算，如果第一个值是true就取第一个值，如果第一个值为false就去第二个值
//第一个值是用户输入的url地址，那么如果用户输入了，第一个值就是true那么就取第一个值(用户输入的url地址)
//如果用户没有输入url地址，第一个值就是false，这样就取第二个值（当前地址）
var url=options.url||location.pathname; //当前地址location.pathname
var async=options.async===false?false:true; //判断同步或异步
var data=options.data||{};
//默认请求方法时get，那么get方法中前端向后台传输的必要数据写在url后面
//{name:'Echo',age:19,sex:'gril'}
//xxx.php?name="Echo"&age=19&sex='gril';
var dataStr='';
for(key in data){
dataStr+=key+'='+data[key]+'&';
// 键名 = 键值 &
}
//多一个&符用slice去掉
dataStr=dataStr&&dataStr.slice(0,-1);
//说道这的时候有没有觉得晕晕的了？如果还是很清晰的话，那还是很牛批的哈！接受膜拜吧，大boss来了..
//发送前回调函数，调用beforeSend:function(){}
//那么接下里用户呢,如果输入了beforeSend这个属性，那么options.beforeSend值为true
//反之,options.beforeSend的值为false
if(options.beforeSend){
var flag=options.beforeSend();
if(flag==false){
//这个时候阻止ajax的发送
return false;
}
}
//ajax编程开始喽 唔哩唔哩轰....
var xhr=new XMLHttpRequest();
//请求行
xhr.open(type,type=='get'?url+dataStr:url,async);
//请求头
//get方法不需要设置请求头
if(type=='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
//请求主体 发送
xhr.send(type=='post'?datastr:null);
//响应
xhr.onreadystatechange=function(){
//监听响应状态码（响应状态）
//通讯完成
//readystate响应状态码 xhr.readystate表示xhr对象的响应状态码
if(readystate==4){
//成功
//status响应状态值 200 304 403 404 500及以上
if(status==200){
//拿回数据 转换格式
//后台能确定返回给前端的数据格式
//需要根据后台响应的类型来确定数据格式
var contentType=xhr.getResponseHeader('Content-Type');
//规范的写法 application/xml；
//规范的写法 application/json
var result; //一般情况下，result表示后台响应回来的数据
if(contentType.indexOf('xml')>-1){
//返回xml
result=xhr.responseXML;
//判断我们获取到的contentType是什么语法格式进行解析的，
//如果是按照xml格式进行解析的，就把返回的数据转换成xml格式的数据
}else if(contentType.indexOf('json')>-1){
//返回json
//这个后台返回回来的数据是不是json格式进行解析的
//如果是，就进入if条件判断里
result=JSON.parse(xhr.responseText);
}else{
//如果xml和json都不是，那就让他自由发挥吧！哈哈
result=xhr.responseText;
}
//这为什么会有一个判断式呢？这是个问题，其实是想做一下判断
//假如说未输入success属性，那就取前面的内容，可是前面什么内容也没有，那就继续执行其他的
//假如说输入了内容，那就取后面的内容
options.success&&options.success(result);
}else{
//去调用失败回调函数
var message={
status:xhr.status,
statusText:xhr.statusText
};
//假如设置了错误的提示信息，那就按照输入的提示信息提示
//假如没有设置错误的信息，那就显示默认信息
options.error&&options.error(message);
}
//通讯完成回调函数
options.complete&&options.complete();
}
}
};
$.get = function(options){
options.type='get';
$.ajax(options);
};
$.post = function(options){
options.type = 'post';
$.ajax(options);
}
</script>
dayewandou通过本文主要向大家介绍了jquery,ajax,封装等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com