標籤:load pen 無法 發送 width nod asc 限制 處理
基本概念:
1.AJAX不是一種新的程式設計語言,而是一種使用現有標準的新方法。
2.AJAX最大的優點是在不重新載入整個頁面的情況下,與伺服器交換資料並更新部分網頁內容,用於建立快速動態網頁(傳統網頁如果需要更新內容,必須重新載入整個頁面)。
3.AJAX不需要任何瀏覽器外掛程式,只需要允許JavaScript在瀏覽器上運行。
4.AJAX的應用執行個體:新浪微博,Google地圖,Google搜尋建議
建立XMLHttpRequest對象:
重點:
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();
3.與POST相比,GET更快更簡單,大部分情況適用,只有三種情況要使用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");
5.open()方法中的URL是伺服器上檔案的地址,該檔案可以是任何類型,比如.txt和.xml,或者伺服器指令碼檔案,.asp/.php,只要在傳迴響應之前能夠在伺服器上執行任務。
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;
onreadystatechange事件:
重點:
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 else20 {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>
1.如果表單中沒有輸入str.length == 0,則清空txtHint預留位置的內容,並退出。
2.如果表單中有內容,onkeyup時間會觸發showHint函數,建立XMLHttpRequest對象,當伺服器響應就緒時執行函數,最後把請求發送到伺服器上的檔案。
AJAX(Asynchronous JavaScript and XML)學習筆記