Ajax example: getting started with xhr

The use of xhr objects is the core of Ajax. For ease of learning, there is no server-side development in the code writing process. The combination of Web Front-end development and server-side development lies in "response data" (such as XML ). I have written the XML part directly on the server, but the focus is not on how the server program can call up the corresponding data content from the database.

A simple example: click "View" and the user name (username) is displayed on the webpage.

HTML code:

1 <label> User Name </label>
2 <span> username value </span>
3 <a href = "#" onclick = "ajaxread ('3. xml',''); Return false; "> View </a>

XML code:

1 <? XML version = "1.0" encoding = "gb2312"?>
2 <root>
3 <username>
4 George Wing
5 </username>
6 </root>

 

JavaScript code:

1 function ajaxread (file, postdata ){
2 var Req = createxmlhttpobject ();
3 if (! REQ) return;
4 Req. onreadystatechange = function (){
5 If (req. readystate! = 4) return;
6 if (req. status! = 200 & Req. status! = 304 ){
7 alert ('HTTP error' + Req. status );
8 return;
9}
10
11 updateobj ('span ', req. responsexml. getelementsbytagname ('username') [0]. firstchild. nodevalue );
12}
13 Req. Open ('get', file, true );
14 Req. setRequestHeader ('user-agent', 'xmlhttp/1.0 ');
15 if (req. readystate = 4) return;
16 Req. Send (postdata );
17}
18 function updateobj (OBJ, data ){
19 document. getelementsbytagname (OBJ) [0]. firstchild. nodevalue = data;
20}
21
22var xmlhttpfactories = [
23 function () {return New XMLHttpRequest ()},
24 function () {return New activexobject ("msxml2.xmlhttp ")},
25 function () {return New activexobject ("msxml3.xmlhttp ")},
26 function () {return New activexobject ("Microsoft. XMLHTTP ")},
27];
28
29 function createxmlhttpobject (){
30 var XMLHTTP = false;
31 For (I = 0; I <xmlhttpfactories. length; I ++ ){
32 try {
33 XMLHTTP = xmlhttpfactories [I] ();
34}
35 catch (e ){
36 continue;
37}
38 break;
39}
40 return XMLHTTP;
41}

The key to learning Ajax is the use of xhr objects. In addition, HTTP knowledge is required.

(End)

Ajax blog articles:

Ajax instance: XML Processing on ASP. NET Server

Ajax: use Asynchronous callback to refactor ASP. NET development instances

Ajax example: Text in ASP. NET and JSON Response Processing