JavaScript學(xué)習(xí)總結(jié)之JS、AJAX應(yīng)用

更新時間：2016年01月29日 12:00:54 作者：彼岸時光

這篇文章主要介紹了JavaScript學(xué)習(xí)總結(jié)JS AJAX應(yīng)用的相關(guān)資料,需要的朋友可以參考下

　　1、AJAX 簡介

　　AJAX(音譯為：阿賈克斯) = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，也就是在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準的新方法，是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)，通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新，傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容或者用戶注冊信息、提交表單等，必需重新加載整個網(wǎng)頁頁面。所以說 AJAX 是一種與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，因此我們必須掌握 AJAX 這種技術(shù)。

　　AJAX 是基于現(xiàn)有的 Internet 標(biāo)準，并且聯(lián)合使用它們：

　　　　①、XMLHttpRequest 對象 (異步的與服務(wù)器交換數(shù)據(jù))

　　　?、凇avaScript/DOM (信息顯示/交互)

　　　?、?、CSS (給數(shù)據(jù)定義樣式)

　　　?、?、XML (作為轉(zhuǎn)換數(shù)據(jù)的格式)

　　AJAX 的核心是 JavaScript 對象 XMLHttpRequest，他是一種支持異步請求的技術(shù)，也就是 XMLHttpRequest 賦予了我們可以使用 JS 向服務(wù)器提出請求并處理響應(yīng)的能力，而不阻塞用戶，通過這個對象，JS 可在不重載頁面的情況下與 Web 服務(wù)器交換數(shù)據(jù)。AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁從服務(wù)器請求少量的信息，而不是整個頁面。AJAX 是一種獨立于 Web 服務(wù)器軟件的瀏覽器技術(shù)，也就是 AJAX 應(yīng)用程序獨立于瀏覽器和平臺！可用于創(chuàng)造動態(tài)性更強的應(yīng)用程序

　　那么，簡單說，AJAX 就是可以讓 JS 去讀取服務(wù)器上的數(shù)據(jù)，他的功能是可以在無需刷新頁面的前提下，去服務(wù)器讀取或者發(fā)送數(shù)據(jù)?？捎脕砼c JSON 文件進行交互式通信，也可用來與數(shù)據(jù)庫進行動態(tài)通信，還可用于創(chuàng)造動態(tài)性更強的應(yīng)用程序。最常見的應(yīng)用就是用戶登錄，在登錄時，他就可以判斷用戶輸入是否正確，如果輸入正確，就直接顯示用戶信息，如果輸入錯誤，提示錯誤信息，并不需要刷新頁面。

　　2、配置服務(wù)器

　　AJAX 應(yīng)用是異步更新，讀取服務(wù)器上的數(shù)據(jù)，那到底服務(wù)器是什么東西呢？其實服務(wù)器就相當(dāng)于 PC ，我們在平時瀏覽網(wǎng)頁時，只需要在地址欄輸入相應(yīng)的網(wǎng)址，就可以瀏覽對應(yīng)的頁面，這些頁面不可能存儲在個人電腦中，那得需要多大的硬盤，并且還有其他影響因素，所以這些網(wǎng)頁就存儲在對應(yīng)的服務(wù)器上，比如百度的服務(wù)器、新浪的服務(wù)器，其實服務(wù)器跟我們平時用的電腦沒有什么多大的區(qū)別，個人計算機也可以作為服務(wù)器，甚至是手機之類的東西也可以作為服務(wù)器，比如我們用手機給電腦傳照片，可以不通過數(shù)據(jù)線，使用 WIFI 或者騰訊提供的功能，就可以很輕松的完成傳輸過程，這時候手機就充當(dāng)了服務(wù)器的角色，只不過性能比較差，僅對這一臺機器提供服務(wù)而已。那么 Web 服務(wù)器就是可以同時對很多人提供服務(wù)，性能更強大。

