Ajax基本寫法
阿新 • • 發佈：2018-11-13
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script> 7 var xhr=initAjax(); 8 function initAjax() 9 { 10 if(window.XMLHttpRequest) 11 { 12 return new XMLHttpRequest(); 13} 14 else if(window.ActiveXObject) 15 { 16 try 17 { 18 return new ActiveXObject("Msxml2.XMLHttp"); 19 } 20 catch(e) 21 { 22 try 23 { 24 return new ActiveXObject("Microsoft.XMLHttp"); 25} 26 catch(e) 27 { 28 //return undefined 29 alert("Your browser doesn't support AJAX!"); 30 } 31 } 32 } 33 } 34 function showInfo() 35 { 36 //var xhr=new ActiveXObject("Msxml2.XMLHttp"); 37 if(xhr!=null) 38 { 39 xhr.onreadystatechange=xhrStateChange; 40 xhr.open("GET","info.xml",true); 41 xhr.send(null); 42 } 43 44 } 45 function xhrStateChange() 46 { 47 if(xhr.readyState==4) 48 { 49 document.getElementById("infoDiv").innerHTML=xhr.responseText; 50 } 51 else if(xhr.readyState==3) 52 { 53 document.getElementById("infoDiv").innerHTML="Loading..."; 54 } 55 56 } 57 </script> 58 </head> 59 <body> 60 <input type="button" value="click me" onclick="showInfo()"> 61 <div id="infoDiv"></div> 62 </body> 63 </html>
initAjax函式實現了對瀏覽器的相容(IE5,6), 不過現在ActiveX技術早已過時, 被瀏覽器預設禁用.
showInfo函式中將xhrStateChange函式繫結到onreadystatechange事件, 注意這種繫結方式不支援傳參!!!而且這句程式碼寫在函式外也是可以的.結果如下
第49行如果把innerHTML改為innerText, 則將不考慮xml檔案中的標籤, 內容原樣顯示, 如下
另外, xhr除了responseText屬性, 還有一個屬性:responseXml.
