Complete Ajax instance

Preface:

After using ASP. NET Ajax for a long time, I also read the Ajax application in jquery for a period of time. But in the end, I can't remember how to use XMLHttpRequest.

I did not know much about what I wrote before. I will repeat it all over again this time, so that I can find a complete place to review it later.

What Is Ajax?

The full name of AJAX is Asynchronous JavaScript and XML. Ajax is composed of HTML, JavaScript, DHTML and Dom.

HTML is used to create a web form

JavascriptCodeUsed to run Ajax applicationsProgramCore code used to communicate with the server reference program

DHTML is used to dynamically update forms.

Dom is used to process HTML structures and XML returned by the server

Currently, data that can be processed in JS includes strings, JSON, and XML data.

Advantages

The XMLHTTPRequest object is used to communicate with the server. During asynchronous data transmission with the server, less data is transmitted. This provides a better user experience.

Instance

The HTML code of the get.htm page is as follows:

 <  Body  > < Label  For  = "Txt_username"> Name: </  Label  > <  Input  Type  = "Text"  ID  = "Txt_username"/> <  BR  /> <  Label  For  = "Txt_age"> Age:</  Label  > <  Input  Type  = "Text"  ID  = "Txt_age"/> <  BR  /> <  Input  Type  = "Button"  Value  = "Get"  ID  = "BTN"  Onclick = "Btn_click ();"/> <  Div  ID  = "Result"> </  Div  > </  Body  > 

The JS Code is as follows:

 <  Script  Type  = "Text/JavaScript"> Function Btn_click (){ // Create an XMLHTTPRequest object  VaR XMLHTTP = New XMLHttpRequest (); // Obtain the value  VaR Username = Document. getelementbyid ( "Txt_username" ). Value; VaR Age = Document. getelementbyid ( "Txt_age" ). Value; // Configure the XMLHTTPRequest object XMLHTTP. Open ( "Get" , "Get. aspx? Username =" + Username + "& Age =" + Age ); // Set the callback function XMLHTTP. onreadystatechange =Function (){ If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200) {document. getelementbyid ( "Result" ). Innerhtml = XMLHTTP. responsetext ;}} // Send the request XMLHTTP. Send ( Null );} </  Script  > 

Create the get. ASPX page. The get. aspx. CS code is as follows:

Protected voidPage_load (ObjectSender,EventargsE) {response. Clear ();StringUsername = request. querystring ["Username"];StringAge = request. querystring ["Age"]; Response. Write ("Name :'"+ Username +"'<Br/> Age :"+ Age +"<Br/> time :'"+Datetime. Now. tostring () +"'"); Response. End ();}

Result:

Enter the name and age, and click get to obtain data from the server.

Summary:

Today, I am writing a complete example to show the Ajax call process. There are many problems in this example:

1. How to create an XMLHTTPRequest object that can be run in most browsers.
2. Cache problems when using GET requests
3. Chinese garbled characters

We will solve these problems one by one in subsequent examples.

For other questions, for example:

1. How to Use post to transmit data
2. What is the difference between post and get?
3. How to transmit and use JSON data
4. How to transmit and use XML data (after all, the last letter X of Ajax indicates XML)

For these questionsArticleAnd solve them one by one.