AJAX学习

1. AJAX的定义

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

2. AJAX工作原理

3. AJAX的四个步骤：

（1）创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

（2）向服务器发送请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）；

向服务器发送大量数据（POST 没有数据量限制；

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠；

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本；

当响应就绪后对响应进行处理；

（3）服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

实例

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

实例

请求 cd_catalog.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) {     txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;

（4）AJAX onreadystatechange事件

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

实例

xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;     }   }

（4）实例

用AJAX从数据库返回数据

 1 function showCustomer(str)
 2 {
 3   var xmlhttp;    
 4   if (str=="")
 5   {
 6     document.getElementById("txtHint").innerHTML="";
 7     return;
 8   }
 9   if (window.XMLHttpRequest)
10   {
11     // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
12     xmlhttp=new XMLHttpRequest();
13   }
14   else
15   {
16     // IE6, IE5 浏览器执行代码
17     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
18   }
19   xmlhttp.onreadystatechange=function()
20   {
21     if (xmlhttp.readyState==4 && xmlhttp.status==200)
22     {
23       document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
24     }
25   }
26   xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
27   xmlhttp.send();
28 }
29 </script>
30 </head>
31 <body>
32 
33 <form action=""> 
34 <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
35 <option value="APPLE">Apple Computer, Inc.</option>
36 <option value="BAIDU ">BAIDU, Inc</option>
37 <option value="Canon">Canon USA, Inc.</option>
38 <option value="Google">Google, Inc.</option>
39 <option value="Nokia">Nokia Corporation</option>
40 <option value="SONY">Sony Corporation of America</option>
41 </select>
42 </form>
43 <br>
44 <div id="txtHint">客户信息将显示在这...</div>
45 
46 </body>
47 </html>

View Code

用AJAX从XML 文件返回数据

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 table,th,td {
 7   border : 1px solid black;
 8   border-collapse: collapse;
 9 }
10 th,td {
11   padding: 5px;
12 }
13 </style>
14 </head>
15 <body>
16 
17 <h1>XMLHttpRequest 对象</h1>
18 
19 <button type="button" onclick="loadDoc()">获取我收藏的 CD</button>
20 <br><br>
21 <table id="demo"></table>
22 
23 <script>
24 function loadDoc() {
25   var xhttp = new XMLHttpRequest();
26   xhttp.onreadystatechange = function() {
27     if (this.readyState == 4 && this.status == 200) {
28       myFunction(this);
29     }
30   };
31   xhttp.open("GET", "cd_catalog.xml", true);
32   xhttp.send();
33 }
34 function myFunction(xml) {
35   var i;
36   var xmlDoc = xml.responseXML;
37   var table="<tr><th>Artist</th><th>Title</th></tr>";
38   var x = xmlDoc.getElementsByTagName("CD");
39   for (i = 0; i <x.length; i++) {
40     table += "<tr><td>" +
41     x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
42     "</td><td>" +
43     x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
44     "</td></tr>";
45   }
46   document.getElementById("demo").innerHTML = table;
47 }
48 </script>
49 
50 </body>
51 </html>

View Code

用callback函数的AJAX实例

 1 if (window.XMLHttpRequest)
 2   {// IE7+, Firefox, Chrome, Opera, Safari 代码
 3   xmlhttp=new XMLHttpRequest();
 4   }
 5 else
 6   {// IE6, IE5 代码
 7   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 8   }
 9 xmlhttp.onreadystatechange=cfunc;
10 xmlhttp.open("GET",url,true);
11 xmlhttp.send();
12 }
13 function myFunction()
14 {
15     loadXMLDoc("/try/ajax/ajax_info.txt",function()
16     {
17         if (xmlhttp.readyState==4 && xmlhttp.status==200)
18         {
19             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
20         }
21     });
22 }
23 </script>
24 </head>
25 <body>
26 
27 <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
28 <button type="button" onclick="myFunction()">修改内容</button>
29 
30 </body>
31 </html>

View Code