你没有看错标题，本文的确是在讲Baidu ajax，不过是很久很久以前的版本了。
由于jQuery ajax模块有800+行，而核心函数jQuery.ajax就有380+行，直接分析这段代码很容易被代码逻辑弄晕。
所以我们先分析一段简单的ajax代码，来自早期的百度七巧板项目。
通过这个来先复习一遍ajax的知识。
baidu.ajax.request分离版
/*
*
* 发送一个ajax请求
* @author: allstar, erik, berg
* @name ajax.request
* @function
* @grammar ajax.request(url[, options])
* @param {string} url 发送请求的url
* @param {Object} options 发送请求的选项参数
* @config {String} [method] 请求发送的类型。默认为GET
* @config {Boolean} [async] 是否异步请求。默认为true（异步）
* @config {String} [data] 需要发送的数据。如果是GET请求的话，不需要这个属性
* @config {Object} [headers] 要设置的http request header
* @config {number} [timeout] 超时时间，单位ms
* @config {String} [username] 用户名
* @config {String} [password] 密码
* @config {Function} [onsuccess] 请求成功时触发，function(XMLHttpRequest xhr, string responseText)。
* @config {Function} [onfailure] 请求失败时触发，function(XMLHttpRequest xhr)。
* @config {Function} [onbeforerequest] 发送请求之前触发，function(XMLHttpRequest xhr)。
*
* @meta standard
* @see ajax.get,ajax.post
*
* @returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象
*/
var
ajax =
{};
ajax.request
=
function
(url,options,type){
//
是否需要异步
var
async = options.async||
true
,
//
用户名、密码
username = options.username||""
,
password
= options.password||""
,
//
需要传输的数据
data = options.data||""
,
//
GET还是POST
method = (options.method||"GET"
).toUpperCase(),
//
请求头
headers = options.headers||
{},
//
事件处理函数表
eventHandler =
{},
//
请求数据类型
dataType = type||"string";
//
xml||string
function
stateChangeHandler(){
//
看看是否已经准备好了
if
(xhr.readyState == 4
){
//
得到xhr当前状态
var
sta =
xhr.status;
//
判断是否成功
if
(sta == 200||sta == 304
){
//
成功则触发成功
fire("success"
);
}
else
{
//
失败则触发失败
fire("failure"
);
}
//
清除绑定
window.setTimeout(
function
(){
xhr.onreadystatechange
=
new
Function();
if
(async){
xhr
=
null
;
}
},
0
);
}
}
function
fire(type){
//
把type变成ontype
type = "on"+
type;
//
在事件处理器表中找到对应事件的处理函数
var
handler =
eventHandler[type];
//
如果函数存在，则
if
(handler){
//
不成功的话
if
(type != "onsuccess"
){
handler(xhr);
//
成功了
}
else
{
//
则根据dataType返回不同的数据
handler(xhr,dataType!="xml"?
xhr.responseText:xhr.responseXML);
}
}
}
//
组装eventHandler
for
(
var
key
in
options){
eventHandler[key]
=
options[key];
}
//
新建一个XMLHttpRequest对象
var
xhr =
new
XMLHttpRequest();
//
如果方法是GET，则把数据组装到url中
if
(method == "GET"
){
url
+= (url.indexOf("?")>=0)?"&":"?"
;
url
+=
data;
//
清空data
data =
null
;
}
//
如果是异步
if
(async){
//
绑定readystatechange的处理器
xhr.onreadystatechange =
stateChangeHandler;
}
//
看看是否需要输入密码
if
(username){
xhr.open(method,url,async,username,passowrd);
}
else
{
xhr.open(method,url,async);
}
//
如果是POST
if
(method == "POST"
){
//
设置一下请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"
);
}
//
把options中的请求头信息全部设置进去
for
(
var
key
in
headers){
xhr.setRequestHeader(name,headers[key])
}
//
触发事件beforerequest
fire("beforerequest"
);
//
发送数据
xhr.send(data);
//
如果不是异步
if
(!
async){
//
则直接运行stateChangeHandler来处理数据
stateChangeHandler();
}
return
xhr;
}
这段代码还是比较容易理解的：
- 通过XMLHttpRequest()新建一个XMLHttpRequest对象。
- 看看是GET，还是POST方式，如果是GET则组装url，如果是POST，设置一下请求头。
- 看看是不是异步，如果是则注册监听函数stateChangeHandler。
- 看看需不需要用户名和密码，执行open。
- 发送请求。
- 等待监听函数处理事件。
baidu.ajax.get & baidu.ajax.post
/*
*
* 发送一个post请求
* @name ajax.post
* @function
* @grammar ajax.post(url, data[, onsuccess])
* @param {string} url 发送请求的url地址
* @param {string} data 发送的数据
* @param {Function} [onsuccess] 请求成功之后的回调函数，function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.get,ajax.request
*
* @returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象
*/
ajax.post
=
function
(url,data,onsuccess){
return
ajax.request(url,{"data":data,"onsuccess":onsuccess,method:"POST"
});
}
/*
*
* 发送一个get请求
* @name ajax.get
* @function
* @grammar ajax.get(url[, onsuccess])
* @param {string} url 发送请求的url地址
* @param {Function} [onsuccess] 请求成功之后的回调函数，function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.post,ajax.request
*
* @returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象
*/
ajax.get
=
function
(url,data,onsuccess){
return
ajax.request(url,{"data":data,"onsuccess"
:onsuccess});
}
baidu.ajax.get和baidu.ajax.post都是通过baidu.ajax.request扩展的。
