Jquery is a great JS library. While using jquery, we should also take a good look at how its effects are made, which is much better than reading many so-called JS books. The following is the $. Ajax implementation code of a great function:
Code:
// General functions used to execute Ajax requests
// An object with a parameter that contains a series of options
Function Ajax (options ){
// If the user does not provide an option, use the default value instead.
Options = {
// HTTP request type
Type: Options. type | "Post ",
// Request URL
URL: Options. url | "",
// Request timeout
Timeout: Options. Timeout || 5000,
// The function that is executed when the request fails, succeeds or is completed (whether successful or fails ).
Oncomplete: Options. oncomplete |
Function (){},
Onerror: Options. onerror |
Function (){},
Onsuccess: Options. onsuccess |
Function (){},
// The data type returned by the server. This default value is used to determine the data returned by the server and perform the corresponding action.
Data: Options. Data | ""
};
// Create a request object
VaR xml = new XMLHttpRequest ();
// Initiate an asynchronous request
XML. Open (options. type, options. url, true );
// Wait for 5 seconds after the request, and give up upon timeout
VaR timeoutlenght = options. Timeout;
// Record whether the request is successfully completed
VaR requestdone = false;
// Initialize a callback function that is executed five seconds later to cancel the request (if not completed)
SetTimeout (function (){
VaR requestdone = true;
}, Timeoutlenght );
// Listen for updates to the document status
XML. onreadystatechange = function (){
// Keep waiting until the data is fully loaded and the request does not time out
If (XML. readystate = 4 &&! Requestdone ){
// Check whether the request is successful
If (httpsuccess (XML )){
// Call the success callback function using the data returned by the server as a parameter
Options. onsuccess (httpdata (XML, options. Type ));
}
Else {
Options. onerror ();
}
// Call the completed callback function
Options. oncomplete ();
// Clear documents to avoid Memory leakage
Xml = NULL;
}
};
// Establish a connection with the server
XML. Send ();
// Determine whether the HTTP response is successful
Function httpsuccess (r ){
Try {
// If the server status is not available and we are requesting a local file, the request is considered successful.
Return! R. Status & location. Protocol = "file:" |
// All the statuses between 200 and 300 indicate that they are successful.
(R. Status >=200 & R. Status <300) |
// The document is successfully modified.
R. Status = 304 |
// Safari returns an empty status when the document is not modified
Navigator. useragent. indexof ("safari")> = 0 & typeof R. Status = "undefined ";
}
Catch (e ){
}
// If the check status fails, the request is assumed to have failed.
Return false;
}
// Parse the correct data from the HTTP Response
Function httpdata (R, type ){
// Obtain the Content-Type Header
VaR Ct = R. getResponseHeader ("Content-Type ");
// If the default type is not provided, determine whether the server returns XML format
VaR DATA =! Type & CT. indexof ("XML")> = 0;
// If yes, obtain the XML document object; otherwise, the text content is returned.
Data = type = "XML" | data? R. responsexml: R. responsetext;
// If the specified type is "script", the returned text is executed in Javascript format.
If (type = "script ")
Eval. Call (window, data );
// Return response data (either an XML document or a text string)
Return data;
}
}