JQuery Ajax:baidu Ajax

You did not read the wrong title, this article is indeed speaking Baidu Ajax, but a long time ago version of the.

Because the jquery Ajax module has the 800+ line, but the core function Jquery.ajax has the 380+ line, the direct analysis this piece of code is very easy to be confused by the code logic.

So we first analyze a simple Ajax code, from the early Baidu Tangram project.

This is the first time to review the knowledge of Ajax.

Baidu.ajax.request separate version

/** * Send an AJAX request * @author: Allstar, Erik, Berg * @name ajax.request * @function * @grammar ajax.request (url[, Optio             NS]) * @param {string} URL send requested URL * @param {Object} options parameter * @config {string} [method] The type of request sent. The default is get * @config {Boolean} [async] to request asynchronously. The default is True (asynchronous) * @config the data that {String} [data] needs to send.       If it is a GET request, this property is not required * @config {Object} [headers] to set HTTP request header * @config {number} [timeout] Timeout time, Unit ms * @config {string} [Username] username * @config {string} [password] password * @co
 nfig {function} [onsuccess] is triggered when a request succeeds, Function (XMLHttpRequest xhr, String responsetext).
 * @config {function} [OnFailure] request fails to trigger, Function (XMLHttpRequest xhr).
 * @config {function} [onbeforerequest] fires before the request is sent, Function (XMLHttpRequest xhr).
 * * @meta Standard * @see ajax.get,ajax.post * * @returns {XMLHttpRequest} send the requested XMLHttpRequest object*/var Ajax = {}; Ajax.request = function (url,options,type) {//whether to require asynchronous var async = options.async| | True,//username, password username = options.username| | "", Password = options.password| | "",///Transfer required data = options.data| | "",//Get or POST method = (options.method| |) Get "). toUpperCase (),//Request head headers = options.headers| | {},//Event handler function Table EventHandler = {},//request data type DataType = type| | " String ";//xml| | String function Statechangehandler () {//See if you are ready for if (Xhr.readystate = 4) {//
            To xhr current state var sta = xhr.status; Determine if success if (STA = = 200| |
            STA = = 304) {//Success triggers successful Fire ("success");
            }else{//Failure triggers failure Fire ("failure"); }//Clear binding window.settimeout (function () {xhr.onreadystatechange= nEW Function ();
                if (async) {xhr = null;
        }},0);
        } function Fire (type) {//Change type to Ontype type = ' on ' +type;
        To find the handler function of the corresponding event in the event handler table var handler = Eventhandler[type];
            If the function exists, then if (handler) {//unsuccessful if (type!= "Onsuccess") {handler (XHR); Successful}else{//Then return different data handler (xhr,datatype!= "XML") according to DataType? XHR
            . ResponseText:xhr.responseXML);
    }}//assembly EventHandler for (var key in options) {Eventhandler[key] = Options[key];
    //Create a new XMLHttpRequest object var xhr = new XMLHttpRequest (); If the method is get, the data is assembled into the URL if (methods = = "Get") {URL = url.indexof ("?") >=0)? "
        & ":" "?";
        URL + + data;
    Empty data data = NULL; //If it is an asynchronous if (async) {// Binding ReadyStateChange Processor Xhr.onreadystatechange = Statechangehandler;
    //See if you need to enter the password if (username) {Xhr.open (METHOD,URL,ASYNC,USERNAME,PASSOWRD);
    }else{Xhr.open (Method,url,async); //If it is post if (method = = "Post") {//Set the request header Xhr.setrequestheader ("Content-type", "application/x-
    Www-form-urlencoded "); ///Set the request header information in the options for the (var key in headers) {Xhr.setrequestheader (Name,headers[key])}//Touch
    Hair Event Beforerequest Fire ("Beforerequest");
        
    Send the data xhr.send;
    If it is not an asynchronous if (!async) {//) run Statechangehandler directly to process the data statechangehandler ();
return XHR; }