1、AJAX 簡介 AJAX(音譯為：阿賈克斯) = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML），是指一種創建互動式網頁應用的網頁開發技術，也就是在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。AJAX 不是新的編程語言，而是一
1、AJAX 簡介
AJAX(音譯為：阿賈克斯) = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML），是指一種創建互動式網頁應用的網頁開發技術，也就是在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。AJAX 不是新的編程語言，而是一種使用現有標準的新方法，是一種用於創建快速動態網頁的技術，通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新，傳統的網頁（不使用 AJAX）如果需要更新內容或者用戶註冊信息、提交表單等，必需重新載入整個網頁頁面。所以說 AJAX 是一種與伺服器交換數據並更新部分網頁的藝術，因此我們必須掌握 AJAX 這種技術。
AJAX 是基於現有的 Internet 標準，並且聯合使用它們：
①、XMLHttpRequest 對象 (非同步的與伺服器交換數據)
②、JavaScript/DOM (信息顯示/交互)
③、CSS (給數據定義樣式)
④、XML (作為轉換數據的格式)
AJAX 的核心是 JavaScript 對象 XMLHttpRequest，他是一種支持非同步請求的技術，也就是 XMLHttpRequest 賦予了我們可以使用 JS 向伺服器提出請求並處理響應的能力，而不阻塞用戶，通過這個對象，JS 可在不重載頁面的情況下與 Web 伺服器交換數據。AJAX 在瀏覽器與 Web 伺服器之間使用非同步數據傳輸（HTTP 請求），這樣就可使網頁從伺服器請求少量的信息，而不是整個頁面。AJAX 是一種獨立於 Web 伺服器軟體的瀏覽器技術，也就是 AJAX 應用程式獨立於瀏覽器和平臺！可用於創造動態性更強的應用程式
那麼，簡單說，AJAX 就是可以讓 JS 去讀取伺服器上的數據，他的功能是可以在無需刷新頁面的前提下，去伺服器讀取或者發送數據。可用來與 JSON 文件進行互動式通信，也可用來與資料庫進行動態通信，還可用於創造動態性更強的應用程式。最常見的應用就是用戶登錄，在登錄時，他就可以判斷用戶輸入是否正確，如果輸入正確，就直接顯示用戶信息，如果輸入錯誤，提示錯誤信息，並不需要刷新頁面。
2、配置伺服器
AJAX 應用是非同步更新，讀取伺服器上的數據，那到底伺服器是什麼東西呢？其實伺服器就相當於 PC ，我們在平時瀏覽網頁時，只需要在地址欄輸入相應的網址，就可以瀏覽對應的頁面，這些頁面不可能存儲在個人電腦中，那得需要多大的硬碟，並且還有其他影響因素，所以這些網頁就存儲在對應的伺服器上，比如百度的伺服器、新浪的伺服器，其實伺服器跟我們平時用的電腦沒有什麼多大的區別，個人電腦也可以作為伺服器，甚至是手機之類的東西也可以作為伺服器，比如我們用手機給電腦傳照片，可以不通過數據線，使用 WIFI 或者騰訊提供的功能，就可以很輕鬆的完成傳輸過程，這時候手機就充當了伺服器的角色，只不過性能比較差，僅對這一臺機器提供服務而已。那麼 Web 伺服器就是可以同時對很多人提供服務，性能更強大。
在學習 AJAX 時，就必須配置個人伺服器，也就是要在本機搭建伺服器程式，方便我們調試代碼。通常都會使用 WAMP 來搭建伺服器，本地伺服器搭建程式有很多種，大家可以選一種自己喜歡的來搭建，這裡就以 WAMP 為例，WAMP 即 Windows 下的 Apache + Mysql + PHP 集成安裝環境，也就是 Win 平臺上的伺服器程式，而通常都使用 WampServer 這一伺服器軟體。我這裡安裝的是 WampServer 2.5，大家可以百度搜索 wamp 找到2.5版本下載安裝，建議將程式裝在 D 盤，安裝完成之後，打開程式，在桌面右下角有一個 W 的圖標，通常都為綠色，可在圖標上點擊右鍵，選擇倒數第二個選項切換為中文，切換完成之後，接下來就是配置了，下麵是我在網上找到的配置方法，並且使用沒有問題，寫在這裡也省的去找了，現在 WampServer 已經更新到3.0版本了，根據安裝的版本不同在百度搜索配置方法，都是一堆堆的。
首先，用編輯器打開安裝目錄：D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 文件
在516行或者搜索關鍵詞找到：
#Include conf/extra/httpd-manual.conf
將前面的井號去掉。
然後，再打開：D:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf 文件
在代碼最後添加如下內容：
<VirtualHost *:80> DocumentRoot "D:/wamp/www" ServerName www.abc.com ServerAlias www.abc.com abc.com <Directory "D:/wamp/www"> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>
www.abc.com 為個人站點地址，可以自行定義。
最後，打開：C:\Windows\System32\drivers\etc\hosts 文件
添加：127.0.0.1 www.abc.com
重新啟動WAMP。
在需要做測試時，將頁面保存在 D:/wamp/www 路徑下，文件名保存為 index.html，然後在瀏覽器地址欄輸入 abc.com 就可以打開剛纔保存的頁面。
如果打開不成功，可百度搜索解決辦法，可能是80埠被占用了。
這裡需要註意一下，放在伺服器下的文件不能用中文命名。
3、AJAX 基礎
首先，我們先來看一個 AJAX 應用的實例：請求並顯示靜態 TXT 文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AJAX 實例</title> 6 <script> 7 function ajax(){ 8 var oAjax = new XMLHttpRequest(); 9 10 oAjax.onreadystatechange = function (){ 11 if(oAjax.readyState == 4 && oAjax.status == 200){ 12 alert(oAjax.responseText); 13 } 14 } 15 16 oAjax.open('GET', 'ajax/demo.txt', true); 17 oAjax.send(); 18 } 19 </script> 20 </head> 21 <body> 22 <button type="button" onclick="ajax()">讀取</button> 23 </body> 24 </html>
我們需要把頁面保存在 WAMP 安裝目錄下 www 根目錄中，並且新建一個文件夾命名為 ajax，用於存儲 TXT 文件，命名為 demo.txt，文件中可以隨意輸入點文字，用作演示。然後通過我們自定義的個人站點，在瀏覽器中打開頁面，當點擊讀取按鈕後，彈出 TXT 文件中的內容。
通過上面的實例，我們就可以看到，實際上 AJAX 的作用就是從伺服器上讀取一個文件，並且把這個文件內容返回給我們，讓我們處理。
這裡需要註意的是字元集編碼問題，在使用 AJAX 時，所有的文件都必須是統一的編碼格式，包括 HTML 、JS 文件和被讀的文件，比如都是 UTF-8 或者都是 GB2312，上面實例中用於演示的 TXT 文件，預設輸入英文，在保存時預設編碼為 ANSI，如果我們輸入的是漢字，在保存時不改為與頁面相同的編碼格式 UTF-8，那麼在點擊按鈕後，網頁上就顯示的亂碼，所以在保存時，一定要註意切換文件的編碼格式。
下麵我們來分析一下 AJAX 的工作原理。
4、XHR 創建對象
XHR 是 XMLHttpRequest 的簡寫，是 AJAX 的基礎，用於在後臺與伺服器交換數據。
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象，老版本的 IE 瀏覽器(IE6)則使用 ActiveXObject，為了相容各種瀏覽器，可以做一個判斷，如果支持 XMLHttpRequest 對象，則創建該對象，如果不支持，則創建 ActiveXObject 。
1 var oAjax; 2 // IE7+, Firefox, Chrome, Opera, Safari 3 if(window.XMLHttpRequest){ 4 oAjax = new XMLHttpRequest(); 5 } 6 // IE6 7 else{ 8 oAjax = new ActiveXObject("Microsoft.XMLHTTP"); 9 }
因為所有現代瀏覽器和 IE 高版本瀏覽器都支持 XMLHttpRequest 對象，所以在創建對象時，也就不用做相容性處理了，這裡只是瞭解一下。在 IE 瀏覽器中 ActiveX 是插件的意思，也就是說 IE6 中的 AJAX 是通過一個插件來完成的，雖說是插件，但是在 IE6 瀏覽器中已經預設安裝了。
在上面的代碼中，在做判斷時使用了 window.XMLHttpRequest ，我們都知道全局變數是 window 上的一個屬性，在 JS 中，如果使用沒有定義的變數，會報錯，比如：alert(a)。而如果使用沒有定義的屬性，則不會報錯，而是 undefined，比如：alert(window.a)。IE6 不支持 XMLHttpRequest，所以如果直接使用，就會報錯，而如果把他定義為 window 的屬性，那麼則是 undefined ，未定義在 if 判斷語句中代表假，也就是 fasle，而這正是我們需要的。
5、連接伺服器
將請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
oAjax.open('GET', 'ajax/demo.txt', true);
oAjax.send();
open(method, url, async) 規定請求的類型、URL 以及是否非同步處理請求。第一個參數 method，用於規定請求的類型，GET 或 POST 。第二個參數 URL，用於設置文件在伺服器上的地址，該文件可以是任何類型的文件，比如 .txt 、 .xml 和 .json，或者伺服器腳本文件，比如 .php (在傳迴響應之前，能夠在伺服器上執行任務)。第三個參數 async，用於定義是否非同步傳輸，true（非同步）或 false（同步）。
send(string) 用於將請求發送到伺服器，參數 string 僅用於 POST 請求。
下麵來看兩個問題。
(1)、GET 還是 POST？
GET 和 POST 常用於提交表單，我們也並不陌生，表單的提交預設是使用 GET 方式。
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
但是，在以下情況中，請使用 POST 請求：
①、無法使用緩存文件（更新伺服器上的文件或資料庫）。
②、向伺服器發送大量數據（POST 沒有數據量限制）。
③、發送包含未知字元的用戶輸入時，POST 比 GET 更穩定也更可靠。
最實用的判斷方法：GET 用於獲取數據，比如瀏覽貼子，POST 用於上傳數據，也就是向伺服器傳遞數據，比如用戶註冊。
GET 和 POST 的區別：
GET：在 URL 中傳輸數據，安全性弱，容量小，一般 URL 的長度最大為 4K 到 10K，長度是有限制的。
POST：不在 URL 中傳輸數據，相對安全性強，容量大，容量可達到2G，再大就可以使用控制項，真正的安全就只有 https 協議。
緩存：GET 有緩存，POST 沒有緩存。
所以，AJAX 一般都為 GET 方式。當然除了 GET 和 POST 方法之外還有很多種方法，最常用的還是這兩種。
在 AJAX 基礎的實例中，因為我們使用了 GET 請求，那麼還有一個問題就是緩存的問題，所謂緩存，就好比一個網站打開一次之後，再打開的話，速度就會快一些，這就得益於緩存，那麼緩存實際上就是一個網站，在第一次打開的時候，才是真正的從伺服器上請求，之後都是從本地讀取，從硬碟中讀取數據肯定要快一些，至少比網路要快很多。那按照這樣說，緩存豈不是個好東西，還有什麼問題呢？我們來看一下 AJAX 中的實例，我們打開過一次了，也就是說已經有了本地緩存，那麼如果這時候給 TXT 文件再加入一些文字，會如何呢？會發現點擊按鈕後，添加進去的文字不顯示，過一會才顯示，這就是緩存的問題，Chrome 和 FF 緩存還不嚴重，IE 瀏覽器的緩存比較嚴重。這個問題在很多時候會給我們帶來一些困擾，比如是一個股票網站，需要實時更新最新的股票價格，這個價格一直在變，如果不阻止緩存，那麼這個價格就很難做到實時更新，所以如果是時常在變的數據，就需要把緩存阻止掉。緩存的工作原理是根據 URL 來緩存的，同一個地址讀取一次，因此要阻止緩存，只要讓 URL 一直在變，也就是向 URL 添加一個唯一的 ID 。
我們平時在瀏覽網頁時，都見過這種樣子，比如在使用百度搜索時，百度功能變數名稱後邊跟了個問號，然後是一堆什麼等於什麼：https://www.baidu.com/s?wd=前端&rsv_spt=1&rsv_iqid=0xe9146bd400052360&issp=1&，這個問號後邊的數據就被稱為 GET 數據。如果我們給 TXT 文件後邊也加入 GET 數據，http://abc.com/ajax/demo.txt?a=2，或者可以自定義什麼等於什麼，這樣對文件的顯示內容是沒有任何影響的，那麼對於緩存的問題，我們就可以對 oAjax.open('GET', '/ajax/demo.txt', true) 第二個參數 URL 做一些修改，'ajax/demo.txt?t=' + Math.random()，Math.random() 方法返回一個 0-1 之間的隨機小數，那麼每次返回的都不同，也可以添加 'ajax/demo.txt?t=' + new Date().getTime()，getTime()用於獲取當前的時間戳，也就是1970年元旦到當前的毫秒數，那麼使用 get Time() 返回的數據每一次都不一樣，因為是毫秒數，所以1秒之內就有很多種可能，他的值一直在變，這樣就能很好的解決緩存問題。
這裡要註意的是，在使用 GET 請求時，為了避免只是得到緩存的結果，需要向 URL 添加一個唯一的 ID，使 URL 每次都不一樣。
如果需要通過 GET 方法發送信息，可以把信息添加在 URL 中。
如果需要像 HTML 表單那樣傳輸 POST 數據，可以使用 setRequestHeader() 來添加 HTTP 頭，然後在 send() 方法中規定發送的數據。
setRequestHeader(header, value) 用於向請求添加 HTTP 頭，第一個參數 header 規定頭的名稱，比如 Content-type，第二個參數規定頭的值。
(2)、true 還是 false？
同步和非同步，在現實生活中，同步的意思為多件事一起做，而非同步為一件件來，也就是不同步。但是在 JS 中同步和非同步的概念和現實生活中恰恰是相反的，同步的意思為事情一件件來，先幹完一件事再乾另一件事，而非同步則為多個事情可以一起做，而 AJAX 天生就是用來做非同步操作的，如果 AJAX 工作在同步的方式下，也就是事情得一件一件來，當發出一個請求後，因為網速有點慢，這個請求在1分鐘後才得到響應，那麼在這個請求結束之前，頁面中所有的按鈕、鏈接、文字等全都跟死了一樣，就完全沒法操作了。而如果是非同步的話，就沒問題了，比如你發微博，發出去之後因為網速慢沒有更新過來，那麼在他更新之前，還可以做其他操作。
AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML），XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設置為 true，所以 AJAX 一般都為非同步傳輸。對於 Web 開發者來說，發送非同步請求是一個巨大的進步，很多在伺服器執行的任務都相當費時，在 AJAX 出現之前，這可能會引起應用程式掛起或者停止。
而通過 AJAX，JS 無需等待伺服器的響應，而是在等待伺服器響應時執行其他腳步，當響應就緒後對響應進行處理。
當使用非同步時，也就是 async = true 時，必需規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：
1 oAjax.onreadystatechange = function (){ 2 if(oAjax.readyState == 4 && oAjax.status == 200){ 3 alert(oAjax.responseText); 4 } 5 } 6 7 oAjax.open('GET', 'ajax/demo.txt?t=' + Math.random(), true); 8 oAjax.send();
如需使用 async=false，請將 open() 方法中的第三個參數改為 false 。
不推薦使用同步傳輸，但是對於一些小型的請求，也是可以的。
這裡需要註意，JS 會等到伺服器響應就緒才繼續執行，如果伺服器繁忙或緩慢，應用程式會掛起或停止。
當使用 async = false 時，可以不用編寫 onreadystatechange 函數，把代碼放到 send() 語句後面即可：
1 oAjax.open('GET', 'ajax/demo.txt', false); 2 oAjax.send(); 3 document.getElementById('div1').innerHTML = oAjax.responseText;
6、伺服器響應
XMLHttpRequest 對象的 responseText 或 responseXML 屬性用於獲得來自伺服器的響應，也就是獲取從伺服器返回的信息。
如果來自伺服器的響應是 XML，而且需要作為 XML 對象進行解析，就使用 responseXML 屬性。
如果來自伺服器的響應並非 XML，就使用 responseText 屬性，該屬性返回字元串形式的響應，因此可以直接使用：
document.getElementById('div1').innerHTML = oAjax.responseText;
這裡說到 XML ，我們就不得不提一下 AJAX 數據，也就是數據類型，數據類型可以分為很多種，比如中文、英文、數字等，我們經常使用的 JSON，他就是一種輕量級的數據交換格式。XML 相對來說那就是一個古老的存在，基本上都是在一些老式的程式中使用，都會從 XML 中讀取數據，現在可以說是要被淘汰了，現在的程式幾乎都是使用 JSON，因為同等數據量的情況下，XML 要比 JSON 大很多，這樣會浪費帶寬，浪費伺服器資源，所以在使用 AJAX 獲取從伺服器返回的信息時，一般都使用 responseText 這個屬性。
7、請求狀態監控
XMLHttpRequest 對象的 readyState 屬性返回請求的當前狀態。當請求被髮送到伺服器時，我們需要執行一些基於響應的任務，每當 readyState 改變時，就會觸發 onreadystatechange 事件，readyState 屬性存有 XMLHttpRequest 的狀態信息。
XMLHttpRequest 對象的三個重要的屬性：
onreadystatechange：存儲函數(或函數名)，每當 readyState 屬性改變時，就會調用該函數。
readyState：存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0：請求未初始化。還沒有調用 open() 方法。
1：伺服器連接已建立，也就是載入。已調用 open() 方法，正在發送請求。
2：請求已接收，載入完成。open() 方法完成，已收到全部響應內容。
3：請求處理中，也叫解析。正在解析響應內容。
4： 請求已完成，且響應已就緒。響應內容解析完成，可以在客戶端調用了。
status：請求結果，也就是 HTTP 狀態碼。200：OK。404：未找到頁面。
在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
1 oAjax.onreadystatechange = function (){ 2 if(oAjax.readyState == 4 && oAjax.status == 200){ 3 alert(oAjax.responseText); 4 } 5 }
這裡要註意： onreadystatechange 事件被觸發 5 次（0 - 4），對應著 readyState 的每個變化。
如果網站中存在多個 AJAX 任務，那麼就可以使用回調函數，回調函數是一種以參數形式傳遞給另一個函數的函數，應該為創建 XMLHttpRequest 對象編寫一個標準的函數，併為每個 AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AJAX 實例</title> 6 <script> 7 var oAjax; 8 function ajax(url, fnSucc){ 9 oAjax = new XMLHttpRequest(); 10 11 oAjax.onreadystatechange = fnSucc; 12 13 oAjax.open("GET", url, true); 14 oAjax.send(); 15 } 16 function myFunction(){ 17 ajax('ajax/demo.txt?t=' + Math.random(), function (){ 18 if(oAjax.readyState == 4 && oAjax.status == 200){ 19 alert(oAjax.responseText); 20 } 21 }); 22 } 23 </script> 24 </head> 25 <body> 26 <button type="button" onclick="myFunction()">讀取</button> 27 </body> 28 </html>
8、AJAX 原理
AJAX 的原理就跟現實生活中給朋友打電話是一樣一樣的，首先，你得有個手機，不然拿什麼打，也就是要有一個設備，當然現在那都是人手一部，這第一步就可以忽略了，然後就是撥號，所謂的撥號，就是把彼此的手機連接起來，建立一條通道，然後才能通信，如果接通了，就可以進行第三步了，那就是說，我們給別人打電話，肯定是要先說，然後再聽對方說，那麼最後就是聽對方說，不可能是自己說完啪掛了，至少得聽對方說點啥，也就是有個響應。
打電話需要4個步驟完成，其實我們在編寫 AJAX 時，也是需要4個步驟，首先，就得創建 AJAX 對象，有了這個對象之後，才能進行下麵的操作，那麼接下來要做的就是連接到伺服器，就相當於打電話撥號，連接到伺服器之後，你就得主動告訴伺服器你需要什麼文件，不可能是伺服器丟給你幾個文件，你自己選，要不是了再給你換一批，不可能這樣，再說那伺服器都是給成千上萬人提供服務，不可能去跟你在那玩你猜我猜猜不猜，所以我們就得明確的告訴伺服器我們要哪個文件，那麼第三步就是發送請求，最後一步就是接收返回值，獲得伺服器的響應，也就是把我們需要的那個文件給我們傳回來。
我們平時都說 AJAX，其實這隻是一個對外的稱呼，真正在瀏覽器內部是通過 XMLHttpRequest 對象來完成 AJAX 請求的，這才是 AJAX 真正的對象。
下麵我們看一下，根據這4個步驟，AJAX 代碼的具體編寫過程：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AJAX 原理</title> 6 <script> 7 window.onload = function (){ 8 var oBtn = document.getElementById('btn1'); 9 oBtn.onclick = function (){ 10 // 1、設備 = 創建 AJAX 對象 11 var oAjax = new XMLHttpRequest(); 12 // 創建好對象之後，就可以彈出來看一下。返回：[object XMLHttpRequest] 13 // IE7 和 IE5 返回：[object] 14 //alert(oAjax); 15 16 // 在剛創建 AJAX 對象，還沒調用 open() 方法，也就是請求未初始化時，彈出 readyState 狀態。 17 //alert(oAjax.readyState); // 返回：0 18 19 // 2、撥號 = 連接伺服器 20 oAjax.open('GET', 'ajax/demo.txt?t=' + new Date().getTime(), true); 21 22 // 3、說 = 發送請求 23 oAjax.send(); 24 25 // 4、聽 = 接收返回 26 oAjax.onreadystatechange = function (){ 27 // oAjax.readyState 瀏覽器和伺服器進行到哪一步了 28 if(oAjax.readyState == 4) // 請求已完成 29 if(oAjax.status == 200){ // 成功 30 // 如果成功了，則彈出伺服器響應的文本 31 alert('成功 ' + oAjax.responseText); 32 } 33 else{ 34 // 如果失敗了，則彈出請求結果。 35 alert('失敗 ' + oAjax.status); 36 } 37 }; 38 }; 39 }; 40 </script> 41 </head> 42 <body> 43 <button type="button" id="btn1">讀取</button> 44 </body> 45 </html>
上面的代碼，在進行最後一步時，判斷瀏覽器和伺服器進行到哪一步了，當 readyState 屬性狀態為4時，就是請求完成了，但是請求完成並不代表請求成功，如果讀取出錯了或者文件不存在等情況導致出錯了，那麼也算是請求完成了，也就是不管讀取成功還是失敗，都算是請求完成了，所以需要進一步使用 status 屬性判斷，若為200，就是成功了。使用自定義的個人站點打開上面的 demo，點擊按鈕後，彈出成功和文本中的內容，我們可以試著改變一下 URL，就是把他故意寫錯，再次點擊按鈕，則會彈出失敗和404，也就是未找到頁面。
如果每次我們按照這4個步驟編寫 AJAX 程式，是非常方便的，也容易理解，但是使用起來比較麻煩，所以我們可以把他封裝為一個函數，在使用時調用就好使多了。
1 function ajax(url, fnSucc, fnFaild){ 2 var oAjax = new XMLHttpRequest(); 3 oAjax.open('GET', url, true); 4 oAjax.send(); 5 oAjax.onreadystatechange = function(){ 6 if(oAjax.readyState == 4){ 7 if(oAjax.status == 200){ 8 fnSucc(oAjax.responseText); 9 } 10 else{ 11 if(fnFaild){ 12 fnFaild(oAjax.status); 13 } 14 } 15 } 16 }; 17 }
上面封裝的 ajax 函數有三個參數，第一個參數 url，是文件路徑，第二個參數 fnSucc，當每次成功的時候調用函數，第三個參數 fnFaild，當失敗時調用的函數。這裡並不是任何情況下都需要失敗時執行一個函數，所以需要做一個判斷，只有當 fnFaild 這個參數傳入進來，也就是定義了失敗時執行的函數，那麼這時候才去調用他。
可以在 www 根目錄中新建一個文件夾命名為 js，然後把上邊的代碼複製另存為 ajax.js，下麵是封裝好之後的應用：
1 <script src="js/ajax.js"></script> 2 <script> 3 window.onload = function (){ 4 var oBtn = document.getElementById('btn1'); 5 oBtn.onclick = function (){ 6 ajax('ajax/demo.txt?t=' + new Date().getTime(), function (str){ 7 alert('成功 ' + str); 8 }, function (){ 9 alert('失敗'); 10 }); 11 }; 12 }; 13 </script>
我們要從伺服器讀取 demo.txt 這個文件，目的是為了獲取這個文件中的內容，那麼如何獲取返回的結果呢？當成功的讀取信
