Self-writing Ajax experience

Source: Internet
Author: User
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 ).

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.