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、配置服務器
上海領思教育科技有限公司是一家致力于高素質軟件開發人才培養的公司，一方面解決企業招不到優秀人才 的困擾，同時為優秀的大學畢業生提供改變命運的機遇。公司自成立以來，一直堅持采用“好老師+好學生+ 好學習氣氛”的培養模式，已經培養了一批又一批的IT人才。
上海領思期待您的加盟。
地址：上海市浦東新區臨港新城水蕓路300號501室
電話：021-58010107
簡歷投遞：hr@lingsiedu.cn
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"
ServerNamewww.abc.com
ServerAliaswww.abc.comabc.com
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
www.abc.com為個人站點地址，可以自行定義。
最后，打開：C:\Windows\System32\drivers\etc\hosts 文件
添加：127.0.0.1www.abc.com
重新啟動WAMP。
在需要做測試時，將頁面保存在 D:/wamp/www 路徑下，文件名保存為 index.html，然后在瀏覽器地址欄輸入 abc.com 就可以打開剛才保存的頁面。
如果打開不成功，可百度搜索解決辦法，可能是80端口被占用了。
這里需要注意一下，放在服務器下的文件不能用中文命名。
3、AJAX 基礎
首先，我們先來看一個 AJAX 應用的實例：請求并顯示靜態 TXT 文件
AJAX 實例
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();
}
讀取
我們需要把頁面保存在 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;
// 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，而這正是我們需要的。
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 事件中的就緒狀態時執行的函數：
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;
