AJAX原因javascript
再次談起這個話題，我深深的記得就在前幾年，AJAX被炒的如火如荼，就好像不懂AJAX，就不會Web開發同樣。要理解AJAX爲何會出現，就要先了解Web開發面臨的問題。html
咱們先來回憶一下Web頁面的申請過程，這個我們在第一篇中就介紹過了：Web頁面開發就是在無鏈接和無狀態的HTTP協議上管理頁面的狀態。 每次申請頁面的時候，服務器都會返回完整的HTML文本(固然還有其餘的文本文件)，瀏覽器就負責解析這個文本並在瀏覽器中顯示。前端
在這個過程當中，無論當前頁面的內容是否是都變化了，服務器都會從新給瀏覽器重發一份，這個操做對於本來就比較脆弱的網絡來講，實在是比較耗時， 比較低效，雖然時至今日，這種方式仍是不少網站的工做模式，可是還有有不少玩家開始思考如何去優化這個過程。在編程語言的發展過程當中，異步是解決用戶響應 問題的不二法寶，因此異步的申請與局部更新的方案就產生了，這個就是AJAX。java
問題的本質 - 數據交互技術web
在詳細總結Ajax的實踐以前，咱們先來深刻的分析一下問題的核心。ajax
任何的軟件程序基本上均可以分爲界面(UI)，邏輯，數據3個部分，Web程序也不例外，在Web程序中，JavaScript承擔了完成邏輯 功能的任務，也就是和後臺數據打交道的任務，不論是用戶輸入，仍是獲取數據，最終都表現爲使用JavaScript完成與服務器的交互，這樣的操做說白了 就是前端界面與後端數據之間的數據交互問題。數據庫
數據交互的方式基本上也就是兩種方式：同步和異步，前者會等待數據操做結束後繼續執行下面的程序，後者不會等待數據操做完成，而是先執行下面的程序，在數據操做完成後再經過回調函數完成須要執行的一些工做。編程
而在執行數據交互的過程當中，先後端也能夠採起不一樣的聯繫方式：持續鏈接和按需鏈接，前者先後端一直保持鏈接，後者先後端只在須要的時候鏈接一下。後端
對於傳統的桌面程序，因爲前端與後端共存與一臺機器上，因此訪問比較方便，一般採用持續鏈接和同步訪問的方式，而對於一些大數據量的操做才採用異步訪問的方式(提升界面的可響應性)。瀏覽器
對於Web程序而言，因爲先後端一般不在一臺機器上，並且最初網絡環境並非太好，因此最初採用的是按需鏈接(申請頁面的時候創建鏈接)和同步 的方式(數據接收完畢後更新整個頁面)。可是隨着Web程序需求(功能性和非功能性需求)的不斷提升，網絡軟硬件技術的不斷髮展，數據訪問方式就理所固然 的出現了異步的方式和局部更新，這就是AJAX技術。而隨着HTML5技術的逐漸發展，持續鏈接也成爲了一種可能，這就是WebSocket技術，這個在 前面的HTML5系列文章中已經總結過了。
從上面的數據交互技術發展的核心脈絡中咱們能夠更清楚的理解AJAX所處的歷史地位和積極意義，下面咱們就詳細的看一下AJAX技術。
AJAX本質
AJAX = Asynchronous JavaScript and XML (異步的 JavaScript 和 XML)
AJAX就是在客戶端申請頁面時，在不從新加載整個頁面的狀況下，只對網頁的局部進行更新的技術。使用了AJAX後，瀏覽器與服務器只會進行少許數據交換，這樣頁面的執行效率就會大幅提高。
AJAX實現的核心有兩點：
1. 異步申請數據
2. 響應數據，更新局部頁面
更新頁面比較簡單，前面DOM部分已經總結過常見的CRUD(建立，檢索，更新，刪除)操做了。那個剩下的的就是如何異步的申請和響應服務端的數據了，這個是經過AJAX的核心對象XMLHttpRequest來完成的。
總的來講，XMLHttpRequest對象很簡單，下面來看個簡單的例子：
<html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url) { xmlhttp = null; // 1. 建立XMLHttpRequest對象 if (window.XMLHttpRequest){ // 適用於瀏覽器IE7, Firefox, Opera, Chrome等 xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // 適用於瀏覽器 IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp != null) { // 2. 掛接響應函數/回調函數 xmlhttp.onreadystatechange = stateChange; // 3. 設置申請方法 xmlhttp.open("GET",url,true); // 4. 發送申請 xmlhttp.send(); } else { alert("你的瀏覽器不支持XMLHTTP"); } } function stateChange() { // readyState = 4(loaded)而且status = 200(OK)表明申請數據成功 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 獲取響應的狀態，返回的數據(XML格式) document.getElementById('A1').innerHTML = xmlhttp.status; document.getElementById('A2').innerHTML = xmlhttp.statusText; document.getElementById('A3').innerHTML = xmlhttp.responseText; } else { alert("獲取XML時出錯:" + xmlhttp.statusText); } } </script> </head> <body> <h2>使用HttpRequest對象</h2> <p><b>狀態:</b> <span id="A1"></span> </p> <p><b>狀態文本:</b> <span id="A2"></span> </p> <p><b>返回的數據:</b> <br /><span id="A3"></span> </p> <button onclick="loadXMLDoc('/example/xmle/note.xml')">獲取XML</button> </body> </html>
直接運行這個例子是不行的，須要本身配置個服務器，這個例子來源於W3C，地址：http://www.w3school.com.cn/tiy/t.asp?f=ajax_httprequest_js。我只不過是加了一下注釋，下面就是例子的一些說明。
1. 建立XMLHttpRequest對象
兼容性問題注意一下便可。
2. 向服務器發送請求
申請時咱們使用了XMLHttpRequest對象的open()和send()方法。
open方法的第一個參數指定了請求的方式是GET或者是POST。與POST相比，GET更簡單也更快，而且在大部分狀況下都能用。
然而，在如下狀況中，則須要使用POST請求：
1).沒法使用緩存文件(更新服務器上的文件或數據庫)
2).向服務器發送大量數據(POST沒有數據尺寸限制)
3).發送包含未知字符的用戶輸入時，POST比GET更穩定也更可靠(其實仍是考慮數據尺寸的限制問題)
其實說白了POST主要用於攜帶數據更新服務器而後返回。
open方法的第二個參數是申請的數據url，這個沒什麼好說的。
open方法的第三個參數是指定申請時異步(true)仍是同步(false)，這個其實不用考慮，估計沒什麼人使用同步方式。若是有些兄弟想 試驗一下同步的方式的話，也能夠，不過響應的函數就不用掛到onreadystatechange上了，而是直接在send方法後面寫上更新HTML的代 碼便可。
send方法發送請求，這個方法能夠攜帶一個字符串做爲參數，這個參數存儲了發送給服務器的數據，簡單的申請都不用給服務器發送數據，因此用法都很簡單：
xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
若是要像HTML表單那樣POST數據的話，通常還要設置HTTP頭，因此複雜一點的POST申請的代碼大概像是這樣：
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
這實際上是更新服務器數據的操做。
3. 響應服務器端的數據
這個響應函數對於同步的申請來講很簡單，直接把代碼寫到send方法的後面就能夠了。異步申請的話要掛接到onreadystatechange事件上。
在回調函數中，咱們首先須要判斷服務器的處理狀態，這就是經過判斷例子中的readyState和status來實現的。只有 readyState等於4而且status等於200的時候才代表服務器正確的返回了申請的數據，這個時候咱們經過responseText或者 responseXML獲取到字符串格式或者XML格式的數據，而後解析處理就好了。
再論JSON與XML
在AJAX中，名字中的異步XML確實是至關驚豔，在回調函數中，直接可使用responseXML訪問XML格式的內容。不過鑑於在 JavaScript中解析XML實在有點不是太方便(感興趣的同窗百度一把就知道了)，至少是比解析JSON要麻煩一點，因此就像在前面咱們討論的那 樣：WEB開發中，JSON是王道。雖然XML是AJAX內置的一種方式，並且現實世界中確實也存在不少構建在XML或者SOAP(一種輕量的、簡單的、 基於XML的協議)之上的服務方式，可是除了這些必需要使用XML的服務外，使用JSON確實能帶來很多的方便。
REST思想
每次看到介紹AJAX的文章，我總能在第一時間想到REST架構。
REST是英文Representational State Transfer的縮寫，中文翻譯爲「表述性狀態轉移」。這個又是當前煊赫一時的一個概念。這種思想的核心就是使用單一的URI標示符去標識服務器上的任 何的資源，客戶端使用URI去對資源進行CRUD操做。這種想法與AJAX的作法配合起來(基於REST的Web服務及基於 Ajax的客戶端)能夠說是十分融洽。關於REST思想，後面會專門總結它，感興趣的同窗能夠先看看這個連接中的例子：http://www.ibm.com/developerworks/cn/webservices/ws-restajax/。
單頁面的思想
單頁面就是隻有一個頁面的Web程序，全部的操做都在同一個頁面中完成，全部的數據交互都經過AJAX或者WebSocket完成，使用這些程 序的感受就如同使用桌面程序同樣。單頁面程序開發也是近年來比較火的一種開發方式，不少的公司都針對這種方式開發了相應的類庫，好比谷歌的 AngularJS，AJAX是構建單頁面程序的核心技術之一。
單頁面技術與REST模式並非萬能的，它們與AJAX緊密相關，可是又有不少的實際問題沒有解決，因此大多時候，你們仍是習慣把它們與別的技術，例如MVC結合起來使用。
參考資料：
出處：http://www.cnblogs.com/dxy1982/