AJAX effect without AJAX framework

Source: Internet
Author: User

AJAX (Asynchronous JavaScript and XML), that is, javascript and XML;

It is a technology that processes data asynchronously on pages. AJAX is used to send requests to the server, obtain the data returned by the server, and update the data to the interface, instead of refreshing the whole page, instead, the XMLHTTPRequest object is created using JAVASCRIPT on the HTML page to send requests to the server and obtain the returned data, just like WebClient (send a request to the server,WebClient wc = new Webclient (); string str = wc. DownLoadString ("GetServerTime. ashx"); $ ("# textbox1"). val (s );), XMLHTTPRequest is used to publish Http requests and obtain the server's returned data on the page;XMLHTTPRequest is the core of AJAX;

Example 1:


1. Create an ashx page (generally a handler) to print the latest time on the page in the form of a string to the page;

View Code

 1     public void ProcessRequest(HttpContext context)
2      {
3      context.Response.ContentType = "text/plain";
4      //context.Response.Write("Hello World");
5      context.Response.Write(DateTime.Now);
6      }
8    public bool IsReusable
9    {
10    get
11    {
12    return false;
13     }
15      }


2. Create an html page for testing.

A. Add a text box


 <input id="txtId" type="text" />


B. Add a button. When the button is pressed, send a request to the server and add the data returned by the server to the text box above;

<Input id = "btnId" type = "button" value = "OK" onclick = "btnclick ();"/>


C. Do not use any AJAX framework to complete ajax requests. Add the following code:

View Code

1 <script type = "text/javascript">
3 function btnclick (){
5 // create an xmlhttp object, which is equivalent to WebClient
6 var xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
8 if (! XmlHttp ){
9 alert ("exception during XMLHTTP initialization! ");
10 return false;
13 // prepare to send a post request to Handler1.ashx on the server page
14 xmlHttp. open ("post", "Handler1.ashx? F = "+ new Date, false); // to avoid data caching after the cache changes at the current time
15 // register the event and use an anonymous function to respond
16 xmlHttp. onreadystatechange = function (){
18 // readyState indicates the processing status of the XMLHttpRequest object:
19 // 0: the XMLHttpRequest object has not been initialized.
20 // 1: the XMLHttpRequest object starts sending requests.
21 // 2: The request of the XMLHttpRequest object is sent completely.
22 // 3: the XMLHttpRequest object starts to read the server response.
23 // 4: XMLHttpRequest object read Server Response ended
24 if (xmlHttp. readyState = 4 ){
25 // If the status code is 200, it indicates success; 300 indicates redirection, 400 indicates permission problems, and 500 indicates error;
26 if (xmlHttp. status = 200 ){
27 // The responseText attribute is the text returned by the server
28 document. getElementById ("txtId"). value = xmlHttp. responseText;
30 else {
31 alert ("AJAX server return error ");
35 // send a request to the server
36 xmlHttp. send ();
38 </script>




Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.