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;
}

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ajax
， ajax的异步请求
， xmlhttprequest
， function
， config
， xhr
， jquery ajax 数据绑定
， Options
， Ajax发送请求
， Ajax请求发送
， ajax请求失败
， ajax发送post请求
， ajax请求数据
jQuery异步请求
jquery、jquery ajax post、ajax、jquery ajax json、jquery ajax教程，以便于您获取更多的相关知识。