　　在學(xué)習(xí) AJAX 時，就必須配置個人服務(wù)器，也就是要在本機搭建服務(wù)器程序，方便我們調(diào)試代碼。通常都會使用 WAMP 來搭建服務(wù)器，本地服務(wù)器搭建程序有很多種，大家可以選一種自己喜歡的來搭建，這里就以 WAMP 為例，WAMP 即 Windows 下的 Apache + Mysql + PHP 集成安裝環(huán)境，也就是 Win 平臺上的服務(wù)器程序，而通常都使用 WampServer 這一服務(wù)器軟件。我這里安裝的是 WampServer 2.5，大家可以百度搜索 wamp 找到2.5版本下載安裝，建議將程序裝在 D 盤，安裝完成之后，打開程序，在桌面右下角有一個 W 的圖標(biāo)，通常都為綠色，可在圖標(biāo)上點擊右鍵，選擇倒數(shù)第二個選項切換為中文，切換完成之后，接下來就是配置了，下面是我在網(wǎng)上找到的配置方法，并且使用沒有問題，寫在這里也省的去找了，現(xiàn)在 WampServer 已經(jīng)更新到3.0版本了，根據(jù)安裝的版本不同在百度搜索配置方法，都是一堆堆的。

　　首先，用編輯器打開安裝目錄：D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 文件

　　在516行或者搜索關(guān)鍵詞找到：

#Include conf/extra/httpd-manual.conf

　　將前面的井號去掉。

　　然后，再打開：D:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf 文件

　　在代碼最后添加如下內(nèi)容：

<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端口被占用了。

　　這里需要注意一下，放在服務(wù)器下的文件不能用中文命名。

　　3、AJAX 基礎(chǔ)

　　首先，我們先來看一個 AJAX 應(yīng)用的實例：請求并顯示靜態(tài) TXT 文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 實例</title>
<script>
function ajax(){
var oAjax = new XMLHttpRequest();
oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
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，文件中可以隨意輸入點文字，用作演示。然后通過我們自定義的個人站點，在瀏覽器中打開頁面，當(dāng)點擊讀取按鈕后，彈出 TXT 文件中的內(nèi)容。

　　通過上面的實例，我們就可以看到，實際上 AJAX 的作用就是從服務(wù)器上讀取一個文件，并且把這個文件內(nèi)容返回給我們，讓我們處理。

　　這里需要注意的是字符集編碼問題，在使用 AJAX 時，所有的文件都必須是統(tǒng)一的編碼格式，包括 HTML 、JS 文件和被讀的文件，比如都是 UTF-8 或者都是 GB2312，上面實例中用于演示的 TXT 文件，默認輸入英文，在保存時默認編碼為 ANSI，如果我們輸入的是漢字，在保存時不改為與頁面相同的編碼格式 UTF-8，那么在點擊按鈕后，網(wǎng)頁上就顯示的亂碼，所以在保存時，一定要注意切換文件的編碼格式。

　　下面我們來分析一下 AJAX 的工作原理。

　　4、XHR 創(chuàng)建對象

　　XHR 是 XMLHttpRequest 的簡寫，是 AJAX 的基礎(chǔ)，用于在后臺與服務(wù)器交換數(shù)據(jù)。

　　所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對象，老版本的 IE 瀏覽器(IE6)則使用 ActiveXObject，為了兼容各種瀏覽器，可以做一個判斷，如果支持 XMLHttpRequest 對象，則創(chuàng)建該對象，如果不支持，則創(chuàng)建 ActiveXObject 。

var oAjax;
// IE+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}
// IE
else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}

　　因為所有現(xiàn)代瀏覽器和 IE 高版本瀏覽器都支持 XMLHttpRequest 對象，所以在創(chuàng)建對象時，也就不用做兼容性處理了，這里只是了解一下。在 IE 瀏覽器中 ActiveX 是插件的意思，也就是說 IE6 中的 AJAX 是通過一個插件來完成的，雖說是插件，但是在 IE6 瀏覽器中已經(jīng)默認安裝了。

　　在上面的代碼中，在做判斷時使用了 window.XMLHttpRequest ，我們都知道全局變量是 window 上的一個屬性，在 JS 中，如果使用沒有定義的變量，會報錯，比如：alert(a)。而如果使用沒有定義的屬性，則不會報錯，而是 undefined，比如：alert(window.a)。IE6 不支持 XMLHttpRequest，所以如果直接使用，就會報錯，而如果把他定義為 window 的屬性，那么則是 undefined ，未定義在 if 判斷語句中代表假，也就是 fasle，而這正是我們需要的。

　　5、連接服務(wù)器

　　將請求發(fā)送到服務(wù)器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

oAjax.open('GET', 'ajax/demo.txt', true);
oAjax.send();

　　open(method, url, async) 規(guī)定請求的類型、URL 以及是否異步處理請求。第一個參數(shù) method，用于規(guī)定請求的類型，GET 或

POST 。第二個參數(shù) URL，用于設(shè)置文件在服務(wù)器上的地址，該文件可以是任何類型的文件，比如 .txt 、 .xml 和 .json，或者服務(wù)器腳本文件，比如 .php (在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù))。第三個參數(shù) async，用于定義是否異步傳輸，true（異步）或 false（同步）。

　　send(string) 用于將請求發(fā)送到服務(wù)器，參數(shù) string 僅用于 POST 請求。

　　下面來看兩個問題。

　　(1)、GET 還是 POST？

　　GET 和 POST 常用于提交表單，我們也并不陌生，表單的提交默認是使用 GET 方式。

　　與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。

　　但是，在以下情況中，請使用 POST 請求：

　　　?、?、無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）。

　　　?、?、向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）。

　　　　③、發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠。

　　最實用的判斷方法：GET 用于獲取數(shù)據(jù)，比如瀏覽貼子，POST 用于上傳數(shù)據(jù)，也就是向服務(wù)器傳遞數(shù)據(jù)，比如用戶注冊。

　　GET 和 POST 的區(qū)別：

　　GET：在 URL 中傳輸數(shù)據(jù)，安全性弱，容量小，一般 URL 的長度最大為 4K 到 10K，長度是有限制的。

　　POST：不在 URL 中傳輸數(shù)據(jù)，相對安全性強，容量大，容量可達到2G，再大就可以使用控件，真正的安全就只有 https 協(xié)議。

　　緩存：GET 有緩存，POST 沒有緩存。

　　所以，AJAX 一般都為 GET 方式。當(dāng)然除了 GET 和 POST 方法之外還有很多種方法，最常用的還是這兩種。

　　在 AJAX 基礎(chǔ)的實例中，因為我們使用了 GET 請求，那么還有一個問題就是緩存的問題，所謂緩存，就好比一個網(wǎng)站打開一次之后，再打開的話，速度就會快一些，這就得益于緩存，那么緩存實際上就是一個網(wǎng)站，在第一次打開的時候，才是真正的從服務(wù)器上請求，之后都是從本地讀取，從硬盤中讀取數(shù)據(jù)肯定要快一些，至少比網(wǎng)絡(luò)要快很多。那按照這樣說，緩存豈不是個好東西，還有什么問題呢？我們來看一下 AJAX 中的實例，我們打開過一次了，也就是說已經(jīng)有了本地緩存，那么如果這時候給 TXT 文件再加入一些文字，會如何呢？會發(fā)現(xiàn)點擊按鈕后，添加進去的文字不顯示，過一會才顯示，這就是緩存的問題，Chrome 和 FF 緩存還不嚴重，IE 瀏覽器的緩存比較嚴重。這個問題在很多時候會給我們帶來一些困擾，比如是一個股票網(wǎng)站，需要實時更新最新的股票價格，這個價格一直在變，如果不阻止緩存，那么這個價格就很難做到實時更新，所以如果是時常在變的數(shù)據(jù)，就需要把緩存阻止掉。緩存的工作原理是根據(jù) URL 來緩存的，同一個地址讀取一次，因此要阻止緩存，只要讓 URL 一直在變，也就是向 URL 添加一個唯一的 ID 。

　　我們平時在瀏覽網(wǎng)頁時，都見過這種樣子，比如在使用百度搜索時，百度域名后邊跟了個問號，然后是一堆什么等于什么：https://www.baidu.com/s?wd=前端&rsv_spt=1&rsv_iqid=0xe9146bd400052360&issp=1&，這個問號后邊的數(shù)據(jù)就被稱為 GET 數(shù)據(jù)。如果我們給 TXT 文件后邊也加入 GET 數(shù)據(jù)，http://abc.com/ajax/demo.txt?a=2，或者可以自定義什么等于什么，這樣對文件的顯示內(nèi)容是沒有任何影響的，那么對于緩存的問題，我們就可以對 oAjax.open('GET', '/ajax/demo.txt', true) 第二個參數(shù) URL 做一些修改，'ajax/demo.txt?t=' + Math.random()，Math.random() 方法返回一個 0-1 之間的隨機小數(shù)，那么每次返回的都不同，也可以添加 'ajax/demo.txt?t=' + new Date().getTime()，getTime()用于獲取當(dāng)前的時間戳，也就是1970年元旦到當(dāng)前的毫秒數(shù)，那么使用 get Time() 返回的數(shù)據(jù)每一次都不一樣，因為是毫秒數(shù)，所以1秒之內(nèi)就有很多種可能，他的值一直在變，這樣就能很好的解決緩存問題。

　　這里要注意的是，在使用 GET 請求時，為了避免只是得到緩存的結(jié)果，需要向 URL 添加一個唯一的 ID，使 URL 每次都不一樣。

　　如果需要通過 GET 方法發(fā)送信息，可以把信息添加在 URL 中。

　　如果需要像 HTML 表單那樣傳輸 POST 數(shù)據(jù)，可以使用 setRequestHeader() 來添加 HTTP 頭，然后在 send() 方法中規(guī)定發(fā)送的數(shù)據(jù)。

　　setRequestHeader(header, value) 用于向請求添加 HTTP 頭，第一個參數(shù) header 規(guī)定頭的名稱，比如 Content-type，第二個參數(shù)規(guī)定頭的值。

　　(2)、true 還是 false？

　　同步和異步，在現(xiàn)實生活中，同步的意思為多件事一起做，而異步為一件件來，也就是不同步。但是在 JS 中同步和異步的概念和現(xiàn)實生活中恰恰是相反的，同步的意思為事情一件件來，先干完一件事再干另一件事，而異步則為多個事情可以一起做，而 AJAX 天生就是用來做異步操作的，如果 AJAX 工作在同步的方式下，也就是事情得一件一件來，當(dāng)發(fā)出一個請求后，因為網(wǎng)速有點慢，這個請求在1分鐘后才得到響應(yīng)，那么在這個請求結(jié)束之前，頁面中所有的按鈕、鏈接、文字等全都跟死了一樣，就完全沒法操作了。而如果是異步的話，就沒問題了，比如你發(fā)微博，發(fā)出去之后因為網(wǎng)速慢沒有更新過來，那么在他更新之前，還可以做其他操作。

　　AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML），XMLHttpRequest 對象如果要用于 AJAX 的話，其 open() 方法的 async 參數(shù)必須設(shè)置為 true，所以 AJAX 一般都為異步傳輸。對于 Web 開發(fā)者來說，發(fā)送異步請求是一個巨大的進步，很多在服務(wù)器執(zhí)行的任務(wù)都相當(dāng)費時，在 AJAX 出現(xiàn)之前，這可能會引起應(yīng)用程序掛起或者停止。

　　而通過 AJAX，JS 無需等待服務(wù)器的響應(yīng)，而是在等待服務(wù)器響應(yīng)時執(zhí)行其他腳步，當(dāng)響應(yīng)就緒后對響應(yīng)進行處理。

　　當(dāng)使用異步時，也就是 async = true 時，必需規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時執(zhí)行的函數(shù)：

oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
}
oAjax.open('GET', 'ajax/demo.txt?t=' + Math.random(), true);
oAjax.send();

　　如需使用 async=false，請將 open() 方法中的第三個參數(shù)改為 false 。

　　不推薦使用同步傳輸，但是對于一些小型的請求，也是可以的。

　　這里需要注意，JS 會等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行，如果服務(wù)器繁忙或緩慢，應(yīng)用程序會掛起或停止。

　　當(dāng)使用 async = false 時，可以不用編寫 onreadystatechange 函數(shù)，把代碼放到 send() 語句后面即可：

oAjax.open('GET', 'ajax/demo.txt', false);
oAjax.send();
document.getElementById('div').innerHTML = oAjax.responseText;

　　6、服務(wù)器響應(yīng)

　　XMLHttpRequest 對象的 responseText 或 responseXML 屬性用于獲得來自服務(wù)器的響應(yīng)，也就是獲取從服務(wù)器返回的信息。

　　如果來自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對象進行解析，就使用 responseXML 屬性。

　　如果來自服務(wù)器的響應(yīng)并非 XML，就使用 responseText 屬性，該屬性返回字符串形式的響應(yīng)，因此可以直接使用：

document.getElementById('div1').innerHTML = oAjax.responseText;

　　這里說到 XML ，我們就不得不提一下 AJAX 數(shù)據(jù)，也就是數(shù)據(jù)類型，數(shù)據(jù)類型可以分為很多種，比如中文、英文、數(shù)字等，我們經(jīng)常使用的 JSON，他就是一種輕量級的數(shù)據(jù)交換格式。XML 相對來說那就是一個古老的存在，基本上都是在一些老式的程序中使用，都會從 XML 中讀取數(shù)據(jù)，現(xiàn)在可以說是要被淘汰了，現(xiàn)在的程序幾乎都是使用 JSON，因為同等數(shù)據(jù)量的情況下，XML 要比 JSON 大很多，這樣會浪費帶寬，浪費服務(wù)器資源，所以在使用 AJAX 獲取從服務(wù)器返回的信息時，一般都使用 responseText 這個屬性。

