AJAX學習

時間 2019-11-18

標籤 ajax 學習欄目 Ajax 简体版

原文原文鏈接

1. AJAX的定義php

AJAX = 異步 JavaScript 和 XML。html

AJAX 是一種用於建立快速動態網頁的技術。node

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。web

傳統的網頁（不使用 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>