Ajax--javascript implementation

Ajax: A way to communicate with a server without having to refresh the entire page
Steps to implement Ajax:

1. Create a XMLHttpRequest Object

2. The server responds to the request from the browser (register for monitoring)

3, the browser and the server to establish a connection

4. The browser sends the request to the server

the ReadyState property represents the current state of the AJAX request. Its value is represented by a number.
0 represents uninitialized. The Open method has not been called
1 represents loading. The open method has been called, but the Send method has not yet been called
2 indicates that the load is complete. Send has been called. The request has started
3 represents the interaction. The server is sending a response
4 represents complete. Response sent complete
                
common status codes and their meanings:
404 Page Not Found (not found)
403 No access (forbidden)
500 Internal Server error (internal service error)
2001 cut Normal (OK)
304 was not modified (not modified) (the server returned a 304 status indicating that the source file was not modified)

Xhr.open (method, URL, asynch);
* Connection to the server is used
* Method: The request type, a string similar to "GET" or "POST".
* URL: A path string that points to the file on the server you requested. Request Path
* Asynch: Indicates whether the request is to be transmitted asynchronously, and the default value is True (async).

Send () Method:
* If the type of the browser request is a get type, the request data is sent through the Send () method, the server cannot receive
* If the browser request type is post type, send the request data through the Send () method, the server can receive

Demo:

Get mode window.onload=function() {document.getElementById ("OK"). onclick=function(){        varXhr=createxmlhttprequest ();//get XMLHttpRequest ObjectXhr.onreadystatechange=function(){//callback function            if(xhr.readystate==4) {//Callback Status                if(xhr.status==200 | | xhr.status==304)//Server status?                {                    varDate=xhr.responsetext;//Server returns dataalert (date);        }            }        }; varId= "A001";        alert (ID); Xhr.open ("GET", "... /testgetservelet?id= "+id,true);//1, Send mode 2, page path, 3, whether the request is asynchronous, the default is TrueXhr.send (NULL);//Send Data--get way, there is no need to write data, even if the data server can not receive    }; functioncreatexmlhttprequest () {varxmlHttp; Try{//Firefox, Opera 8.0+, Safarixmlhttp=NewXMLHttpRequest (); }Catch(e) {Try{//Internet Explorerxmlhttp=NewActiveXObject ("Msxml2.xmlhttp"); }Catch(e) {Try{xmlHttp=NewActiveXObject ("Microsoft.XMLHTTP"); }Catch(e) {}}} returnxmlHttp;}};

1 Post Mode2 3Window.onload=function(){4document.getElementById ("OK"). onclick=function(){5         varXhr=createxmlhttprequest ();6Xhr.onreadystatechange=function(){7             if(xhr.readystate==4)8             {9                 if(xhr.status==200 | | xhr.status==304)Ten                 { One                     varData=Xhr.responsetext; A alert (data); -                 } -             } the         }; -          -Xhr.open ("Post", ".. /testgetservelet ",true);  -         //if it is a POST request, set the request header information +Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); -Xhr.send ("a=1&b=2"); +     }; A      at     functioncreatexmlhttprequest () { -            varxmlHttp; -            Try{//Firefox, Opera 8.0+, Safari -xmlhttp=NewXMLHttpRequest (); -}Catch(e) { -                    Try{//Internet Explorer inxmlhttp=NewActiveXObject ("Msxml2.xmlhttp"); -}Catch(e) { to                       Try{ +xmlhttp=NewActiveXObject ("Microsoft.XMLHTTP"); -}Catch(e) {} the            } *     } $    returnxmlHttp;Panax Notoginseng  } -      the};

Ajax--javascript implementation