Currently, Ajax is widely used. The simplest ones are Microsoft's Asp.net Ajax and jquerry. Using these third parties cannot understand the principles of Ajax.
To learn how to implement Ajax, you must write it by yourself. The following is my summary:
1. Foreground page Code List.html:
Code
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en" >
< Html >
< Head >
< Title > New Document </ Title >
< Meta Name = "Generator" Content = "Editplus" >
< Meta Name = "Author" Content = "" >
< Meta Name = "Keywords" Content = "" >
< Meta Name = "Description" Content = "" >
</ Head >
< Body >
< Script Language = "JavaScript" Type = "Text/JavaScript" >
Createxmlhttp = Function ()
{
VaR XMLHTTP;
Try {
XMLHTTP = New Activexobject ( ' Msxml2.xmlhttp ' );
} Catch (E ){
Try {
XMLHTTP = New Activexobject ( ' Microsoft. XMLHTTP ' );
} Catch (E ){
Try {
XMLHTTP = New XMLHttpRequest ();
} Catch (E ){}
}
}
//Alert (XMLHTTP );
ReturnXMLHTTP;
}
Getxmldata = Function (Uri, JSON)
{
VaR XMLHTTP = Createxmlhttp ();
VaR Base = This ;
// Define the event processing of the XMLHTTPRequest objectProgram
XMLHTTP. onreadystatechange = Function ()
{
If (XMLHTTP. readystate = 4 )
{
Base. XMLHTTP = XMLHTTP;
If (XMLHTTP. Status = 200 )
{
Base. onsuccess ();
}
Else
{
Base. onfailure ();
}
}
}
// Create a connection
XMLHTTP. Open ( " Post " , Uri, True );
XMLHTTP. setRequestHeader ( ' Content-Type ' , ' Application/X-WWW-form-urlencoded ' );
// Send request
XMLHTTP. Send (JSON );
This . Onsuccess = Function (){};
This . Onfailure = Function (){};
}
Getuservalue = Function ()
{
VaR Objgetdata = New Getxmldata ( " Ajax. aspx " , Null );
Objgetdata. onsuccess = Function ()
{
$ ( " User1 " ). Innerhtml = This . XMLHTTP. responsetext;
$ ( " Message2 " ). Innerhtml = $ ( " Select1 " ). Options [$ ( " Select1 " ). Selectedindex]. Value
}
}
$ = Function (OBJ)
{
Return Document. getelementbyid (OBJ );
}
</ Script >
< A Href = "Javascript: getuservalue ();" > AA </ A >
< Input Type = "Hidden" ID = "Username" Value = "Antyi" /> < BR />
< Div ID = "User1" > Message </ Div >
< Div ID = "Message2" > Message2 </ Div >
< Select Multiple ID = "Select1" >
< Option Value = "Antyi" > Antyi </ Option >
< Option Value = "Gdou" > Gdou </ Option >
< Option Value = "Longtek" > Longtek </ Option >
</ Select >
</ Body >
</ Html >
Add the Ajax. ASPX page and modify the page_load method on the Ajax. aspx. CS page:
Protected void page_load (Object sender, eventargs E)
{
Response. Write ("Hello Ajax! ");
}
Browse and click the AA link to see the effect (this code has been tested in IE and operabrowser ).