標籤：
Ajax 應用程式所用到的基本技術：
div、span 和其他動態超文字標記語言 元素來標記 HTML。Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理，我們必須對XMLHttpRequest有所瞭解。
XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。
所以我們先從XMLHttpRequest講起，來看看它的工作原理。
首先，我們先來看看XMLHttpRequest這個對象的屬性。
它的屬性有：
onreadystatechange 每次狀態改變所觸發事件的事件處理常式。
responseText 從伺服器處理序返回資料的字串形式。
responseXML 從伺服器處理序返回的DOM相容的文檔資料對象。
status 從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
status Text 伴隨狀態代碼的字串資訊
readyState 對象狀態值
0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
1 (初始化) 對象已建立，尚未調用send方法
2 (發送資料) send方法已調用，但是當前的狀態及http頭未知
3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText擷取部分資料會出現錯誤，
4 (完成) 資料接收完畢,此時可以通過通過responseXml和responseText擷取完整的回應資料
現在我們介紹了 Ajax，對 XMLHttpRequest 對象以及如何建立它也有了基本的瞭解。如果閱讀得很仔細，您可能已經知道與伺服器上的 Web 應用程式打交道的是 JavaScript 技術，而不是直接提交給那個應用程式的 HTML 表單。
還缺少什麼呢？到底如何使用 XMLHttpRequest。因為這段代碼非常重要，您編寫的每個 Ajax 應用程式都要以某種形式使用它，先看看 Ajax 的基本請求/響應模型是什麼樣吧。
您已經有了一個嶄新的 XMLHttpRequest 對象，現在讓它幹點活兒吧。首先需要一個 Web 頁面能夠調用的 JavaScript 方法（比如當使用者輸入文本或者從菜單中選擇一項時）。接下來就是在所有 Ajax 應用程式中基本都雷同的流程：
function ajax(url, fnSucc, fnFaild){ //1.建立Ajax對象 var oAjax=null; if(window.XMLHttpRequest) { oAjax=new XMLHttpRequest(); } else { oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.串連伺服器 oAjax.open(‘GET‘, url, true); //3.發送請求 oAjax.send(); //4.接收伺服器的返回 oAjax.onreadystatechange=function () { if(oAjax.readyState==4) //完成 對象狀態值，0—未初始化 1—正在載入 2—載入完畢 3—互動 4—完成 { //status 從伺服器返回的數字代碼，比如常見的404（未找到）和200 請求成功（其後是對GET和POST請求的應答文檔） if(oAjax.status==200)//成功 { fnSucc(oAjax.responseText);//從伺服器處理序返回資料的字串形式。 } else { if(fnFaild) fnFaild(oAjax.status); } } };}
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title> <script src="ajax.js"></script><script>window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ //ajax(‘abc.txt‘,function(data){ ajax(‘abc.txt?t=‘+new Date().getTime(),function(data){//?t=‘+new Date().getTime() 阻止緩衝 alert(data) }) }}</script></head><body><button id="btn">讀取檔案</button></body></html>
JavaScript 學習筆記— —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
