Getting started with Ajax

Understanding synchronous interaction and Asynchronous interaction For example: Normal B/S mode (synchronous) Ajax technology (asynchronous)
* Synchronization:

When you submit a request, wait for the server to process it, and return the result, the client browser cannot do anything. The communication method in which the sender sends the next packet only after the receiver sends back the response. You are transmitting now. I want to see with my own eyes that your transmission is complete before doing anything else.

* Asynchronous:

Request triggered by event-> server processing (the browser can still do other tasks)-> processing is complete. After the sender sends data, the sender sends the next packet instead of sending the response from the receiver. You can transfer it. I am going to do my work. After the transfer, let me know.  

What Is Ajax?

Ajax is considered to be (abbreviation of Asynchronous JavaScript and XML ). Currently, Ajax is a technology that allows the browser to communicate with the server without refreshing the current page.

Ajax is not a new technology, but a combination of several original technologies. It is composed of the following technologies:

1. CSS and XHTML are used for representation.

2. Use the DOM model for interaction and dynamic display.

3. Use XMLHttpRequest to communicate with the server asynchronously.

4. Use JavaScript for binding and calling.

How Ajax works Ajax adopts Asynchronous interaction. Ajax introduces an intermediate media between the user and the server, thus eliminating the disadvantages of processing-waiting-processing-waiting during network interaction.
Your browser loads the Ajax engine when executing tasks. The Ajax engine is written in Javascript language and is usually hidden in a hidden framework. It compiles the user interface and interacts with the server.
The Ajax engine allows Asynchronous interaction between users and applications, independent of communication between users and network servers. Now, you can use JavaScript to call the Ajax engine to generate an HTTP user action, the data editing, page navigation, and data validation in the memory do not need to be re-loaded to the entire page, which can be executed by Ajax.

The principle of AJAX is simply to use the XMLHTTPRequest object to send asynchronous requests to the server, obtain data from the server, and then use JavaScript to operate the Dom to update the page. The most critical step is to obtain request data from the server.

Learn more about XMLHttpRequest

XMLHttpRequest is the core mechanism of Ajax. It is first introduced in ie5. it is a technology that supports asynchronous requests. Simply put, JavaScript can promptly request and process responses to the server without blocking users. Achieve the effect of refreshing.

XMLHttpRequest attributes include:

Attribute	Description
Onreadystatechange	The event handler of the event triggered by each state change.
Responsetext	The string format of the data returned by the server process.
Responsexml	The dom-compatible document data object returned by the server process.
Status	Number Code returned from the server, such as common 404 (not found) and 200 (ready)
Status text	String information of the accompanied status code
Readystate	Object status value, which contains the status information of the server response. When the readystate changes, the onreadystatechange function is executed.

 Possible values of the readystate attribute:

Status	Description
0	Request not initialized (before calling open)
1	Request Submitted (before sending () is called)
2	The request has been sent (here we can usually get the Content Header from the response)
3	Request Processing (some data is usually available in the response, but the server has not completed the response)
4	The request has been completed. You can use responsexml and responsetext to obtain the complete response data.

However, because of the differences between browsers, creating an XMLHTTPRequest object may require different methods. This difference is mainly reflected in IE and other browsers. The following is a standard method for creating an XMLHTTPRequest object.

/** Create an XMLHTTPRequest object **/function ajaxfunction () {var XMLHTTP; try {// Firefox, opera 8.0 +, safarixmlhttp = new XMLHttpRequest ();} catch (E) {// Internet assumertry {XMLHTTP = new activexobject ("msxml2.xmlhttp");} catch (e) {try {XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");} catch (e) {alert (" your browser does not support Ajax! "); Return false ;}}return XMLHTTP ;}
 

Ajax (client) development steps: 1. Create an XMLHTTPRequest object

 
VaR XMLHTTP = ajaxfunction ();
 

2. Accept the Server Response

/* The readystate attribute contains the status information of the server response. When the readystate changes, the onreadystatechange function is executed. */XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4) {var DATA = XMLHTTP. responsetext; alert ("XMLHTTP. responsetext: "+ Data );}}
 

3. Open the connection to the server

 
/** Bstrmethod: HTTP method, such as post, get, put, and PROPFIND. Case Insensitive. * Bstrurl: the requested URL, which can be an absolute or relative address. * Varasync [Optional]: boolean type, which specifies whether the request is asynchronous. The default value is true. If it is true, the callback function specified by the onreadystatechange attribute is called when the status changes. * Bstruser [Optional]: If the server needs to be verified, the user name is specified here. If not, the verification window is displayed when the server needs to be verified. * Bstrpassword [Optional]: password in the verification information. If the user name is blank, this value is ignored. */XMLHTTP. Open (bstrmethod, bstrurl, varasync, bstruser, bstrpassword );
 

4. send a request to the HTTP server

/* Varbody: The data to be sent through this request. */XMLHTTP. Send (varbody );