jQuery ajax (review)—Baidu ajax request separated version_javascript skills

You read the title correctly. This article is indeed about Baidu ajax, but it is a version from a long, long time ago.
Since the jQuery ajax module has 800 lines, and the core function jQuery.ajax has 380 lines, it is easy to get confused by the code logic when directly analyzing this code.

So let’s first analyze a simple ajax code from the early Baidu Tangram project.
Use this to review the knowledge of ajax first.

baidu.ajax.request separated version

Copy code The code is as follows:

/**
* Send an ajax request
* @author: allstar, erik, berg
* @name ajax.request
* @function
* @grammar ajax.request(url[, options] )
* @param {string} url The url to send the request
* @param {Object} options The option parameters to send the request
* @config {String} [method] The type of request sent. The default is GET
* @config {Boolean} [async] Whether to request asynchronously. The default is true (asynchronous)
* @config {String} [data] The data to be sent. If it is a GET request, this attribute is not needed
* @config {Object} [headers] http request header to be set
* @config {number} [timeout] Timeout, unit ms
* @ config {String} [username] Username
* @config {String} [password] Password
* @config {Function} [onsuccess] Triggered when the request is successful, function(XMLHttpRequest xhr, string responseText).
* @config {Function} [onfailure] Triggered when the request fails, function(XMLHttpRequest xhr).
* @config {Function} [onbeforerequest] Triggered before sending the request, function(XMLHttpRequest xhr).
*
* @meta standard
* @see ajax.get,ajax.post
*
* @returns {XMLHttpRequest} The XMLHttpRequest object that sends the request
*/
var ajax = {};
ajax.request = function(url,options,type){
// Whether asynchronous is needed
var async = options.async||true,
// Username, password
username = options.username||"",
password = options.password||"",
/ / Data to be transmitted
data = options.data||"",
// GET or POST
method = (options.method||"GET").toUpperCase(),
/ / Request headers
headers = options.headers||{},
// Event handler function table
eventHandler = {},
// Request data type
dataType = type||" string";//xml||string
function stateChangeHandler(){
// See if it is ready
if(xhr.readyState == 4){
// Get xhr current Status
var sta = xhr.status;
// Determine whether it is successful
if(sta == 200||sta == 304){
// If successful, trigger success
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;
// Find the corresponding event processing function in the event handler table
var handler = eventHandler[type];
// If the function exists, then
if(handler){
// If unsuccessful
if(type != "onsuccess"){
handler (xhr);
// Successful
}else{
// Return different data according to dataType
handler(xhr,dataType!="xml"?xhr.responseText:xhr.responseXML );
}
}
}
// Assemble eventHandler
for(var key in options){
eventHandler[key] = options[key];
}
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();
// If the method is GET, assemble the data into the url
if(method == "GET"){
url = (url.indexOf("?")>=0)?"&":"?";
url = data;
// Clear data
data = null;
}
// If it is asynchronous
if (async){
// Bind readystatechange handler
xhr.onreadystatechange = stateChangeHandler;
}
// See if A password is required
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 all the request header information in options
for(var key in headers){
xhr.setRequestHeader(name,headers[ key])
}
// Trigger event beforerequest
fire("beforerequest");
// Send data
xhr.send(data);
// If not asynchronous
if (!async){
// Directly run stateChangeHandler to process the data
stateChangeHandler();
}
return xhr;
}

This code is relatively easy to understand:
• Create a new XMLHttpRequest object through XMLHttpRequest().
•Check whether it is GET or POST. If it is GET, assemble the url. If it is POST, set the request header.
•Check whether it is asynchronous, and if so, register the listening function stateChangeHandler.
•Check if a username and password are required and execute open.
•Send a request.
•Wait for the listening function to handle the event.
baidu.ajax.get & baidu.ajax.post

Copy code The code is as follows:

/**
* Send a post request
* @name ajax.post
* @function
* @grammar ajax.post(url, data[, onsuccess])
* @param {string} url The URL address of the request
* @param {string} data The data sent
* @param {Function} [onsuccess] The callback function after the request is successful, function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.get,ajax.request
*
* @returns {XMLHttpRequest} The XMLHttpRequest object that sends the request
*/
ajax.post = function(url,data,onsuccess){
return ajax.request(url,{"data":data,"onsuccess":onsuccess,method :"POST"});
}

Copy code The code is as follows:

/**
* Send a get request
* @name ajax.get
* @function
* @grammar ajax.get(url[, onsuccess])
* @param {string} url send Requested url address
* @param {Function} [onsuccess] The callback function after the request is successful, function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.post,ajax. request
*
* @returns {XMLHttpRequest} Send the requested XMLHttpRequest object
*/
ajax.get = function(url,data,onsuccess){
return ajax.request(url,{"data":data,"onsuccess": onsuccess});
}

baidu.ajax.get and baidu.ajax.post are both extended through baidu.ajax.request.