Complete Ajax Instance

Source: Internet
Author: User

Written in the previous words:

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

The

Get.htm page HTML code 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_clic K (); "/> <div id=" result "> </div></body> 
The

JS code is as follows:

 <script type= "Text/javascript" > Function Btn_click () {//Create Xmlhttpreque        St Object var xmlHttp = new XMLHttpRequest ();        Gets the value var username = document.getElementById ("Txt_username"). Value;        var age = document.getElementById ("Txt_age"). Value;        Configure XMLHttpRequest Object Xmlhttp.open ("Get", "get.aspx?username=" + username + "&age=" + age); Set callback function Xmlhttp.onreadystatechange = function () {if (xmlhttp.readystate = = 4 && xmlhttp.statu            s = =) {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 (object sender, EventArgs e) {    response.clear ();    String username = request.querystring["username"];    String age = request.querystring["age"];    Response.Write ("Name: '" + username + "' <br/> Age:" + ages + "<br/> time: '" + DateTime.Now.ToString () + "'");    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:

  1. How to create a XMLHttpRequest object that can run in most browsers.
  2. There is a cache problem with get requests
  3. Chinese garbled problem

In response to the problems that have arisen, we will address them in the following example.

For other questions, say:

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

Complete Ajax Instance

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.