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

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

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

　　1、AJAX 簡(jiǎn)介

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

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

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

　　　?、?、JavaScript/DOM (信息顯示/交互)

　　　?、邸SS (給數(shù)據(jù)定義樣式)

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

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

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

　　2、配置服務(wù)器

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

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

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

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

#Include conf/extra/httpd-manual.conf

　　將前面的井號(hào)去掉。

　　然后，再打開(kāi)：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 為個(gè)人站點(diǎn)地址，可以自行定義。

　　最后，打開(kāi)：C:\Windows\System32\drivers\etc\hosts 文件

　　添加：127.0.0.1 www.abc.com

　　重新啟動(dòng)WAMP。

　　在需要做測(cè)試時(shí)，將頁(yè)面保存在 D:/wamp/www 路徑下，文件名保存為 index.html，然后在瀏覽器地址欄輸入 abc.com 就可以打開(kāi)剛才保存的頁(yè)面。

　　如果打開(kāi)不成功，可百度搜索解決辦法，可能是80端口被占用了。

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

　　3、AJAX 基礎(chǔ)

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 實(shí)例</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>

　　我們需要把頁(yè)面保存在 WAMP 安裝目錄下 www 根目錄中，并且新建一個(gè)文件夾命名為 ajax，用于存儲(chǔ) TXT 文件，命名為 demo.txt，文件中可以隨意輸入點(diǎn)文字，用作演示。然后通過(guò)我們自定義的個(gè)人站點(diǎn)，在瀏覽器中打開(kāi)頁(yè)面，當(dāng)點(diǎn)擊讀取按鈕后，彈出 TXT 文件中的內(nèi)容。

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

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

　　下面我們來(lái)分析一下 AJAX 的工作原理。

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

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

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

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

　　因?yàn)樗鞋F(xiàn)代瀏覽器和 IE 高版本瀏覽器都支持 XMLHttpRequest 對(duì)象，所以在創(chuàng)建對(duì)象時(shí)，也就不用做兼容性處理了，這里只是了解一下。在 IE 瀏覽器中 ActiveX 是插件的意思，也就是說(shuō) IE6 中的 AJAX 是通過(guò)一個(gè)插件來(lái)完成的，雖說(shuō)是插件，但是在 IE6 瀏覽器中已經(jīng)默認(rèn)安裝了。

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

　　5、連接服務(wù)器

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

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

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

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

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

　　下面來(lái)看兩個(gè)問(wèn)題。

　　(1)、GET 還是 POST？

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

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

　　但是，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

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

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

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

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

　　GET 和 POST 的區(qū)別：

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

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

　　緩存：GET 有緩存，POST 沒(méi)有緩存。

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

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

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

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

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

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

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

　　(2)、true 還是 false？

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

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

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

　　當(dāng)使用異步時(shí)，也就是 async = true 時(shí)，必需規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(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，請(qǐng)將 open() 方法中的第三個(gè)參數(shù)改為 false 。

　　不推薦使用同步傳輸，但是對(duì)于一些小型的請(qǐng)求，也是可以的。

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

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

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

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

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

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

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

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

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

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

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

　　XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：

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

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

　　　　　　0：請(qǐng)求未初始化。還沒(méi)有調(diào)用 open() 方法。

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 實(shí)例</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í)生活中給朋友打電話(huà)是一樣一樣的，首先，你得有個(gè)手機(jī)，不然拿什么打，也就是要有一個(gè)設(shè)備，當(dāng)然現(xiàn)在那都是人手一部，這第一步就可以忽略了，然后就是撥號(hào)，所謂的撥號(hào)，就是把彼此的手機(jī)連接起來(lái)，建立一條通道，然后才能通信，如果接通了，就可以進(jìn)行第三步了，那就是說(shuō)，我們給別人打電話(huà)，肯定是要先說(shuō)，然后再聽(tīng)對(duì)方說(shuō)，那么最后就是聽(tīng)對(duì)方說(shuō)，不可能是自己說(shuō)完啪掛了，至少得聽(tīng)對(duì)方說(shuō)點(diǎn)啥，也就是有個(gè)響應(yīng)。

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

　　我們平時(shí)都說(shuō) AJAX，其實(shí)這只是一個(gè)對(duì)外的稱(chēng)呼，真正在瀏覽器內(nèi)部是通過(guò) XMLHttpRequest 對(duì)象來(lái)完成 AJAX 請(qǐng)求的，這才是 AJAX 真正的對(duì)象。

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

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

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