　　7、請求狀態(tài)監(jiān)控

　　XMLHttpRequest 對象的 readyState 屬性返回請求的當(dāng)前狀態(tài)。當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)，每當(dāng) readyState 改變時，就會觸發(fā) onreadystatechange 事件，readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

　　XMLHttpRequest 對象的三個重要的屬性：

　　　　onreadystatechange：存儲函數(shù)(或函數(shù)名)，每當(dāng) readyState 屬性改變時，就會調(diào)用該函數(shù)。

　　　readyState：存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。

　　　　　　0：請求未初始化。還沒有調(diào)用 open() 方法。

　　　　　　1：服務(wù)器連接已建立，也就是載入。已調(diào)用 open() 方法，正在發(fā)送請求。

　　　　　　2：請求已接收，載入完成。open() 方法完成，已收到全部響應(yīng)內(nèi)容。

　　　　　　3：請求處理中，也叫解析。正在解析響應(yīng)內(nèi)容。

　　　　　　4：請求已完成，且響應(yīng)已就緒。響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了。

　　　　status：請求結(jié)果，也就是 HTTP 狀態(tài)碼。200：OK。404：未找到頁面。

　　在 onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準備時所執(zhí)行的任務(wù)。

　　當(dāng) readyState 等于 4 且狀態(tài)為 200 時，表示響應(yīng)已就緒：

oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
}

　　這里要注意： onreadystatechange 事件被觸發(fā) 5 次（0 - 4），對應(yīng)著 readyState 的每個變化。

　　如果網(wǎng)站中存在多個 AJAX 任務(wù)，那么就可以使用回調(diào)函數(shù)，回調(diào)函數(shù)是一種以參數(shù)形式傳遞給另一個函數(shù)的函數(shù)，應(yīng)該為創(chuàng)建 XMLHttpRequest 對象編寫一個標(biāo)準的函數(shù)，并為每個 AJAX 任務(wù)調(diào)用該函數(shù)。

　　該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件時執(zhí)行的任務(wù)（每次調(diào)用可能不盡相同）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<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 == && oAjax.status == ){ 
alert(oAjax.responseText); 
} 
}); 
} 
</script> 
</head> 
<body> 
<button type="button" onclick="myFunction()">讀取</button> 
</body> 
</html>

　　8、AJAX 原理

　　AJAX 的原理就跟現(xiàn)實生活中給朋友打電話是一樣一樣的，首先，你得有個手機，不然拿什么打，也就是要有一個設(shè)備，當(dāng)然現(xiàn)在那都是人手一部，這第一步就可以忽略了，然后就是撥號，所謂的撥號，就是把彼此的手機連接起來，建立一條通道，然后才能通信，如果接通了，就可以進行第三步了，那就是說，我們給別人打電話，肯定是要先說，然后再聽對方說，那么最后就是聽對方說，不可能是自己說完啪掛了，至少得聽對方說點啥，也就是有個響應(yīng)。

　　打電話需要4個步驟完成，其實我們在編寫 AJAX 時，也是需要4個步驟，首先，就得創(chuàng)建 AJAX 對象，有了這個對象之后，才能進行下面的操作，那么接下來要做的就是連接到服務(wù)器，就相當(dāng)于打電話撥號，連接到服務(wù)器之后，你就得主動告訴服務(wù)器你需要什么文件，不可能是服務(wù)器丟給你幾個文件，你自己選，要不是了再給你換一批，不可能這樣，再說那服務(wù)器都是給成千上萬人提供服務(wù)，不可能去跟你在那玩你猜我猜猜不猜，所以我們就得明確的告訴服務(wù)器我們要哪個文件，那么第三步就是發(fā)送請求，最后一步就是接收返回值，獲得服務(wù)器的響應(yīng)，也就是把我們需要的那個文件給我們傳回來。

　　我們平時都說 AJAX，其實這只是一個對外的稱呼，真正在瀏覽器內(nèi)部是通過 XMLHttpRequest 對象來完成 AJAX 請求的，這才是 AJAX 真正的對象。

