Basic request/Response model for Ajax

first, the core of Ajax work

The core of Ajax is the JavaScript object XMLHttpRequest(abbreviation XHR)。 It is a technique that supports asynchronous requests.you can make a request to the server and process the response by using the XHR object without blocking the user.

The functions that Ajax can accomplish are:

• Update a Web page without reloading the page
• Request data from the server after the page has been loaded
• Receiving data from the server after the page has been loaded
• Sending data to the server in the background

1.1 Ajax Introduction

Ajax can be said to be the most popular web technology, which uses client-side script to exchange data with the Web server, that is, the client's form request is not directly to the Web server, but some Javascript script, and then through the JS built-in XMLHttpRequest object, asynchronous Send the request to the Web server, the Web server finishes processing and then sends back to the Javascript script, and then dynamically updates the page data. This shows that AJAX is not a standalone technology, but a combination of multiple technologies by javascript+dhtml+dom+html, which has less time to wait for the server to respond, and it can refresh the page locally, thereby enhancing the user experience.

second, the Ajax development Steps

2.1XMLHttpRequest objects

The common methods and properties of the Ajax core object XMLHttpRequest object are as follows:

• Open (): Create a new request to the server
• Send (): Sends a request to the server
• Abort (): Discard the current request
• ReadyState: Object state value, not initialized, loading, loading complete, interactive, complete five kinds.
• ResponseText: Request text information returned by the server
• onReadyStateChange: Event handlers triggered by each state change
• Responsexml: DOM-compatible document data object returned from the server process
• Status: The numeric code returned from the server, such as 404 (Not Found)
• StatusText: String information accompanying the status code

The creation of the XMLHttpRequest object and its interaction with the server are shown in the following code:

<script language= "javascript" type= "Text/javascript" >functionCallServer () {varXmlHttp =NewXMLHttpRequest (); varid = document.getElementById ("id"). Value; varpass= document.getElementById ("PASS"). Value;
if ((ID = = null) | | (ID = = "")) Return
     if ((pass== null) | | (PASS = = "")) return;      //Create a URL link    varurl = "Login?" Id= "+escape (ID) +" &pass= "+Escape (PASS);
The last parameter, if true, will request an asynchronous Nexus Xmlhttp.open ("POST", URL,true); //If the server completes the request, the RefreshPage function is triggeredXmlhttp.onreaadstatechange =RefreshPage; //Send RequestXmlhttp.send (NULL);}functionRefreshPage () {if(Xmlhttp.readystate = = 4) {alert (' The data returned by the server is: ' +xmlhttp.responsetext); }}</script>

2.2 Get the Request object:

Because of different browser differences, getting XMLHttpRequest objects requires a different approach

<script language= "javascript" type= "Text/javascript" ><!--varXMLHTTP; //Create a XMLHttpRequest object    functioncreatexmlhttprequest () {if(Window. ActiveXObject) {//To determine whether ActiveX controls are supportedXMLHTTP =NewActiveobject ("Microsoft.XMLHTTP");//Create a XMLHttpRequest object by instantiating a new instance of ActiveXObject    }    Else if(Window. XMLHttpRequest) {//determine whether to implement XMLHttpRequest as a local JavaScript objectXMLHTTP =NewXMLHttpRequest ();//Create an instance of XMLHttpRequest (local JavaScript object)    }    }// -</script>

2.3 Basic Request/response type for Ajax

The process for processing service requests in an AJAX application is as follows:

• Get data that needs to be submitted from a Web form
• Create a URL to link to
• Open a connection to the server
• Set the function to run after the server finishes
• Send Request

2.4 Calling the Ajax process

<form>    <P>User id:<inputtype= "text"name= "ID"ID= "City"size= "Ten"OnChange= "CallServer ();"/> </P>    <P>Password:<inputtype= "text"name= "PASS"ID= "State"size= "+"OnChange= "CallServer ();"/> </P></form>

Basic request/Response model for Ajax