　　如果每次我們按照這4個(gè)步驟編寫(xiě) AJAX 程序，是非常方便的，也容易理解，但是使用起來(lái)比較麻煩，所以我們可以把他封裝為一個(gè)函數(shù)，在使用時(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ù)有三個(gè)參數(shù)，第一個(gè)參數(shù) url，是文件路徑，第二個(gè)參數(shù) fnSucc，當(dāng)每次成功的時(shí)候調(diào)用函數(shù)，第三個(gè)參數(shù) fnFaild，當(dāng)失敗時(shí)調(diào)用的函數(shù)。這里并不是任何情況下都需要失敗時(shí)執(zhí)行一個(gè)函數(shù)，所以需要做一個(gè)判斷，只有當(dāng) fnFaild 這個(gè)參數(shù)傳入進(jìn)來(lái)，也就是定義了失敗時(shí)執(zhí)行的函數(shù)，那么這時(shí)候才去調(diào)用他。

　　可以在 www 根目錄中新建一個(gè)文件夾命名為 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 這個(gè)文件，目的是為了獲取這個(gè)文件中的內(nèi)容，那么如何獲取返回的結(jié)果呢？當(dāng)成功的讀取信息后，要調(diào)用 fnSucc 這個(gè)參數(shù)，也就是成功后執(zhí)行的回調(diào)函數(shù)，他其實(shí)是有一個(gè)參數(shù)的 str，這個(gè)參數(shù)可以自定義，str 的作用就是把服務(wù)器返回給我們的內(nèi)容傳入進(jìn)來(lái)，這個(gè) str 參數(shù)就是 fnSucc(oAjax.responseText) 中傳過(guò)來(lái)的。

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

　　9、AJAX 應(yīng)用

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

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

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

<!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)容，彈出來(lái)看一下
//alert(str); 返回：[,,,,,]
// 那么再?gòu)棾鰞?nèi)容的長(zhǎng)度
//alert(str.length); // 返回：
// 返回對(duì)象的類(lèi)型：string
//alert(typeof str);
// eval() 函數(shù)用于把字符串轉(zhuǎn)換為 JS 代碼執(zhí)行
//alert(eval(str)); // 返回：,,,,,
// 現(xiàn)在可以返回內(nèi)容的長(zhǎng)度
//alert(eval(str).length); // 返回：
// 可以把這個(gè)函數(shù)保存為變量，查看每項(xiàng)的值
var arr = eval(str);
alert(arr[]); // 返回：
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn">讀取</button>
</body>
</html>

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

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

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

<!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)容，彈出來(lái)看一下
//alert(str); 返回：[,,,,,]
// 那么再?gòu)棾鰞?nèi)容的長(zhǎng)度
//alert(str.length); // 返回：
// 返回對(duì)象的類(lèi)型：string
//alert(typeof str);
// eval() 函數(shù)用于把字符串轉(zhuǎn)換為 JS 代碼執(zhí)行
//alert(eval(str)); // 返回：,,,,,
// 現(xiàn)在可以返回內(nèi)容的長(zhǎng)度
//alert(eval(str).length); // 返回：
// 可以把這個(gè)函數(shù)保存為變量，查看每項(xiàng)的值
var arr = eval(str);
alert(arr[]); // 返回：
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<button type="button" id="btn">讀取</button>
</body>
</html>

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

　　下面是 JSON 用戶(hù)信息數(shù)據(jù)，可以復(fù)制替換一下，這里在保存 JSON 時(shí)需要注意編碼格式，一旦文件中出現(xiàn)中文了，就必須保存為 UTF-8 的格式，為了方便區(qū)分，我們可以把這個(gè)文件命名為 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)遍歷返回的對(duì)象
for(var i=; i<arr.length; i++){
//每次循環(huán)的時(shí)候創(chuàng)建一個(gè)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="讀取">
<!-- 點(diǎn)擊按鈕生成json數(shù)據(jù)列表 -->
<ul id="u">
<!-- <li>姓名：<strong>小白</strong> 性別：<span>男</span> 年齡：<span></span></li> -->
</ul>
</body>
</html>

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

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

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

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

　　10、AJAX 總結(jié)

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

您可能感興趣的文章: