Ajax and ajax Technologies

Ajax and ajax Technologies

I. Working Principles of Ajax (Asynchronous JavaScript and XML)

1) 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.
2) your browser loads the AJAX engine when executing the task. 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.
3) The AJAX engine allows Asynchronous interaction between users and application software, 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.
4) the core of Ajax is the JavaScript Object XmlHttpRequest

XmlHttpRequest: This object is an extension of JavaScript that enables the webpage to communicate with the server. Is the best choice for creating Ajax applications. In fact, Ajax is usually used as a synonym for XMLHttpRequest objects.

User Interface <--> AJAX engine <--> Server

Ii. Use of Ajax:

A. Create an XmlHttpRequest object:

function createXmlHttpRequest(){var xmlHttp=null;try{   //Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e) {try{//Internet ExplorerxmlHttp=new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");} catch (e){}  }}return xmlHttp;}var xhr = createXmlHttpRequest();

Or simpler:

function createXmlHttpRequest(){var xmlHttp=null;if (window.XMLHttpRequest) {xmlHttp=new XMLHttpRequest()} else if (window.ActiveXObject) {xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")}return xmlHttp;}var xhr = createXmlHttpRequest();

B. Specify the response handler:

Xhr. onreadystatechange = function () {if (xhr. readyState = 4) {// truly process if (xhr. status = 200 | xhr. status = 304) {// The server returns var data = xhr correctly. responseText; // The data returned by the server // write the returned data to the document in the div. getElementById ("d1 "). innerHTML = data ;}}}

C. Send an HTTP request and send data to the server:

// Create an http request and specify the method, URL, and authentication information of the request.
Xhr. open ("GET", "/ajaxday02/servlet/ServletDemo1? Time = "+ new Date (). getTime ());
// Send the request to the http server and receive the response
Xhr. send (null );

D. process the information returned by the server: Execute the processing action in the onreadystatechange function of the response processing function:

Iii. XmlHttpRequest details:

Common attributes:

ReadyState: indicates the current state of the XmlHttpRequest object.

0 (not initialized) the object has been created, but has not been initialized (the open method has not been called)
1 (initialization) the object has been created and the send method has not been called
2 (send data) The send method has been called, but the current status and http header are unknown.
3. Some data has been received because the response and http headers are incomplete,
4. After receiving the data, you can use responseBody and responseText to obtain the complete response data.

The value is only 4, and the corresponding processing of client operations

Onreadystatechange: this event is triggered when the readyState of the XmlHttpRequest object changes. This event processing function is triggered by the server.
During Ajax execution, the server notifies the client of the current communication status. This is implemented by updating the readyState of the XMLHttpRequest object. Changing the readyState attribute is a way for the server to connect to the client.

Status: the http status code returned by the server. 200 is successful. 304 the content on the server side has not changed.
EsponseText: the server returns the response information as a string.
ResponseXml: the server formats the response information as an Xml Document Object and returns

Common Methods:

Open (method, url, isAsync): initializes the XmlHttpRequest object.
Method: Request method. Generally, get or post is used.
Url: the requested server address. You can use relative or absolute paths.
Note: If the address does not change, the browser will not send a request again. Solution: Add a timestamp.
/Ajaxday02/servlet/ServletDemo1? Time = "+ new Date (). getTime ()
IsAsync: whether it is an asynchronous request. The default value is true.

Send (requestData): send request data to the server. Null is not passed.
Data is used in POST request. Data format: username = admin & password = 123

SetRequestHeader (header, value): In an Ajax request, setRequestHeader can be used to send the header information.
Header: header name
Value: the value of the header.
If a POST request is used to send data to the server, set the header of "Content-type" to "application/x-www-form-urlencoded ". it notifies the server that the data is being sent and the data is URL encoded.
// Set the request message header to inform the server of the type of the body data sent.
Xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // fixed syntax
// Send data
Xhr. send ("username = admin & password = 123 ");

Data returned by the server: When receiving data from the server, the data must be sent in a format that the browser can understand. The programming language on the server can only return data in the following three formats:

HTML data
ResponseText: the server returns the response information as a string.

XML data
ResponseXML: the server formats the response information as an Xml Document Object and returns

JSON data

For details, see JSON.

Comparison summary

If the application does not need to share data with other applications, it is easiest to use HTML fragments to return data.
If data needs to be reused, JSON files are a good choice and have advantages in performance and file size.
XML documents are the first choice when remote applications are unknown, Because XML is a "World Language" in the web service field"

Bytes