jquery 源码分析6-ajax(B)ajax参数组装过程
把整个$.ajax(),拆开,主要有以下几个方面
- 全局ajax函数
ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend
- ajax参数组装过程
- 常见类型json,html,xml,text
- 跨域 JSONP,script
- XMLHttpRequest完成后回调处理服务器端返回的数据
首先将ajax参数组装之常见类型json,html,xml,text,把$.ajax方法简化一下如下
var ajaxF = {
ajax : function(s){
//主要处理处
ajaxSettings(s);
param(s.data);
.....
xMLHttpRequestSend();
onreadystatechange();
}
,
ajaxSettings:{
url: location.href,
global: true,
type: "GET",
timeout: 0,
contentType: "application/x-www-form-urlencoded",
processData: true,
async: true,
data: null,
accepts: {
xml: "application/xml, text/xml",
html: "text/html",
script: "text/javascript, application/javascript",
json: "application/json, text/javascript",
text: "text/plain",
_default: "*/*"
}
....
},
xMLHttpRequestSend :function(s){
var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", s.contentType);
xhr.open();
xhr.send(s.data);
},
optionJSONPAndScript:function(s){},
onreadystatechange : function(){
httpData()
} //xMLHttpRequest回调函数
,
httpData : function(xMLHttpRequest){}, //处理服务器返回的数据,组装成json格式,服务器返回的都是text,xml格式诗句
param : function(data){data} //负责将我们{a:1,b:2}参数拼成a=1&b=2
}
ajaxSettings函数主要负责提供各种默认的参数,我们在使用$.ajax()时大部分时间都是给些必要参数,有时候多个参数,有时候漏掉个参数都能返回正常数据,主要就是ajaxSettings会提供默认参数,没传参的都用这些默认参数,
param方法就是我们在$.ajax({data:{…..}})中的data拼装成a=1&b=2
下面简化下ajax方法
var ajaxF = {
ajax : function(s){
//主要处理处
s = ajaxSettings(s);
var data = param(s.data);
if(s.dataType == "json"){
s.url = s.url + "?"+data //所以本质参数都是都是以这种方式传给后台
}
if(s.dataType == "jsonp"||s.dataType == "script"){
optionJSONPAndScript(s);
}else{
xMLHttpRequestSend(s);
}
if ( !s.async )
onreadystatechange();
}
}
首先赋值给参数s默认参数,接着拼接url,根据dataType不同调用不同方法,
这个有个彩蛋,就是同步,异步问题,我们在参数中设置async = false时,jQuery做了一个判断,如果是同步,就等着xhttpRequest的回调函数onreadystatechange,这个太棒了,一行代码就解决了同步异步问题
接着看xMLHttpRequestSend方法
function xMLHttpRequestSend(s){
var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", s.contentType);
xhr.open(s.type, s.url, s.async);
xhr.send(s.data);
}
根据type不同分别发送get和post请求,请求完成回调onreadystatechange方法;这样一个ajax就基本完成了;