What are the workflow processes for Ajax? Introduction to Ajax Workflow (with examples)

This article focuses on the workflow of Ajax, as well as the Ajax principle, some of the commonly used property introduction, now let's look at this article together

Ajax is all called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML).

is a web development technique for creating interactive Web applications. It:
Use XHTML+CSS to represent information;
Use JavaScript to manipulate the DOM (Document Object Model) for dynamic display and interaction;
Using XML and XSLT for data exchange and related operations;
Asynchronous data exchange with the Web server using the XMLHttpRequest object;
Use JavaScript to bind everything together.
Ajax principles:
Ajax does not refer to a single technique, but rather to the use of a series of related technologies. Its core is the JavaScript object XMLHttpRequest, which allows us to use JavaScript to make requests to the server and process the response without blocking the user. Ajax employs an asynchronous interaction process that introduces an intermediary between the user and the server, eliminating the processing-waiting-processing-wait disadvantage in the network interaction process. The user's browser loads the Ajax engine as it executes the task, and the Ajax engine is written in JavaScript language, usually hidden in a concealed frame. It is responsible for compiling the user interface and interacting with the server. The Ajax engine allows the interaction between the user and the application to be asynchronous, independent of the communication between the user and the Web server. Now, you can use JavaScript to call the AJAX engine instead of generating an HTTP user action, in-memory data editing, page navigation, data validation these requirements that do not need to reload the entire page can be given to Ajax to execute, using AJAX, can be used for JSP, developers, The end user brings visible convenience.
since the core of Ajax is the XMLHttpRequest object , you have to introduce:
Common Properties:
ONREADYSTATECHANGE Specifies the event handler function when the ReadyState property is changed. Write only
ReadyState represents the current state of the AJAX request. Read-only 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
Each time the ReadyState value changes, the ReadyStateChange event is triggered.
ResponseText returns the response information as a string. read-only. It is a html,xml or plain text, depending on what the server sends. When the ReadyState property value becomes 4 o'clock, the ResponseText property is available, indicating that the AJAX request has ended.
Responsexml formats The response information as an XML Document object and returns, read-only, and the Responsexml property is available only if the server sends data with the correct header information.the MIME type must be Text/xml
Status returns the HTTP status code for the current request. Read-only
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)
In the XMLHttpRequest object, the status codes sent by the server are saved in the status attribute. By comparing this value to 200 or 304, you can ensure that the server has sent a successful response(Want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

Common methods:
Open creates a new HTTP request and specifies the method, URL, and authentication information for this request
Send sends a request to the HTTP server and receives a response if the request is not sent any data for get
setRequestHeader specify an HTTP header for the request individually
Ajax Workflow:
1 Object Initialization

function   createxmlhttprequest () {   var xmlHttp;   try{    //firefox, Opera 8.0+, Safari           xmlhttp=new XMLHttpRequest ();    catch (e) {           try{    //internet Explorer                  xmlhttp=new activexobject ("msxml2.xmlhttp");            } catch (e) {                  try{                   xmlhttp=new activexobject ("Microsoft.XMLHTTP");                  } catch (e) {}             }    }   return xmlHttp;

2 Sending requests
Call the Open and send methods of the XMLHttpRequest object, in order that the Send method is called after the open call is complete.

Xmlhttp.open ("Get", "..") /servlet/registerservlet?timestamp= "+new Date (). GetTime (), true) xmlhttp.send (null);

If the send parameter is sent as post, it can be anything you want to pass to the server, but you must first call the setRequestHeader method to modify the MIME category:
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
3 The server receives processing data and returns, specifying that the event handler handles the return information
Each change to the ReadyState property triggers the ReadyStateChange event as long as the corresponding handler name is assigned to the onReadyStateChange property of the XMLHttpRequest object.

Xmlhttp.onreadystatechange = function () {            if (xmlhttp.readystate = = 4) {   if (xmlhttp.status = = | | xmlhttp.stat US = = 304) {//xmlhttprequest has two ways of handling the information that is returned successfully://responsetext: The  information passed back is used as a string;//responsexml: The information returned is used as an XML document. Can be handled in the DOM.         }            }        };

4 Client Receive
5 Modifying client page content

This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.