AJAX effect without AJAX framework

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     　　　　    }
 7 
 8     　　         public bool IsReusable
 9      　　       {
10       　　          get
11       　　         {
12       　　              return false;
13        　   　     }
14 
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">
2
3 function btnclick (){
4
5 // create an xmlhttp object, which is equivalent to WebClient
6 var xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
7
8 if (! XmlHttp ){
9 alert ("exception during XMLHTTP initialization! ");
10 return false;
11}
12
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 (){
17
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;
29}
30 else {
31 alert ("AJAX server return error ");
32}
33}
34}
35 // send a request to the server
36 xmlHttp. send ();
37}
38 </script>