Basic Ajax Overview

Add a <SCRIPT> </SCRIPT> and a button on the page to add a text box. The content is as follows:

 

<SCRIPT type = "text/JavaScript" Language = "JavaScript">
VaR XMLHTTP = false;
Try
{
XMLHTTP = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
Try
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (E2)
{
XMLHTTP = false;
}
}
If (! XMLHTTP & typeof XMLHttpRequest! = 'Undefined '){
XMLHTTP = new XMLHttpRequest ();
}
/* The methods used to create the XMLHTTPRequest object in different browsers are different,
Therefore, you must use the "try" method to find a method suitable for the browser */

Function callserver (){
VaR name = Document. getelementbyid ("txtsend"). value;
VaR url ="Default. aspx? MSG = "+ escape (name );
XMLHTTP. Open ("get", URL, true); // true indicates asynchronous data transmission.
XMLHTTP. onreadystatechange = showmessage;
XMLHTTP. Send (null );
}

Function showmessage (){
If (XMLHTTP. readystate = 4 ){
VaR response = XMLHTTP. responsetext;
Document. getelementbyid ("txtshow"). value = response;
}
}
</SCRIPT>

 

...

<P>
<Input id = "btnsubmit" type = "button" value = "ajax button" onclick = "callserver ()"/>
<Input id = "txtsend" type = "text"/>
<Input id = "txtshow" type = "text"/>
</P>

 

Default. aspx. CS

...

Response. Write ("the data sent by Ajax is:" + request ["MSG"]);
Response. End ();

...

 

Program explanation:

(1) XMLHTTP. Open ("get", URL, true) is the method of the XMLHTTPRequest object. It has three parameters:

The first parameter indicates how to access the resources specified by the URL. There are two main types: "Get" and "Post ";

The second parameter indicates the accessed URL address;

The third parameter indicates the call method. True indicates asynchronous call, and false indicates synchronous call;

Asynchronous calling is the key to Ajax. It takes some time for the open method to access URL resources, but the system does not wait until the open method is executed. That is to say, when the Open Method accesses URL resources, the browser is not always in the "Waiting" status, and users can still execute other javascript programs on the browser.

(2) because it is an asynchronous call, the user does not know when the open method can obtain the URL resource content. Therefore, the asynchronous method usually uses a trigger event to notify the user program.

Onreadystatechange is a trigger that notifies the user that the open method has obtained the URL resource content. In this program code, the event function triggered by the program is showmessage ();

 

(3) In the showmessage function, XMLHTTP. readystate = 4 indicates the current status of the XMLHTTPRequest object. Only when the status is 4 can the content returned by the server response (response) be obtained.

 

(4) responsetext is an attribute of the XMLHTTPRequest object. It records the text content returned by this Web request. The responsetext attribute is used here.

The responsexml attribute is commonly used in Ajax. The URL resource must return an XML Document Stream structure. There are multiple default processing methods for XML documents in the webpage Dom, javascript also contains objects for XML processing, which can be used for later processing of programs.