Home > Developer > Web Develop
Transfer from http://www.cnblogs.com/oneword/archive/2011/06/04/2072558.html
Using the long-time ASP. NET AJAX, but also looked at a period of jquery Ajax application, but in the end, actually can't think of XMLHttpRequest how to use.
Remember the past is not very clear, this time to complete the study again, but also for their own later can find a complete place to review.
What is Ajax
The full name of Ajax is asynchronous Javascript and XML. Ajax is made up of html,javascript,dhtml and Dom.
HTML for creating Web Forms
JavaScript code is used to run the core code of an AJAX application to communicate with the server reference program
DHTML for dynamic updating of forms
Dom is used to process the HTML structure and the XML returned by the server
Today, the data that can be processed in JS includes the string, json,xml data.
Advantages
Communicates with the server through the XMLHttpRequest object, with less data transferred when the server is being asynchronously transmitted, and a better user experience.
Instance
Get.htm page HTML code is as follows:
<Body> <LabelFor= "Txt_username" > Name:</Label> <InputType= "Text"Id= "Txt_username"/> <Br/> <LabelFor= "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:
<ScriptType= "Text/javascript" > Function Btn_click () {Create a XMLHttpRequest Objectvar xmlHttp =New XMLHttpRequest ();Get valuevar username = document.getElementById (var age = document.getElementById ( "Txt_age"). Value; //Configuration XMLHttpRequest Object Xmlhttp.open ( "Get.aspx? Username= "+ username + " &age= "+ age); //set callback function Xmlhttp.onreadystatechange = function () {if (xmlhttp.readystate = = 4 && Xmlhttp.status = =) {document.getElementById ( " Result "). InnerHTML = Xmlhttp.responsetext; }} //send Request Xmlhttp.send (null);} </script>
Create a new get.aspx page with the Get.aspx.cs code as follows:
protected void Page_Load (EventArgs e) { response.clear (); string username = request.querystring["username"]; string age = request.querystring["Age"]; Response.Write ("'"); Response.End ();}
Results:
Enter your name and age, click the Get button, and you'll get the data from the server.
Summary:
Today, for the time being, write a complete example that shows the process of calling Ajax, and there are many problems in this example:
- How to create a XMLHttpRequest object that can run in most browsers.
- There is a cache problem with get requests
- Chinese garbled problem
In response to the problems that have arisen, we will address them in the following example.
For other questions, say:
- How to use post to pass data
- What is the difference between post and get?
- How to use the transfer and use of JSON data
- How to transfer and use XML data (after all, the last letter X of Ajax refers to XML)
Complete Ajax Instance
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
