Ajax--xmlhttprequest Five-Step use method

      the difference between the traditional way of browsing and Ajax

Most Web applications use the request/response model to obtain a full HTML page from the server. It is often clicked on a button, waiting for the server to correspond, clicking on another button, and then waiting, such a repetitive process.

Ajax is a web development technique that creates interactive Web pages, where XMLHttpRequest is the core content that provides a specific way of communicating the JavaScript scripts in the page, thus creating a dynamic interaction between the page's JavaScript script and the server. The biggest advantage of XMLHttpRequest is that JavaScript scripts within the page can interact directly with the server without having to refresh the page.

       XMLHttpRequest Five-step use method     1. Establish XMLHttpRequest Object      

1. Create the XMLHttpRequest Object if (window.                    XMLHttpRequest) {//alert ("Ie7,ie8,firefox");                    XMLHTTP =new XMLHttpRequest ();                    if (xmlhttp.overridemimetype) {xmlhttp.overridemimetype ("text/xml"); }}else if (window.                    ActiveXObject) {//alert ("ie6,ie5.5,ie5"); var activexname=["MSXML2. xmlhttp.6.0 "," MSXML2. xmlhttp.5.0 "," MSXML2. xmlhttp.4.0 "," MSXML2. xmlhttp.3.0 "," MSXML2.                    XMLHTTP "," Miscrosoft XMLHTTP "]; for (Var i=0;i<activexname.length;i++) {try{xmlhttp=new Activexobjec                            T (Activexname[i]);                        Break }catch (e) {}}} if (XM Lhttp = = Undefined | | XMLHTTP = = null) {alert ("currentBrowser does not support the creation of XMLHttpRequest objects, please replace the browser ");                Return } array.push (Xmlhttp.readystate);

2. Register callback function    

Xmlhttp.onreadystatechange=callback;

Note that callback cannot be written as callback (), and we want to tell onreadystatechange this property by the method name, which, if added in parentheses, is equivalent to telling the onReadyStateChange property the return value.

3. Use the Open method to set up and server-side interaction basic information

There are two ways      

      Get mode interactive                      xmlhttp.open ("Get", "ajax?name=" + username,true);                      Post mode interactive                     Xmlhttp.open ("Post", "AJAX", true);      Add code      xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded") required for the post-mode interaction

4, set the data sent, start and server-side interaction 

     Get mode     xmlhttp.send (null);     Post mode     xmlhttp.send ("name=" + userName);

5. Update the interface

Determine whether the interaction ends in the callback function, respond correctly, and obtain the data returned by the server as needed, and update the page

     Array.push (xmlhttp.readystate);     Determine whether the server-side interaction is complete, and whether the server-side returns the correct data     if (xmlhttp.readystate = = 4) {     //represents and the server-side interaction has completed        if (Xmlhttp.status = = {        //= The response code for the server is 200, and the data var message=xmlhttp.responsetext is returned correctly           ;           The acceptance method for the DOM object corresponding to the XML data           //is used only if the server side needs to set the ContentType to Text/xml                                   //memory to fill the text content of the div tag           var div= document.getElementById ("message");           Div.innerhtml=message;           alert (array);        }     }

   Summary

Preliminary understanding of the use of XMLHttpRequest objects, so that later more in-depth to understand and use.

Ajax--xmlhttprequest Five-Step use method