Ajax core-XMLHttpRequest five-step method

Introduction:

Ajax = Asynchronous JavaScript + XML, Ajax is a technology used to create fast dynamic web pages.

Open door:

Explanation: Ajax uses XHTML and CSS for webpage presentation, Dom Dynamic Display and interaction, XML for data exchange and processing, XMLHttpRequest for data retrieval, and JavaScript for integrating the above technologies.

What is the difference between Ajax and traditional web development?

To sum up one sentence: During page Jump, the whole page is refreshed traditionally; Ajax is a part of data changes.

Transformation of Thinking Mode: in traditional Web applications, page interaction is dominant, Synchronous Response, non-standard layout and development, and the main code is on the server side, ajax is dominated by data interaction, asynchronous response, standard layout, and page segments that require more code.

Core Ajax knowledge point (1): XMLHTTPRequest object

Summary: How to Use XMLHttpRequest in five steps:

1. Create an XMLHTTPRequest object

2. register the callback function

3. Use the open method to set basic information for interaction with the server.

4. Set the sent data to start interacting with the server.

5. Check whether the interaction ends and the response is correct in the callback function. Obtain the data returned by the server and update the page as needed.

/** To change this license header, Choose License headers in project properties. * To change this template file, choose tools | templates * and open the template in the editor. * /// the person who uses the encapsulation method only cares about the construction definition of the HTTP request method, URL address, successful and failed method // class, the main responsibility is to create the xmlrequest object var myxmlhttprequest = function () {// encapsulate var XMLHttpRequest in different browsers defined; If (window. XMLHttpRequest) {XMLHttpRequest = new XMLHttpRequest (); If (xmlhttpreques T. overridemimetype) {XMLHttpRequest. overridemimetype ("text/XML") ;}} else if (window. activexobject) {var activename = ["msxml2.xmlhttp", "Microsoft. XMLHTTP "]; for (VAR I = 0; I <activename. length; I ++) {try {XMLHttpRequest = new activexobject (activename [I]); break;} catch (E) {}}} if (XMLHttpRequest === undefined | XMLHttpRequest === null) {alert ("XMLHTTPRequest object creation failed !! ");} Else {This. XMLHTTP = XMLHttpRequest; }}; // The method by which the user sends the request. myxmlhttprequest. prototype. send = function (method, URL, Data, callback, failback) {If (this. XMLHTTP! = Undefined & this. XMLHTTP! = NULL) {method = method. touppercase (); If (method! = "Get" & method! = "Post") {alert ("the HTTP request method must be get or post !! "); Return;} If (url = NULL | url = underfined) {alert (" the HTTP request address must be set! "); Return;} var tempxmlhttp = This. XMLHTTP; this. XMLHTTP. onreadystatechange = function () {// event trigger for request change if (tempxmlhttp. readystate = 4) {// 4 = complete. If (tempxmlhttp. status = 200) {var responsetext = tempxmlhttp. responsetext; // the server's corresponding text content var responsexml = tempxmlhttp. responsexml; // The DOM object if (callback = undefined | callback = NULL) corresponding to the xnl content on the server {alert ("no correct method is set for data processing! "); Alert (" returned data: "+ responsetext);} else {callback (responsetext, responsexml );}} else {If (failback = undefined | failback = NULL) {alert ("no processing method is set for failed data processing! "); Alert (" HTTP Response Code: "+ tempxmlhttp. status + ", response code file information:" + temphttp. status);} else {failback (tempxmlhttp. status, tempxmlhttp. statustext) ;}}}; // solves the cache conversion if (URL. indexof ("? ")> = 0) {url = URL +" & T "+ (new date (). valueof () ;}else {url = URL + "? "+ (New date ()). valueof ();} // solves the cross-origin problem if (URL. indexof ("http: //")> = 0) {URL. replace ("? "," & "); Url =" Proxy? Url = "+ URL;} This. XMLHTTP. open (method, URL, true); // if it is post, you need to set the request header if (Method = "Post") {This. XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded");} This. XMLHTTP. send (data);} else {alert ("XMLHTTPRequest object creation failed, unable to send data! ") ;}}; Myxmlhttprequest. Prototype. Abort = function () {This. XMLHTTP. Abort ();};

Analysis Code:

In general, the Code defines the constructor of the XMLHTTPRequest object, which encapsulates different browsers, and then defines a send method. This method has several parameters: the method has two numbers: "Get" and "Post". The URL indicates the address of the requested server. The data is the data returned to the server. The callback method onreadystaechange is registered, and the readstate has five values, we only care about when the value is 4, that is, the corresponding data is successfully received, and then solve some small problems: Cross-origin and post cache problems using URL conversion; finally, it encapsulates the method to discard the request object. When using the method, you can call your own internal method.

Callback and fallback are actually written in JavaScript.

Summary:

Ajax will replace it with something better later. It is just a stage of our learning. A new thing, we can see as new and more traditional things, there will be its differences, and most people may see it more in different places, we tend to ignore the similarities between things and traditional things. If we change our mindset, we will find that new things are easy to grasp after we have mastered the traditional foundation.

Ajax core-XMLHttpRequest five-step method