　　下面我們看一下，根據(jù)這4個步驟，AJAX 代碼的具體編寫過程：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 原理</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
// 、設(shè)備 = 創(chuàng)建 AJAX 對象
var oAjax = new XMLHttpRequest();
// 創(chuàng)建好對象之后，就可以彈出來看一下。返回：[object XMLHttpRequest]
// IE 和 IE 返回：[object]
//alert(oAjax);
// 在剛創(chuàng)建 AJAX 對象，還沒調(diào)用 open() 方法，也就是請求未初始化時，彈出 readyState 狀態(tài)。
//alert(oAjax.readyState); // 返回：
// 、撥號 = 連接服務(wù)器
oAjax.open('GET', 'ajax/demo.txt?t=' + new Date().getTime(), true);
// 、說 = 發(fā)送請求
oAjax.send();
// 、聽 = 接收返回
oAjax.onreadystatechange = function (){
// oAjax.readyState 瀏覽器和服務(wù)器進行到哪一步了
if(oAjax.readyState == ) // 請求已完成
if(oAjax.status == ){ // 成功
// 如果成功了，則彈出服務(wù)器響應(yīng)的文本
alert('成功 ' + oAjax.responseText);
}
else{
// 如果失敗了，則彈出請求結(jié)果。
alert('失敗 ' + oAjax.status);
}
};
};
};
</script>
</head>
<body>
<button type="button" id="btn">讀取</button>
</body>
</html>

　　上面的代碼，在進行最后一步時，判斷瀏覽器和服務(wù)器進行到哪一步了，當(dāng) readyState 屬性狀態(tài)為4時，就是請求完成了，但是請求完成并不代表請求成功，如果讀取出錯了或者文件不存在等情況導(dǎo)致出錯了，那么也算是請求完成了，也就是不管讀取成功還是失敗，都算是請求完成了，所以需要進一步使用 status 屬性判斷，若為200，就是成功了。使用自定義的個人站點打開上面的 demo，點擊按鈕后，彈出成功和文本中的內(nèi)容，我們可以試著改變一下 URL，就是把他故意寫錯，再次點擊按鈕，則會彈出失敗和404，也就是未找到頁面。

　　如果每次我們按照這4個步驟編寫 AJAX 程序，是非常方便的，也容易理解，但是使用起來比較麻煩，所以我們可以把他封裝為一個函數(shù)，在使用時調(diào)用就好使多了。

function ajax(url, fnSucc, fnFaild){
var oAjax = new XMLHttpRequest();
oAjax.open('GET', url, true);
oAjax.send();
oAjax.onreadystatechange = function(){
if(oAjax.readyState == ){
if(oAjax.status == ){
fnSucc(oAjax.responseText);
}
else{
if(fnFaild){
fnFaild(oAjax.status);
}
}
}
};
}

　　上面封裝的 ajax 函數(shù)有三個參數(shù)，第一個參數(shù) url，是文件路徑，第二個參數(shù) fnSucc，當(dāng)每次成功的時候調(diào)用函數(shù)，第三個參數(shù) fnFaild，當(dāng)失敗時調(diào)用的函數(shù)。這里并不是任何情況下都需要失敗時執(zhí)行一個函數(shù)，所以需要做一個判斷，只有當(dāng) fnFaild 這個參數(shù)傳入進來，也就是定義了失敗時執(zhí)行的函數(shù)，那么這時候才去調(diào)用他。

　　可以在 www 根目錄中新建一個文件夾命名為 js，然后把上邊的代碼復(fù)制另存為 ajax.js，下面是封裝好之后的應(yīng)用：

<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
ajax('ajax/demo.txt?t=' + new Date().getTime(), function (str){
alert('成功 ' + str);
}, function (){
alert('失敗');
});
};
};
</script>

　　我們要從服務(wù)器讀取 demo.txt 這個文件，目的是為了獲取這個文件中的內(nèi)容，那么如何獲取返回的結(jié)果呢？當(dāng)成功的讀取信息后，要調(diào)用 fnSucc 這個參數(shù)，也就是成功后執(zhí)行的回調(diào)函數(shù)，他其實是有一個參數(shù)的 str，這個參數(shù)可以自定義，str 的作用就是把服務(wù)器返回給我們的內(nèi)容傳入進來，這個 str 參數(shù)就是 fnSucc(oAjax.responseText) 中傳過來的。

