一、AJAX 簡介html

　　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 文件進行交互式通訊，也可用來與數據庫進行動態通訊，還可用於創造動態性更強的應用程序。最多見的應用就是用戶登陸，在登陸時，他就能夠判斷用戶輸入是否正確，若是輸入正確，就直接顯示用戶信息，若是輸入錯誤，提示錯誤信息，並不須要刷新頁面。

　　二、配置服務器

　　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 文件

　　在代碼最後添加以下內容：

DocumentRoot "D:/wamp/www"

ServerName www.abc.com

ServerAlias www.abc.com abc.com

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

　　這裏須要注意一下，放在服務器下的文件不能用中文命名。

　　三、AJAX 基礎

　　首先，咱們先來看一個 AJAX 應用的實例：請求並顯示靜態 TXT 文件

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

　　咱們須要把頁面保存在 WAMP 安裝目錄下 www 根目錄中，而且新建一個文件夾命名爲 ajax，用於存儲 TXT 文件，命名爲 demo.txt，文件中能夠隨意輸入點文字，用做演示。而後經過咱們自定義的我的站點，在瀏覽器中打開頁面，當點擊讀取按鈕後，彈出 TXT 文件中的內容。

　　經過上面的實例，咱們就能夠看到，實際上 AJAX 的做用就是從服務器上讀取一個文件，而且把這個文件內容返回給咱們，讓咱們處理。

　　這裏須要注意的是字符集編碼問題，在使用 AJAX 時，全部的文件都必須是統一的編碼格式，包括 HTML 、JS 文件和被讀的文件，好比都是 UTF-8 或者都是 GB2312，上面實例中用於演示的 TXT 文件，默認輸入英文，在保存時默認編碼爲 ANSI，若是咱們輸入的是漢字，在保存時不改成與頁面相同的編碼格式 UTF-8，那麼在點擊按鈕後，網頁上就顯示的亂碼，因此在保存時，必定要注意切換文件的編碼格式。

　　下面咱們來分析一下 AJAX 的工做原理。

　　四、XHR 建立對象

　　XHR 是 XMLHttpRequest 的簡寫，是 AJAX 的基礎，用於在後臺與服務器交換數據。

　　全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象，老版本的 IE 瀏覽器(IE6)則使用 ActiveXObject，爲了兼容各類瀏覽器，能夠作一個判斷，若是支持 XMLHttpRequest 對象，則建立該對象，若是不支持，則建立 ActiveXObject 。

var oAjax;

// IE+, Firefox, Chrome, Opera, Safari

if(window.XMLHttpRequest){

oAjax = new XMLHttpRequest();

}

// IE

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，而這正是咱們須要的。

　　五、鏈接服務器

　　將請求發送到服務器，咱們使用 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 事件中的就緒狀態時執行的函數：

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() 方法中的第三個參數改成 false 。

　　不推薦使用同步傳輸，可是對於一些小型的請求，也是能夠的。

　　這裏須要注意，JS 會等到服務器響應就緒才繼續執行，若是服務器繁忙或緩慢，應用程序會掛起或中止。

　　當使用 async = false 時，能夠不用編寫 onreadystatechange 函數，把代碼放到 send() 語句後面便可：

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

oAjax.send();

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

　　六、服務器響應

　　XMLHttpRequest 對象的 responseText 或 responseXML 屬性用於得到來自服務器的響應，也就是獲取從服務器返回的信息。

　　若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，就使用 responseXML 屬性。

　　若是來自服務器的響應並不是 XML，就使用 responseText 屬性，該屬性返回字符串形式的響應，所以能夠直接使用：

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

　　這裏說到 XML ，咱們就不得不提一下 AJAX 數據，也就是數據類型，數據類型能夠分爲不少種，好比中文、英文、數字等，咱們常用的 JSON，他就是一種輕量級的數據交換格式。XML 相對來講那就是一個古老的存在，基本上都是在一些老式的程序中使用，都會從 XML 中讀取數據，如今能夠說是要被淘汰了，如今的程序幾乎都是使用 JSON，由於同等數據量的狀況下，XML 要比 JSON 大不少，這樣會浪費帶寬，浪費服務器資源，因此在使用 AJAX 獲取從服務器返回的信息時，通常都使用 responseText 這個屬性。

　　七、請求狀態監控

　　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 == && oAjax.status == ){

alert(oAjax.responseText);

}

　　這裏要注意： onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每一個變化。

　　若是網站中存在多個 AJAX 任務，那麼就可使用回調函數，回調函數是一種以參數形式傳遞給另外一個函數的函數，應該爲建立 XMLHttpRequest 對象編寫一個標準的函數，併爲每一個 AJAX 任務調用該函數。

　　該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

　　八、AJAX 原理

　　AJAX 的原理就跟現實生活中給朋友打電話是同樣同樣的，首先，你得有個手機，否則拿什麼打，也就是要有一個設備，固然如今那都是人手一部，這第一步就能夠忽略了，而後就是撥號，所謂的撥號，就是把彼此的手機鏈接起來，創建一條通道，而後才能通訊，若是接通了，就能夠進行第三步了，那就是說，咱們給別人打電話，確定是要先說，而後再聽對方說，那麼最後就是聽對方說，不多是本身說完啪掛了，至少得聽對方說點啥，也就是有個響應。

　　打電話須要4個步驟完成，其實咱們在編寫 AJAX 時，也是須要4個步驟，首先，就得建立 AJAX 對象，有了這個對象以後，才能進行下面的操做，那麼接下來要作的就是鏈接到服務器，就至關於打電話撥號，鏈接到服務器以後，你就得主動告訴服務器你須要什麼文件，不多是服務器丟給你幾個文件，你本身選，要不是了再給你換一批，不可能這樣，再說那服務器都是給成千上萬人提供服務，不可能去跟你在那玩你猜我猜猜不猜，因此咱們就得明確的告訴服務器咱們要哪一個文件，那麼第三步就是發送請求，最後一步就是接收返回值，得到服務器的響應，也就是把咱們須要的那個文件給咱們傳回來。

　　咱們平時都說 AJAX，其實這只是一個對外的稱呼，真正在瀏覽器內部是經過 XMLHttpRequest 對象來完成 AJAX 請求的，這纔是 AJAX 真正的對象。

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

<!DOCTYPE html>

<html>

<head>

window.onload = function (){

var oBtn = document.getElementById('btn');

oBtn.onclick = function (){

// 、設備 = 建立 AJAX 對象

var oAjax = new XMLHttpRequest();

// 建立好對象以後，就能夠彈出來看一下。返回：[object XMLHttpRequest]

// IE 和 IE 返回：[object]

//alert(oAjax);

// 在剛建立 AJAX 對象，還沒調用 open() 方法，也就是請求未初始化時，彈出 readyState 狀態。

//alert(oAjax.readyState); // 返回：

// 、撥號 = 鏈接服務器

oAjax.open('GET', 'ajax/demo.txt?t=' + new Date().getTime(), true);

// 、說 = 發送請求

oAjax.send();

// 、聽 = 接收返回

oAjax.onreadystatechange = function (){

// oAjax.readyState 瀏覽器和服務器進行到哪一步了

if(oAjax.readyState == ) // 請求已完成

if(oAjax.status == ){ // 成功

// 若是成功了，則彈出服務器響應的文本

alert('成功 ' + oAjax.responseText);

}

else{

// 若是失敗了，則彈出請求結果。

alert('失敗 ' + oAjax.status);

}

};

</script>

</head>

<body>

</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 == ){

if(oAjax.status == ){

fnSucc(oAjax.responseText);

}

else{

if(fnFaild){

fnFaild(oAjax.status);

}

};

}

　　上面封裝的 ajax 函數有三個參數，第一個參數 url，是文件路徑，第二個參數 fnSucc，當每次成功的時候調用函數，第三個參數 fnFaild，當失敗時調用的函數。這裏並非任何狀況下都須要失敗時執行一個函數，因此須要作一個判斷，只有當 fnFaild 這個參數傳入進來，也就是定義了失敗時執行的函數，那麼這時候纔去調用他。

　　能夠在 www 根目錄中新建一個文件夾命名爲 js，而後把上邊的代碼複製另存爲 ajax.js，下面是封裝好以後的應用：

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>

　　咱們要從服務器讀取 demo.txt 這個文件，目的是爲了獲取這個文件中的內容，那麼如何獲取返回的結果呢？當成功的讀取信息後，要調用 fnSucc 這個參數，也就是成功後執行的回調函數，他實際上是有一個參數的 str，這個參數能夠自定義，str 的做用就是把服務器返回給咱們的內容傳入進來，這個 str 參數就是 fnSucc(oAjax.responseText) 中傳過來的。

　　當失敗的時候，調用 fnFaild 這個參數，也就是失敗後執行的回調函數。那麼這個失敗時調用函數也是有一個參數的，fnFaild(oAjax.status)，爲了方便調試，咱們也能夠給他傳入一個參數進來，用來提示請求失敗的結果。在真正的網站中，當 AJAX 請求失敗時，也不可能彈一個 alert，這樣不太友好，因此能夠自定義一些更加友好的方式來提示用戶。這裏建議你們平時在調試 AJAX 程序時，必定要加上失敗時執行的回調函數，不然若是失敗的話，那麼可能沒有任何反應。

　　九、AJAX 應用

　　請求一個靜態的 TXT 文件，在瞭解了 AJAX 的原理後，很容易的就能夠作到，可是在真正的網站中，這樣不會有太大的實際用途，前邊咱們說 AJAX 是一種與服務器交換數據並更新部分網頁的藝術，那麼既然稱之爲藝術，所以咱們須要使用 AJAX 去請求一些更實用、更復雜的東西，這樣才能完美的體現他存在的價值。好比說咱們能夠去請求動態數據，例如去請求一個裝着數據的 JSON 文件。

　　(1)、讀取數組

　　首先，新建一個 TXT 文件命名爲 arr.txt，隨意存一個數組，好比[1,2,3,4,5,6]，放在以前的 ajax 文件夾下，而後就能夠開始編寫程序了。

<!DOCTYPE html>

<html>

<head>

window.onload = function (){

var oBtn = document.getElementById('btn');

oBtn.onclick = function (){

ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){

// str 是服務器返回的內容，彈出來看一下

//alert(str); 返回：[,,,,,]

// 那麼再彈出內容的長度

//alert(str.length); // 返回：

// 返回對象的類型：string

//alert(typeof str);

// eval() 函數用於把字符串轉換爲 JS 代碼執行

//alert(eval(str)); // 返回：,,,,,

// 如今能夠返回內容的長度

//alert(eval(str).length); // 返回：

// 能夠把這個函數保存爲變量，查看每項的值

var arr = eval(str);

alert(arr[]); // 返回：

}, function (){

alert('失敗');

});

};

</script>

</head>

<body>

</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>

window.onload = function (){

var oBtn = document.getElementById('btn');

oBtn.onclick = function (){

ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){

// str 是服務器返回的內容，彈出來看一下

//alert(str); 返回：[,,,,,]

// 那麼再彈出內容的長度

//alert(str.length); // 返回：

// 返回對象的類型：string

//alert(typeof str);

// eval() 函數用於把字符串轉換爲 JS 代碼執行

//alert(eval(str)); // 返回：,,,,,

// 如今能夠返回內容的長度

//alert(eval(str).length); // 返回：

// 能夠把這個函數保存爲變量，查看每項的值

var arr = eval(str);

alert(arr[]); // 返回：

}, function (){

alert('失敗');

});

};

</script>

</head>

<body>

</body>

</html>

　　上面的實例，使用 eval() 函數解析出來以後，仍是一個數組，返回數組的第0個元素，也就是{a:9, b:6, c:15}，他仍是一個 JSON 數據，因此返回 obj，那麼再返回第0個元素中 a 的值，能夠看到，使用方法和讀取數組的方法是同樣的。那若是 JSON 中保存的數據更復雜一些，好比是一組用戶信息，要如何去讀取，而後並以列表形式顯示在網頁中呢？

　　下面是 JSON 用戶信息數據，能夠複製替換一下，這裏在保存 JSON 時須要注意編碼格式，一旦文件中出現中文了，就必須保存爲 UTF-8 的格式，爲了方便區分，咱們能夠把這個文件命名爲 date.json 。

[

{

"user": "小白",

"sex": "男",

"age":

{

"user": "初夏",

"sex": "女",

"age":

{

"user": "小明",

"sex": "男",

"age":

{

"user": "靜靜",

"sex": "女",

"age":

}

]

　　(3)、建立 DOM 元素顯示 JSON 數據

<!DOCTYPE html>

<html>

<head>

<title>AJAX 讀取JSON</title>

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);

//循環遍歷返回的對象

for(var i=; 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>

</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 元素中。

　　十、AJAX 總結

　　咱們只是重點講了一些 AJAX 最基礎的知識，到這裏，就可使用 AJAX 作一些基本的應用了，可是 AJAX 不只僅在於此，他有不少很是高級並且很實際的應用，好比一些大型系統如何使用 AJAX 搭建，如何編寫一套完整的 AJAX 交互程序，還有跨域，還有JSONP等，要想真正的掌握 AJAX 這門藝術，咱們的路還很長。

$.ajax()方法詳解

1.url:
要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。前端

2.type:
要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也可使用，但僅部分瀏覽器支持。ajax

3.timeout:
要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。sql

4.async:
要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。數據庫

5.cache:
要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。apache

6.data:
要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。編程

7.dataType:
要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。
text：返回純文本字符串。json

8.beforeSend：
要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。
            function(XMLHttpRequest){
               this;   //調用本次ajax請求時傳遞的options參數
            }
9.complete：
要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //調用本次ajax請求時傳遞的options參數
          }跨域

10.success：要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。
         (1)由服務器返回，並根據dataType參數進行處理後的數據。
         (2)描述狀態的字符串。
         function(data, textStatus){
            //data多是xmlDoc、jsonObj、html、text等等
            this; //調用本次ajax請求時傳遞的options參數
         }

11.error:
要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //一般狀況下textStatus和errorThrown只有其中一個包含信息
          this;   //調用本次ajax請求時傳遞的options參數
       }

12.contentType：
要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

14.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

15.global：
要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。

16.ifModified：
要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp：
要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

18.username：
要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。

19.password：
要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。

20.processData：
要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。

21.scriptCharset：
要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用。

案例代碼：

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText裏面的全部內容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

1.$是什麼 2.阿賈克斯是什麼，怎麼建立和優勢

$.ajax()方法詳解