Ajax Learning--Understanding Ajax and how it works

Ajax is an abbreviation for asynchronous JavaScript and XML (as well as DHTML, etc.).

The following are the basic techniques used by AJAX applications:
HTML is used to establish WEB forms and to determine the fields used by other parts of the application.
The JavaScript code is the core code that runs an Ajax application, helping to improve communication with the server application.
DHTML or dynamic HTML, used to dynamically update the form. We'll use Div, span, and other dynamic HTML elements to tag the HTML.
• The Document Object Model DOM is used (through JavaScript code) to process the HTML structure and (in some cases) the XML returned by the server.

The basic work principle and process of Ajax

In a generic WEB application, users fill Out form fields and click the Submit button. The entire form is then sent to the server, the server forwards it to the script that handles the form (usually PHP or Java, or it could be a CGI process or something like that), and the script executes and then sends it back to the new page. The page might be HTML with a new form populated with some data, a confirmation page, or a page with some options selected based on the data entered in the original form. Of course, the user must wait while the script or program on the server processes and returns a new form. The screen becomes blank until the server returns data and then redraws. This is why interactivity is poor, and users don't get immediate feedback, so they feel different from desktop applications.

Ajax basically puts JavaScript technology and XMLHttpRequest objects between Web forms and servers. When a user fills out a form, the data is sent to some JavaScript code instead of being sent directly to the server. Instead, the JavaScript code captures the form data and sends the request to the server. Also, the form on the user's screen does not blink, disappear, or delay. In other words, the JavaScript code sends the request behind the scenes, and the user doesn't even know that the request was made. Better yet, the request is sent asynchronously, meaning that the JavaScript code (and the user) does not wait for the server to respond. So users can continue to enter data, scroll the screen, and use the application.

The server then returns the data to the JavaScript code (still in the Web form), which determines how the data is processed. It can quickly update form data, making it feel that the application is done immediately, that the form is not committed or refreshed, and that the user gets new data. JavaScript code can even perform some sort of calculation on the received data and send another request without user intervention at all! This is where XMLHttpRequest the power is. It can interact with the server as needed, and users can even be completely unaware of what is going on behind the scenes. The result is a dynamic, responsive, highly interactive experience similar to desktop applications, but with all the power of the internet behind it.

XMLHttpRequest Object :

open(): establishes a new request to the server.

send(): Sends a request to the server.

abort(): Exits the current request.

readyState: Provides the ready state of the current HTML.

Status: Returns the HTTP status code for the current request

responseText: The request response text returned by the server.

onreadystatechange: When a request is sent to the server, we need to perform some response-based tasks. The onreadystatechange event is triggered whenever the readyState changes.

Reference to the parameters provided: http://www.cnblogs.com/yxpblog/p/4231681.html

Create XMLHttpRequest objects in a way that supports multiple browsers:

varXmlHttp =false;//Global variables for recording XMLHttpRequest objects//methods of creating XMLHttpRequest objectsfunctioncreatexmlhttprequest () {if(Window. ActiveXObject) {//inetrnet Explorer, how to create a XMLHttpRequest object    Try{xmlHttp=NewActiveXObject ("Msxml2.xmlhttp"); } Catch(e) {Try{xmlHttp=NewActiveXObject ("Microsoft.XMLHTTP"); //older versions of Inetrnet Explorer, creating XMLHttpRequest objects}Catch(e) {window. Alert ("Create XMLHttpRequest object Error" +e); }     }  } Else if(Window. XMLHttpRequest) {//How to create a XMLHttpRequest object when MozillaXmlHttp =NewXMLHttpRequest (); }   if(! (xmlHttp)) {//The XMLHttpRequest object was not created successfullyWindow.alert ("Create XMLHttpRequest Object Exception! "); }  }

Request/Response in Ajax

Make a request: the same process is basically the same in an Ajax application:
1. Get the data you want from the Web form.
2. Establish the URL to connect to.
3. Open the connection to the server.
4. Set the function to run after the server finishes.
5. Send the request.

functionCallServer () {//Get the city and state from the Web FormvarCity = document.getElementById ("City").value;varState = document.getElementById ("state").value;//Only go on if there is values for both fieldsif(City = =NULL) || (City = = ""))return;if(state = =NULL) || (state = = ""))return;//Build the URL to connect tovarurl = "/scripts/getzipcode.aspx?city=" + Escape (city) + "&state=" +Escape (state);//Open A connection to the serverXmlhttp.open ("GET", URL,true);//Setup a function for the server to run when it's doneXmlhttp.onreadystatechange =Updatepage;//Send the requestXmlhttp.send (NULL);}

Must know two points:

1. Do nothing until xmlHttp.readyState the value of the property is equal to 4.

2. The server fills in the response into the xmlHttp.responseText attribute.

Response function:

function Updatepage () {  if (xmlhttp.readystate = = 4)    {var response = xmlHttp.  ResponseText;    Document. getElementById ("ZipCode"). Value = response;  }}

The starting code uses the basic JavaScript code to get the values of several form fields. Then set up an ASP script as the target of the link. To notice how the script URL is specified, city and state (from the form) are appended to the URL with a simple GET parameter.

Then open a connection, which is the first time you see the use XMLHttpRequest . It specifies the connection method (GET) and the URL to connect to. The last parameter, if set true , will request an asynchronous connection (this is the origin of Ajax). If used false , the code will wait for the response returned by the server after making a request. If set to true , the user can still use the form (or even call other JavaScript methods) when the server processes the request in the background.

xmlHttp(Remember, this is a XMLHttpRequest property of an object instance) that onreadystatechange tells the server what to do when it finishes running (it might take five minutes or five hours). Because the code does not wait for the server, you must let the server know what to do so that you can respond. In this example, if the server finishes processing the request, a special named updatePage() method is triggered.

Finally, a value null call is used send() . Since the data to be sent to the server has been added to the request URL (city and state), no data is sent in the request. This makes a request and the server works according to your requirements.

A simple summary of the work flow of Ajax:

JavaScript obtains the parameters or variables to pass to the server segment, and then uses the created XMLHttpRequest object to send a server segment, and if the server side accepts the data and returns the data, it is saved in the ResponseText property. Finally, the DOM is modified via JavaScript, which allows the client to modify data without flushing.

Reprint: http://www.cnblogs.com/gaoweipeng/archive/2009/01/21/1379184.html

Ajax Learning--Understanding Ajax and how it works