Also talk about Ajax technology (Asynchronous JavaScript and XML)

The popular Ajax is not a new technology. It is just a combination of old technologies. You can see from its full name that Ajax is Asynchronous JavaScript and XML (and DHTML) that is, Asynchronous JavaScript and XML.

To understand how Ajax works, you must master the following technologies:

(1) HTML is used to create a Web form and determine the fields used in other parts of the application.
(2) JavaScript code is the core code used to run Ajax applications and helps improve communication with server applications.
(3) DHTML or Dynamic HTML, used to dynamically update forms. We will use div, span, and other dynamic HTML elements to mark HTML.
(4) Document Object Model DOM is used to process HTML structures (using JavaScript code) and (in some cases) the XML returned by the server.

1. The most important JavaScript Object to be used in Ajax is the XMLHttpRequest object, which is the most basic object and the most important object for coding using Ajax technology, different browsers use different methods to create this object. Therefore, when developing a webpage, you must create an XMLHttpRequest object that can run on a general-purpose browser. The following Code creates this object:

<Script language = "javascript" type = "text/javascript">
Var request = false;
Try {
Request = new XMLHttpRequest ();
} Catch (trymicrosoft ){
Try {
Request = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (othermicrosoft ){
Try {
Request = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (failed ){
Request = false;
}
}
}
If (! Request)
Alert ("Error initializing XMLHttpRequest! ");
</Script>

2. After creating an object, you need to open the request. Generally, the get method is used.

Var phone = document. getElementById ("phone"). value;
Var url = "/cgi-local/lookupCustomer. php? Phone = "+ escape (phone );
Request. open ("GET", url, true );

3. Specify the callback method.

Request. onreadystatechange = updatePage;

4. Send a request

Request. send (null );

5. Callback method to process server response

Function updatePage (){
If (request. readyState = 4 ){
If (request. status = 200 ){
Var response = request. responseText. split ("| ");
Document. getElementById ("order"). value = response [0];
Document. getElementById ("address"). innerHTML = response [1]. replace (/\ n/g ,"");
} Else
Alert ("status is" + request. status );
}
}

Finally, summarize the JavaScript code written above.

<Script language = "javascript" type = "text/javascript">
Var request = false;
Try {
Request = new XMLHttpRequest ();
} Catch (trymicrosoft ){
Try {
Request = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (othermicrosoft ){
Try {
Request = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (failed ){
Request = false;
}
}
}
If (! Request)
Alert ("Error initializing XMLHttpRequest! ");

Function getCustomerInfo (){
Var phone = document. getElementById ("phone"). value;
Var url = "/cgi-local/lookupCustomer. php? Phone = "+ escape (phone );
Request. open ("GET", url, true );
Request. onreadystatechange = updatePage;
Request. send (null );
}

Function updatePage (){
If (request. readyState = 4 ){
If (request. status = 200 ){
Var response = request. responseText. split ("| ");
Document. getElementById ("order"). value = response [0];
Document. getElementById ("address"). innerHTML = response [1]. replace (/\ n/g ,"");
} Else
Alert ("status is" + request. status );
}
}
</Script>

According to the preceding five steps, local refreshing of ajax asynchronous transmission can be implemented, which is very simple.