jQuery ajax —— Baidu ajax

你没有看错标题，本文的确是在讲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扩展的。

 

 

分类: Javascript

标签: Javascript, jQuery

jQuery ajax —— Baidu ajax