AJAX（Asynchronous JavaScript and XML）學習筆記
1.AJAX不是一種新的編程語言，而是一種使用現有標準的新方法。
2.AJAX最大的優點是在不重新加載整個頁面的情況下，與服務器交換數據並更新部分網頁內容，用於創建快速動態網頁（傳統網頁如果需要更新內容，必須重新加載整個頁面）。
3.AJAX不需要任何瀏覽器插件，只需要允許JavaScript在瀏覽器上運行。
4.AJAX的應用實例：新浪微博，谷歌地圖，谷歌搜索建議
重點：
1.XMLHttpRequest是AJAX的基礎。
2.創建XMLHttpRequest對象的語法：
1 var xmlhttp; 2 //為了應對所有的現代瀏覽器，包括 IE5 和 IE6，檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：3 if (window.XMLHttpRequest) 4 { 5 //IE7+, Firefox, Chrome, Opera, Safari瀏覽器 6 xmlhttp=new XMLHttpRequest(); 7 } 8 else 9 { 10 // IE6, IE5 瀏覽器執行代碼 11 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 12 }
重點：
1.XMLHttpRequest對象用於和服務器交換數據
2.語法：
1 xmlhttp.open("GET","ajax_info.txt",true); 2 xmlhttp.send();
-
無法使用緩存文件（更新服務器上的文件或者數據庫）
-
向服務器發送大量數據（POST沒有數據量的限制）
-
發送包含未知字符的用戶輸入時，POST更穩定可靠
4.如果使用POST請求，需要使用setRequestHeader()來添加HTTP頭，然後在send()方法中規定想要發送的數據。
1 xmlhttp.open("POST","/try/ajax/demo_post2.php",true); 2 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");3 xmlhttp.send("fname=Henry&lname=Ford");
6.Async一般設置為true，這樣JavaScript可以在等待服務器響應時執行其他腳本，並且在響應就緒後對響應進行處理。此時要規定響應處於onreadystatechange事件中的就緒狀態時執行的的函數：
1 xmlhttp.onreadystatechange=function() 2 { 3 if (xmlhttp.readyState==4 && xmlhttp.status==200) 4 { 5 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 6 } 7 } 8 xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); 9 xmlhttp.send();
對於一些小型請求，可以設置為false，此時不用編寫onreadystatechange函數，把代碼放到send()函數後面就行：
1 xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); 2 xmlhttp.send(); 3 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
重點：
1.如果需要獲得響應，需要使用 XMLHttpRequest 對象的兩個屬性，responseText或者responseXML：
2.如果來自服務器的響應不是XML，就使用responseText：
1 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
3.如果是XML，需要對XML對象進行解析：
1 xmlDoc=xmlhttp.responseXML; 2 txt=""; 3 x=xmlDoc.getElementsByTagName("ARTIST"); 4 for (i=0;i<x.length;i++) 5 { 6 txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 7 } 8 document.getElementById("myDiv").innerHTML=txt;
重點：
1.XMLHttpRequest對象的三個屬性：
每當readyState改變時，會觸發onreadystatechange事件。
readyState會儲存XMLHttpRequest的狀態信息。
在上述條件中，onreadystatechange事件會被觸發5次。
2.使用回調函數：
回調函數是一種以參數形式傳遞給另一個函數的函數。
如果網站上有多個AJAX任務，應為XMLHttpRequest對象編寫回調函數，在每次使用AJAX時調用。
應包含URL以及每次發生onreadystatechange時執行的任務：
1 var xmlhttp; 2 function loadXMLDoc(url,cfunc) 3 { 4 if (window.XMLHttpRequest) 5 {// IE7+, Firefox, Chrome, Opera, Safari 代碼 6 xmlhttp=new XMLHttpRequest(); 7 } 8 else 9 {// IE6, IE5 代碼 10 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 11 } 12 xmlhttp.onreadystatechange=cfunc; 13 xmlhttp.open("GET",url,true); 14 xmlhttp.send(); 15 } 16 17 function myFunction() 18 { 19 //loadXMLDoc()函數儲存XML內容 20 loadXMLDoc("/try/ajax/ajax_info.txt",function() 21 { 22 if (xmlhttp.readyState==4 && xmlhttp.status==200) 23 { 24 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 25 } 26 }); 27 }
ASP/PHP實例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 function showHint(str) 7 { 8 var xmlhttp; 9 if (str.length==0) 10 { 11 document.getElementById("txtHint").innerHTML=""; 12 return; 13 } 14 if (window.XMLHttpRequest) 15 { 16 // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 17 xmlhttp=new XMLHttpRequest(); 18 } 19 else 20 { 21 // IE6, IE5 瀏覽器執行代碼 22 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 23 } 24 xmlhttp.onreadystatechange=function() 25 { 26 if (xmlhttp.readyState==4 && xmlhttp.status==200) 27 { 28 document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 29 } 30 } 31 xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true); 32 xmlhttp.send(); 33 } 34 </script> 35 </head> 36 <body> 37 38 <h3>在輸入框中嘗試輸入字母 a:</h3> 39 <form action=""> 40 輸入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" /> 41 </form> 42 <p>提示信息: <span id="txtHint"></span></p> 43 44 </body> 45 </html>
2.如果表單中有內容，onkeyup時間會觸發showHint函數，創建XMLHttpRequest對象，當服務器響應就緒時執行函數，最後把請求發送到服務器上的文件。
AJAX（Asynchronous JavaScript and XML）學習筆記