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 tool.hovertree.com
ServerAlias tool.hovertree.com hovertree.com
<Directory "D:/wamp/www">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
hoverc.com 為個人站點地址，可以自行定義。
最後，打開：C:\Windows\System32\drivers\etc\hosts 文件
添加：127.0.0.1 hoverc.com
重新啟動WAMP。
在需要做測試時，將頁面保存在 D:/wamp/www 路徑下，文件名保存為 index.html，然後在浏覽器地址欄輸入 hovertree.com 就可以打開剛才保存的頁面。
如果打開不成功，可百度搜索解決辦法，可能是80端口被占用了。
這裡需要注意一下，放在服務器下的文件不能用中文命名。
3、AJAX 基礎
首先，我們先來看一個 AJAX 應用的實例：請求並顯示靜態 TXT 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 實例</title>
<script>
function ajax(){
var oAjax = new XMLHttpRequest();
oAjax.onreadystatechange = function (){
if(oAjax.readyState == 4 && oAjax.status == 200){
alert(oAjax.responseText);
}
}
oAjax.open('GET', 'ajax/demo.txt', true);
oAjax.send();
}
</script>
</head>
<body>
<button type="button" onclick="ajax()">讀取</button>
</body>
</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 。
var oAjax;
// IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}
// IE6
else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
因為所有現代浏覽器和 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://hovertree.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 事件中的就緒狀態時執行的函數：
oAjax.onreadystatechange = function (){
if(oAjax.readyState == 4 && oAjax.status == 200){
alert(oAjax.responseText);
}
}
oAjax.open('GET', 'ajax/demo.txt?t=' + Math.random(), true);
oAjax.send();
如需使用 async = false，請將 open() 方法中的第三個參數改為 false 。
不推薦使用同步傳輸，但是對於一些小型的請求，也是可以的。
這裡需要注意，JS 會等到服務器響應就緒才繼續執行，如果服務器繁忙或緩慢，應用程序會掛起或停止。
當使用 async = false 時，可以不用編寫 onreadystatechange 函數，把代碼放到 send() 語句後面即可：
oAjax.open('GET', 'ajax/demo.txt', false);
oAjax.send();
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 時，表示響應已就緒：
oAjax.onreadystatechange = function (){
if(oAjax.readyState == 4 && oAjax.status == 200){
alert(oAjax.responseText);
}
}
這裡要注意： onreadystatechange 事件被觸發 5 次（0 - 4），對應著 readyState 的每個變化。
如果網站中存在多個 AJAX 任務，那麼就可以使用回調函數，回調函數是一種以參數形式傳遞給另一個函數的函數，應該為創建 XMLHttpRequest 對象編寫一個標准的函數，並為每個 AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 實例</title>
<script>
var oAjax;
function ajax(url, fnSucc){
oAjax = new XMLHttpRequest();
oAjax.onreadystatechange = fnSucc;
oAjax.open("GET", url, true);
oAjax.send();
}
function myFunction(){
ajax('ajax/demo.txt?t=' + Math.random(), function (){
if(oAjax.readyState == 4 && oAjax.status == 200){
alert(oAjax.responseText);
}
});
}
</script>
</head>
<body>
<button type="button" onclick="myFunction()">讀取</button>
</body>
</html>
8、AJAX 原理
AJAX 的原理就跟現實生活中給朋友打電話是一樣一樣的，首先，你得有個手機，不然拿什麼打，也就是要有一個設備，當然現在那都是人手一部，這第一步就可以忽略了，然後就是撥號，所謂的撥號，就是把彼此的手機連接起來，建立一條通道，然後才能通信，如果接通了，就可以進行第三步了，那就是說，我們給別人打電話，肯定是要先說，然後再聽對方說，那麼最後就是聽對方說，不可能是自己說完啪掛了，至少得聽對方說點啥，也就是有個響應。
打電話需要4個步驟完成，其實我們在編寫 AJAX 時，也是需要4個步驟，首先，就得創建 AJAX 對象，有了這個對象之後，才能進行下面的操作，那麼接下來要做的就是連接到服務器，就相當於打電話撥號，連接到服務器之後，你就得主動告訴服務器你需要什麼文件，不可能是服務器丟給你幾個文件，你自己選，要不是了再給你換一批，不可能這樣，再說那服務器都是給成千上萬人提供服務，不可能去跟你在那玩你猜我猜猜不猜，所以我們就得明確的告訴服務器我們要哪個文件，那麼第三步就是發送請求，最後一步就是接收返回值，獲得服務器的響應，也就是把我們需要的那個文件給我們傳回來。
我們平時都說 AJAX，其實這只是一個對外的稱呼，真正在浏覽器內部是通過 XMLHttpRequest 對象來完成 AJAX 請求的，這才是 AJAX 真正的對象。
下面我們看一下，根據這4個步驟，AJAX 代碼的具體編寫過程：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 原理</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function (){
// 1、設備 = 創建 AJAX 對象
var oAjax = new XMLHttpRequest();
// 創建好對象之後，就可以彈出來看一下。返回：[object XMLHttpRequest]
// IE7 和 IE5 返回：[object]
//alert(oAjax);
// 在剛創建 AJAX 對象，還沒調用 open() 方法，也就是請求未初始化時，彈出 readyState 狀態。
//alert(oAjax.readyState); // 返回：0
// 2、撥號 = 連接服務器
oAjax.open('GET', 'ajax/demo.txt?t=' + new Date().getTime(), true);
// 3、說 = 發送請求
oAjax.send();
// 4、聽 = 接收返回
oAjax.onreadystatechange = function (){
// oAjax.readyState 浏覽器和服務器進行到哪一步了
if(oAjax.readyState == 4) // 請求已完成
if(oAjax.status == 200){ // 成功
// 如果成功了，則彈出服務器響應的文本
alert('成功 ' + oAjax.responseText);
}
else{
// 如果失敗了，則彈出請求結果。
alert('失敗 ' + oAjax.status);
}
};
};
};
</script>
</head>
<body>
<button type="button" id="btn1">讀取</button>
</body>
</html>
上面的代碼，在進行最後一步時，判斷浏覽器和服務器進行到哪一步了，當 readyState 屬性狀態為4時，就是請求完成了，但是請求完成並不代表請求成功，如果讀取出錯了或者文件不存在等情況導致出錯了，那麼也算是請求完成了，也就是不管讀取成功還是失敗，都算是請求完成了，所以需要進一步使用 status 屬性判斷，若為200，就是成功了。使用自定義的個人站點打開上面的 demo，點擊按鈕後，彈出成功和文本中的內容，我們可以試著改變一下 URL，就是把他故意寫錯，再次點擊按鈕，則會彈出失敗和404，也就是未找到頁面。
如果每次我們按照這4個步驟編寫 AJAX 程序，是非常方便的，也容易理解，但是使用起來比較麻煩，所以我們可以把他封裝為一個函數，在使用時調用就好使多了。
function ajax(url, fnSucc, fnFaild){
var oAjax = new XMLHttpRequest();
oAjax.open('GET', url, true);
oAjax.send();
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4){
if(oAjax.status == 200){
fnSucc(oAjax.responseText);
}
else{
if(fnFaild){
fnFaild(oAjax.status);
}
}
}
};
}
上面封裝的 ajax 函數有三個參數，第一個參數 url，是文件路徑，第二個參數 fnSucc，當每次成功的時候調用函數，第三個參數 fnFaild，當失敗時調用的函數。這裡並不是任何情況下都需要失敗時執行一個函數，所以需要做一個判斷，只有當 fnFaild 這個參數傳入進來，也就是定義了失敗時執行的函數，那麼這時候才去調用他。
可以在 www 根目錄中新建一個文件夾命名為 js，然後把上邊的代碼復制另存為 ajax.js，下面是封裝好之後的應用：
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function (){
ajax('ajax/demo.txt?t=' + new Date().getTime(), function (str){
alert('成功 ' + str);
}, function (){
alert('失敗');
});
};
};
</script>
我們要從服務器讀取 demo.txt 這個文件，目的是為了獲取這個文件中的內容，那麼如何獲取返回的結果呢？當成功的讀取信息後，要調用 fnSucc 這個參數，也就是成功後執行的回調函數，他其實是有一個參數的 str，這個參數可以自定義，str 的作用就是把服務器返回給我們的內容傳入進來，這個 str 參數就是 fnSucc(oAjax.responseText) 中傳過來的。
當失敗的時候，調用 fnFaild 這個參數，也就是失敗後執行的回調函數。那麼這個失敗時調用函數也是有一個參數的，fnFaild(oAjax.status)，為了方便調試，我們也可以給他傳入一個參數進來，用來提示請求失敗的結果。在真正的網站中，當 AJAX 請求失敗時，也不可能彈一個 alert，這樣不太友好，所以可以自定義一些更加友好的方式來提示用戶。這裡建議大家平時在調試 AJAX 程序時，一定要加上失敗時執行的回調函數，否則如果失敗的話，那麼可能沒有任何反應。
9、AJAX 應用
請求一個靜態的 TXT 文件，在了解了 AJAX 的原理後，很容易的就可以做到，但是在真正的網站中，這樣不會有太大的實際用途，前邊我們說 AJAX 是一種與服務器交換數據並更新部分網頁的藝術，那麼既然稱之為藝術，因此我們需要使用 AJAX 去請求一些更實用、更復雜的東西，這樣才能完美的體現他存在的價值。比如說我們可以去請求動態數據，例如去請求一個裝著數據的 JSON 文件。
(1)、讀取數組
首先，新建一個 TXT 文件命名為 arr.txt，隨意存一個數組，比如[1,2,3,4,5,6]，放在之前的 ajax 文件夾下，然後就可以開始編寫程序了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 讀取數組</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function (){
ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){
// str 是服務器返回的內容，彈出來看一下
//alert(str); 返回：[1,2,3,4,5,6]
// 那麼再彈出內容的長度
//alert(str.length); // 返回：13
// 返回對象的類型：string
//alert(typeof str);
// eval() 函數用於把字符串轉換為 JS 代碼執行
//alert(eval(str)); // 返回：1,2,3,4,5,6
// 現在可以返回內容的長度
//alert(eval(str).length); // 返回：6
// 可以把這個函數保存為變量，查看每項的值
var arr = eval(str);
alert(arr[1]); // 返回：2
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn1">讀取</button>
</body>
</html>
上面的實例中，str 是服務器返回給我們的內容，彈出來之後，是我們定義的數組，沒有問題，那麼彈出數組的長度，卻返回 13，數組的長度本應該是 6 啊，怎麼會是 13 呢，我們再彈出這個對象的類型，結果返回 string，盡管他長的很像數組，但他確實是一個字符串，這是為什麼呢？其實通過 AJAX 的方式讀取的任何對象都是以字符串形式存在的，那麼這個字符串的長度就應該是13，方括號加上標點。如果要把一個字符串中存的數組提取出來，就要使用 eval(string) 函數，該函數可計算某個字符串，並把他作為 JavaScript 代碼來執行，也就是可以把一個語句中的內容解析為 JS 可以識別的語句，該方法只接受原始字符串作為參數，如果 string 參數不是原始字符串，那麼該方法將不作任何改變地返回。那麼使用該方法之後再次返回數組的內容和長度，就沒有問題了。我們也可以把這個函數保存在一個變量中，來查看每項的值。雖然 eval() 的功能非常強大，但在實際使用中用到他的情況並不多。
(2)、讀取 JSON 數據
首先，還是需要新建一個 JSON 文件，可以命名為 json.json，可以隨意存入一個數組對象，比如[{a:9, b:6, c:15}, {a:5, b:7, c:12}]，然後放在 ajax 文件夾下，最後開始編寫程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 讀取JSON</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function (){
ajax('ajax/json.json?t=' + new Date().getTime(), function (str){
var arr = eval(str);
// 返回數組的第0個元素，也就是數組對象中的第一項
alert(arr[0]); // 返回：[object Object]
// 返回第0個元素中第一項 a 的值
alert(arr[0].a); // 返回：9
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn1">讀取</button>
</body>
</html>
上面的實例，使用 eval() 函數解析出來之後，還是一個數組，返回數組的第0個元素，也就是 {a:9, b:6, c:15}，他還是一個 JSON 數據，所以返回 obj，那麼再返回第0個元素中 a 的值，可以看到，使用方法和讀取數組的方法是一樣的。那如果 JSON 中保存的數據更復雜一些，比如是一組用戶信息，要如何去讀取，然後並以列表形式顯示在網頁中呢？
下面是 JSON 用戶信息數據，可以復制替換一下，這裡在保存 JSON 時需要注意編碼格式，一旦文件中出現中文了，就必須保存為 UTF-8 的格式，為了方便區分，我們可以把這個文件命名為 date.json 。
[
{
"user": "小白",
"sex": "男",
"age": 27
},
{
"user": "初夏",
"sex": "女",
"age": 23
},
{
"user": "小明",
"sex": "男",
"age": 25
},
{
"user": "靜靜",
"sex": "女",
"age": 21
}
]
(3)、創建 DOM 元素顯示 JSON 數據
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 讀取JSON</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('u1');
oBtn.onclick = function (){
ajax('ajax/date.json?t=' + new Date().getTime(), function (str){
var arr = eval(str);
//循環遍歷返回的對象
for(var i=0; i<arr.length; i++){
//每次循環的時候創建一個li元素
var oLi = document.createElement('li');
//向li元素插入內容
oLi.innerHTML = '姓名：<strong>' + arr[i].user + '</strong> 性別：<span>' + arr[i].sex + '</span> 年齡：<span>' + arr[i].age + '</span>';
//將創建好的li元素插入到ul中
oUl.appendChild(oLi);
}
},function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" name="user" value="讀取">
<!-- 點擊按鈕生成json數據列表 -->
<ul id="u1">
<!-- <li>姓名：<strong>小白</strong> 性別：<span>男</span> 年齡：<span>27</span></li> -->
</ul>
</body>
</html>
上面的代碼，寫起來也沒什麼難度，都是一些基礎的知識，在浏覽器打開自定義的個人站點，點擊讀取按鈕之後，JSON 文件中存的數據，就會以為列表的形式顯示在頁面上，這裡只是簡單的做了一個效果，我們還可以給他定義樣式，或者可以創建一個表格，讓他更友好的顯示。
這裡在網上看到了一個方法，在處理 AJAX 請求得到 JSON 數據響應時，也就是服務器返回的 JSON 字符串，需要做一次對象化處理，可以不使用 eval() 方法，而是使用 new Function() 代替，新的 Function() 構造就類似於 eval()，或者使用 jQuery 提供的 $.getJSON() 方法獲得服務器返回，那麼就可以不使用 eval() 方法了。具體操作如下：
//var arr = eval(str);
var arr = (new Function('', 'return' + str)());
此時的 arr 就會被解析成一個 JSON 對象了，然後再使用循環遍歷，將數據插入到新建的 li 元素中。
10、AJAX 總結
我們只是重點講了一些 AJAX 最基礎的知識，到這裡，就可以使用 AJAX 做一些基本的應用了，但是 AJAX 不僅僅在於此，他有很多非常高級而且很實際的應用，比如一些大型系統如何使用 AJAX 搭建，如何編寫一套完整的 AJAX 交互程序，還有跨域，還有JSONP等，要想真正的掌握 AJAX 這門藝術，我們的路還很長。