　　當(dāng)失敗的時候，調(diào)用 fnFaild 這個參數(shù)，也就是失敗后執(zhí)行的回調(diào)函數(shù)。那么這個失敗時調(diào)用函數(shù)也是有一個參數(shù)的，fnFaild(oAjax.status)，為了方便調(diào)試，我們也可以給他傳入一個參數(shù)進來，用來提示請求失敗的結(jié)果。在真正的網(wǎng)站中，當(dāng) AJAX 請求失敗時，也不可能彈一個 alert，這樣不太友好，所以可以自定義一些更加友好的方式來提示用戶。這里建議大家平時在調(diào)試 AJAX 程序時，一定要加上失敗時執(zhí)行的回調(diào)函數(shù)，否則如果失敗的話，那么可能沒有任何反應(yīng)。

　　9、AJAX 應(yīng)用

　　請求一個靜態(tài)的 TXT 文件，在了解了 AJAX 的原理后，很容易的就可以做到，但是在真正的網(wǎng)站中，這樣不會有太大的實際用途，前邊我們說 AJAX 是一種與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，那么既然稱之為藝術(shù)，因此我們需要使用 AJAX 去請求一些更實用、更復(fù)雜的東西，這樣才能完美的體現(xiàn)他存在的價值。比如說我們可以去請求動態(tài)數(shù)據(jù)，例如去請求一個裝著數(shù)據(jù)的 JSON 文件。

　　(1)、讀取數(shù)組

　　首先，新建一個 TXT 文件命名為 arr.txt，隨意存一個數(shù)組，比如[1,2,3,4,5,6]，放在之前的 ajax 文件夾下，然后就可以開始編寫程序了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 讀取數(shù)組</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){
// str 是服務(wù)器返回的內(nèi)容，彈出來看一下
//alert(str); 返回：[,,,,,]
// 那么再彈出內(nèi)容的長度
//alert(str.length); // 返回：
// 返回對象的類型：string
//alert(typeof str);
// eval() 函數(shù)用于把字符串轉(zhuǎn)換為 JS 代碼執(zhí)行
//alert(eval(str)); // 返回：,,,,,
// 現(xiàn)在可以返回內(nèi)容的長度
//alert(eval(str).length); // 返回：
// 可以把這個函數(shù)保存為變量，查看每項的值
var arr = eval(str);
alert(arr[]); // 返回：
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn">讀取</button>
</body>
</html>

　　上面的實例中，str 是服務(wù)器返回給我們的內(nèi)容，彈出來之后，是我們定義的數(shù)組，沒有問題，那么彈出數(shù)組的長度，卻返回 13，數(shù)組的長度本應(yīng)該是 6 啊，怎么會是 13 呢，我們再彈出這個對象的類型，結(jié)果返回 string，盡管他長的很像數(shù)組，但他確實是一個字符串，這是為什么呢？其實通過 AJAX 的方式讀取的任何對象都是以字符串形式存在的，那么這個字符串的長度就應(yīng)該是13，方括號加上標(biāo)點。如果要把一個字符串中存的數(shù)組提取出來，就要使用 eval(string) 函數(shù)，該函數(shù)可計算某個字符串，并把他作為 JavaScript 代碼來執(zhí)行，也就是可以把一個語句中的內(nèi)容解析為 JS 可以識別的語句，該方法只接受原始字符串作為參數(shù)，如果 string 參數(shù)不是原始字符串，那么該方法將不作任何改變地返回。那么使用該方法之后再次返回數(shù)組的內(nèi)容和長度，就沒有問題了。我們也可以把這個函數(shù)保存在一個變量中，來查看每項的值。雖然 eval() 的功能非常強大，但在實際使用中用到他的情況并不多。

　　(2)、讀取 JSON 數(shù)據(jù)

　　首先，還是需要新建一個 JSON 文件，可以命名為 json.json，可以隨意存入一個數(shù)組對象，比如[{a:9, b:6, c:15}, {a:5, b:7, c:12}]，然后放在 ajax 文件夾下，最后開始編寫程序。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 讀取數(shù)組</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){
// str 是服務(wù)器返回的內(nèi)容，彈出來看一下
//alert(str); 返回：[,,,,,]
// 那么再彈出內(nèi)容的長度
//alert(str.length); // 返回：
// 返回對象的類型：string
//alert(typeof str);
// eval() 函數(shù)用于把字符串轉(zhuǎn)換為 JS 代碼執(zhí)行
//alert(eval(str)); // 返回：,,,,,
// 現(xiàn)在可以返回內(nèi)容的長度
//alert(eval(str).length); // 返回：
// 可以把這個函數(shù)保存為變量，查看每項的值
var arr = eval(str);
alert(arr[]); // 返回：
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn">讀取</button>
</body>
</html>

　　上面的實例，使用 eval() 函數(shù)解析出來之后，還是一個數(shù)組，返回數(shù)組的第0個元素，也就是{a:9, b:6, c:15}，他還是一個 JSON 數(shù)據(jù)，所以返回 obj，那么再返回第0個元素中 a 的值，可以看到，使用方法和讀取數(shù)組的方法是一樣的。那如果 JSON 中保存的數(shù)據(jù)更復(fù)雜一些，比如是一組用戶信息，要如何去讀取，然后并以列表形式顯示在網(wǎng)頁中呢？

　　下面是 JSON 用戶信息數(shù)據(jù)，可以復(fù)制替換一下，這里在保存 JSON 時需要注意編碼格式，一旦文件中出現(xiàn)中文了，就必須保存為 UTF-8 的格式，為了方便區(qū)分，我們可以把這個文件命名為 date.json 。

[
{
"user": "小白",
"sex": "男",
"age": 
},
{
"user": "初夏",
"sex": "女",
"age": 
},
{
"user": "小明",
"sex": "男",
"age": 
},
{
"user": "靜靜",
"sex": "女",
"age": 
}
]

　　(3)、創(chuàng)建 DOM 元素顯示 JSON 數(shù)據(jù)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 讀取JSON</title>
<script src="js/ajax.js"></script>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('u');
oBtn.onclick = function (){
ajax('ajax/date.json?t=' + new Date().getTime(), function (str){
var arr = eval(str);
//循環(huán)遍歷返回的對象
for(var i=; i<arr.length; i++){
//每次循環(huán)的時候創(chuàng)建一個li元素
var oLi = document.createElement('li');
//向li元素插入內(nèi)容
oLi.innerHTML = '姓名：<strong>' + arr[i].user + '</strong> 性別：<span>' + arr[i].sex + '</span> 年齡：<span>' + arr[i].age + '</span>';
//將創(chuàng)建好的li元素插入到ul中
oUl.appendChild(oLi);
}
　　},function (){
　　alert('失敗');
});
};
};
</script>
</head>
<body>
<input id="btn" type="button" name="user" value="讀取">
<!-- 點擊按鈕生成json數(shù)據(jù)列表 -->
<ul id="u">
<!-- <li>姓名：<strong>小白</strong> 性別：<span>男</span> 年齡：<span></span></li> -->
</ul>
</body>
</html>

