今天给大家分享一下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编程开始喽 唔哩唔哩轰....
dayewandou通过本文主要向大家介绍了jquery,ajax,封装等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com