Talking about the realization process of Ajax principle _ajax related

1. What is Ajax?

Ajax is all called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML) and is a web development technology that creates interactive Web applications. It uses:

Use XHTML+CSS to standardize rendering;
Use XML and XSLT for data exchange and related operations;
Asynchronous data communication with the Web server using the XMLHttpRequest object;
Use JavaScript to manipulate document Object model for dynamic display and interaction;
Use JavaScript to bind and process all data.

The working principle of 2.AJAX

Ajax works by adding a middle-tier (Ajax engine) between the user and the server, enabling the user to respond asynchronously to the server. Not all user requests are submitted to the server, such as data validation and processing, which are given to the Ajax engine itself, and the Ajax engine submits the request to the server only if it is determined that the new data needs to be read from the server.

ajax:asynchronous JavaScript and XML, which realizes the process of data communication between client and server. The advantage of using technology is that you don't need to refresh the page, and you can do other things while waiting for the page to transfer data.

This is a good representation of asynchronous invocation. The first thing to understand is the concept of asynchrony and synchronization.

For example, if you go to the library to borrow some kind of book, unfortunately the library is out of the book. There are two ways to do this.

The first way: wait in the library until someone return the book, and then go to bed and eat.

The second way: directly with the librarian agreement, if someone returned the book, directly notify you. You should be busy doing something. I'll let you know by then.

And the first approach is synchronous performance, must wait for someone else to return the book (Waiting for the server returned information) before doing other things, to the death of the party.

And the second approach is asynchronous performance, do not delay time, reasonable use of time to work efficiently.

In that case, would you adopt that approach?

Choose the first, haha, you are too persistent, choose the second, you flexible, reasonable arrangement of their own life. You can do it yourself.

How does Ajax send HTTP requests from the browser to the server?

This has to be done using an important object XMLHttpRequest.

Let's first take a look at the properties and methods of the XMLHttpRequest object.

The main properties:

The ReadyState property has five status values.

0: Is uninitialized, uninitialized. The XMLHttpRequest object has been created but not initialized.
1: is loading,send for request but not called. is ready to be sent.
2: Is loaded, send called,headers and status are available. has been sent, but no response has been received yet.
3: Is interactive,downloading response,but responsetext only partial set. Receiving a response, but not complete.
4: It's completed,finish downloading. Acceptance response completed.

ResponseText: The response text returned by the server. Only when the readystate>=3 value, according to the readystate state value, you can know that when readystate=3, the return of the response text is incomplete, only readystate=4, fully return to accept all the response text.

Responsexml:response as Dom Document object. The response information is XML and can be resolved to a DOM object.

Status: The HTTP status code of the server, if 200, indicates ok,404, which is indicated as not found.

StatusText: Text of the server HTTP status code. Like Ok,not Found.

The main approach:

Open (Method,url,boolean): Opens the XMLHttpRequest object. Where method methods have get,post,delete,put. If you look up the data and get a certain amount of data from the server, then you use the getting. If you are submitting to the server directly and updating certain data, then using Post;url is the address of the requesting resource. The third parameter indicates whether to use asynchronous. The default is true, because Ajax is characterized by asynchronous delivery. False if synchronization is used. Asynchronous and synchronized above have been examples.

Send (body): Sends request AJAX engine, lets the AJAX engine operate. The content sent can be the required parameters, if no parameters, direct send (NULL)

So how do you use AJAX technology?

First, there are client events that trigger AJAX events.

Then, create the XMLHttpRequest object, which, depending on the browser, creates a different XMLHttpRequest object. With the open call, send the request to the AJAX engine using send.

Finally, after execution, the result is returned to the client.

The following processes are executed: \

The test code is as follows:

To Create a XMLHttpRequest object:

function Createxmlhttprequest () {
//indicates that the current browser is not IE, such as Ns,firefox
if window. XMLHttpRequest) {
xmlHttp = new XMLHttpRequest ();
} else if (window. ActiveXObject) {
xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
  Client event firings:  
   function validate (field) {
   if (trim (field.value). length!=0)
   {
 //create XMLHttpRequest
 createxmlhttprequest ();
 var url= "user_validate.jsp?userid=" + trim (field.value) + "&timestampt=" +new Date (). GetTime ();
 alert (URL);
 Xmlhttp.open ("Get", url, true);
 The method address. Called automatically after processing is complete, callback.
 Xmlhttp.onreadystatechange=callback;
 Xmlhttp.send (null);//sends the parameter to the AJAX engine
 } else{document.getElementById ("Useridspan"). InnerHTML = "";}  
 

Result Return action:

function callback () {
 {  
 alert (xmlhttp.readystate);
 if (xmlhttp.readystate==4) {//ajax engine initialization
 if (xmlhttp.status==200) {//http Protocol Success
 //alert (Xmlhttp.responsetext) ;
 document.getElementById ("Useridspan"). InnerHTML = "<font color= ' Red ' >" + xmlhttp.responsetext + "</font>" ;
 } else
   {
    alert ("Request failed, error code =" +xmlhttp.status);
   }    
 }
 }

Attention:

onReadyStateChange event, which triggers this event when the ReadyState state value changes.

In the process of XMLHttpRequest submitting an HTTP request, the readyState goes through five state values (0,1,2,3,4), so alert (xmlhttp.readystate) in the callback function is constantly outputting 1,2,3, 4. 0 of the states do not output because the 0 state does not perform this event.

PS: The readystate status order of the output in the Eslipse Default Web browser was always: 1,3,4,2. At that time is very tangled, because the state value meaning analysis, the result should be 1,2,3,4. Later, after a long day, only to find that the browser problem. Different browsers, the results of the execution are different. Using IE browser test, the result is 1,2,3,4. Haha, really only unexpected, not found.