　　上面的代碼，寫起來也沒什么難度，都是一些基礎(chǔ)的知識，在瀏覽器打開自定義的個人站點，點擊讀取按鈕之后，JSON 文件中存的數(shù)據(jù)，就會以為列表的形式顯示在頁面上，這里只是簡單的做了一個效果，我們還可以給他定義樣式，或者可以創(chuàng)建一個表格，讓他更友好的顯示。

　　這里在網(wǎng)上看到了一個方法，在處理 AJAX 請求得到 JSON 數(shù)據(jù)響應(yīng)時，也就是服務(wù)器返回的 JSON 字符串，需要做一次對象化處理，可以不使用 eval() 方法，而是使用 new Function() 代替，新的 Function() 構(gòu)造就類似于 eval()，或者使用 jQuery 提供的 $.getJSON() 方法獲得服務(wù)器返回，那么就可以不使用 eval() 方法了。具體操作如下：

//var arr = eval(str);
var arr = (new Function('', 'return' + str)());

　　此時的 arr 就會被解析成一個 JSON 對象了，然后再使用循環(huán)遍歷，將數(shù)據(jù)插入到新建的 li 元素中。

　　10、AJAX 總結(jié)

　　我們只是重點講了一些 AJAX 最基礎(chǔ)的知識，到這里，就可以使用 AJAX 做一些基本的應(yīng)用了，但是 AJAX 不僅僅在于此，他有很多非常高級而且很實際的應(yīng)用，比如一些大型系統(tǒng)如何使用 AJAX 搭建，如何編寫一套完整的 AJAX 交互程序，還有跨域，還有JSONP等，要想真正的掌握 AJAX 這門藝術(shù)，我們的路還很長。

您可能感興趣的文章: