Write the first Ajax Program

I have always thought that the Ajax technology is amazing, at least its name is quite dazzling, so I spent some time learning it. Below are some of my records for beginners only.

What Is Ajax? If you have not accessed this website, visit http://www.ibm.com/?works/cn/xml/wa-ajaxintro1.html.

How do I write Ajax programs in vs 2008? Take an exchange rate conversion as an example. Open vs 2008, create a website, and add An ASPX or HTML page to start the operation (My html ).

First, add a JS Code in HTML and write a function:

View code

Function btnhuilv_click ()

{

VaR amout = Document. getelementbyid ("amount"). value;

VaR moneytype = Document. getelementbyid ("moneytype"). value;

VaR url = "huilv. ashx? Amount = "+ amount +" & moneytype = "+ moneytype;

Sendajax (URL );

}

Function sendajaxmsg (URL)

{

VaR XMLHTTP = new activexobject ("Microsoft. XMLHTTP"); // create an XMLHTTP object. This method is only applicable to IE kernel browsers.

If (! XMLHTTP)

{

Alert ("An error occurred while creating the XMLHTTP object ");

Return false;

}

// Prepare to send a POST request to example. ashx of the server. If the parameter remains unchanged, the browser will read the data from the cache, thus affecting the Ajax effect. Therefore, the current time is used as the parameter.
XMLHTTP. Open ("Post", URL, false );

XMLHTTP. onreadystatechange = function (){

If (XMLHTTP. readystate = 4) // The Server Returns
{

If (XMLHTTP. Status = 200) // 200 is successful. The 404 webpage does not exist. The 204 server successfully processes the request but does not return any content.
{

VaR returnvalue = XMLHTTP. responsetext; // responsetext is the text returned by the server.

// Display the information returned by the server to the webpage

........

}

Else

{

Alert ("error returned by Ajax server! ");

}

}

}

XMLHTTP. Send ();

}

The content in HTML. Body includes:

View code

<Div> implement Ajax </div>

<Input id = "amount" type = "text"/>

<Select id = "moneytype">

<Option value = "1"> USD </option>

<Option value = "2"> yen </option>

<Option value = "3"> Hong Kong dollar </option>

</SELECT>

<Input id = "button1" type = "button" value = "tryajax" onclick = "btnhuilv_click ()"/>

<Input id = "money" type = "text"/>

Key code in huilv. ashx:

View code

String amount = context. request ["amount"];
String type = context. request ["moneytype"];
Int iaccount = convert. toint32 (amount );
If (type = "1") // USD
{
Context. response. Write (iaccount/7 );
}
Else if (type = "2") // Japanese yen
{
Context. response. Write (iaccount * 10 );
}
Else // Hong Kong dollar
{
Context. response. Write (iaccount * 1.5 );
}

Now the Ajax effect is basically implemented. You will see that your browsing is not refreshed, but the information is interacted with the server.

The above Ajax effect is only tested in IE, and other browsers are not compatible with the activexobject method. To be compatible with mainstream browsers, you only need to add some judgment in Js.

You can.

For example:

VaR XMLHttpRequest;
// Determine whether to implement XMLHttpRequest as a local JavaScript Object
If (window. XMLHttpRequest ){
XMLHttpRequest = new XMLHttpRequest ();
} Else if (window. activexobject) {// determines whether ActiveX controls are supported
Try {
// Create an XMLHTTPRequest object by instantiating a new instance of activexobject
XMLHttpRequest = new activexobject ("Microsoft. XMLHTTP"); // msxml3 or a later version
} Catch (e ){
Try {
// Create an XMLHTTPRequest object by instantiating a new instance of activexobject
XMLHttpRequest = new activexobject ("msxml2.xmlhttp"); // versions earlier than msxml3
} Catch (e ){}
}
}
If (! XMLHttpRequest ){
Alert ("failed to Create Ajax object, you will not be able to browse the webpage ");
}
Return XMLHttpRequest; (this code is taken from the http://commandos.blog.51cto.com/154976/115723)

At this point, I believe you have the ability to complete Ajax independently.