標籤：位置 擷取 get logs status charset title 代碼執行 ==
1.什麼是ajax
全稱：Asynchronous JavaScript and XML（用非同步形式的JavaScript去操作XML) 用來傳輸進行資料互動==其實就是拿資料發資料。
2.應用
Ajax就是做到當頁面內容發生改變的時候能不重新整理頁面，就能把改變告知我們。比如，我們註冊的時候資訊填寫錯誤，是不是沒重新整理頁面就能直接看到資訊提示，比如我們玩QQ的時候，有什麼訊息都會提醒你，絲毫沒有重新整理頁面，絲毫沒有影響你幹別的事情，這就是Ajax做的事情。
3.具體步驟
（1）建立ajax對象
var xhr = new XMLHttpRequest();
（2）佈建要求資訊
xhr.open(method,url,async);
method：請求的類型；GET 或 POST
url：檔案在伺服器上的位置
async：true（非同步）或 false（同步）
（3）提交請求
xhr.send();
（4）等待伺服器返回內容
xhr.onreadystatechange = function() { //彈出內容}
4.具體例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TestAjax</title> 6 <script type="text/javascript"> 7 function loadXMLDoc() 8 { 9 var xhr;10 if (window.XMLHttpRequest)11 {// code for IE7+, Firefox, Chrome, Opera, Safari12 xhr=new XMLHttpRequest();13 }14 else15 {// code for IE6, IE516 xhr=new ActiveXObject("Microsoft.XMLHTTP");17 }18 xhr.open("GET","hello.txt",true);19 xhr.send();20 xhr.onreadystatechange=function()21 {22 if (xhr.readyState==4 && xhr.status==200)23 {24 document.getElementById("myDiv").innerHTML=xhr.responseText;25 }26 }27 }28 </script>29 </head>30 <body>31 <h2>AJAX</h2>32 <button type="button" onclick="loadXMLDoc()">請求資料</button>33 <div id="myDiv"></div>34 </body>35 </html>
點擊按鈕"請求資料" 會在id="myDiv"的div下顯示出hello.txt的內容(不會重新整理整個頁面)
說明：
1.html和txt檔案在同一個目錄下
2.
建立的ajax對象實際是存在相容問題的，IE6以下沒有這個對象的，所以是擷取不到資料的，IE6以下用的實際是一個外掛程式的方式：
ActiveXObject(‘Microsoft.XMLHTTP‘) //ActiveXObject: IE6下外掛程式的總稱，包含很多外掛程式
//Microsoft.XMLHTTP：具體某個外掛程式的名字
所以我們需要對上面做一個相容性的處理：
var xhr = null;if(window.XMLHttpRequest){ //加window是因為如果直接判斷IE下不存在的東西會報錯，加了window，就是在判斷一個屬性是否存在，這樣就不會報錯了（當然我們都知道所有的東西都在window對象下，所以這樣判斷是有效）xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);}
3.在上面的代碼中xhr.send()提交請求是需要時間的，所以必須要等到一定時間提交成功後，我們後面的才能正確擷取到內容，所以這就是後面的代碼正確執行，依賴於前面，但是如果用同步的話，
我們後面那些不依賴這些前面代碼的代碼也沒辦法執行，體驗就不好了，所以我們選擇用非同步，而對於這些依賴前面代碼執行的代碼，我們就進行判斷
if (xhr.readyState==4 && xhr.status==200)
就是判斷如果資料響應到了，收到了，再彈出內容。（如果我們不判斷，按照非同步原理，就會立馬彈出來，擷取資料需要時間，因為實際還沒擷取到資料，所以會彈出空，怕誤解，所以這裡我 再強調下）.
Ajax基礎入門
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
