假設你已經會了一些后端開發的技術，我在這篇文章中會用 PHP 作為后端服務例子的開發語言，如果你不懂后端開發或 PHP 也沒關系，后端的代碼非常簡單，你能大致明白或者猜出這些后臺程序的功能就好，之后我可能還會更新一些 PHP 開發入門相關的文章。這篇文章我們就重點來看看 AJAX 到底是個啥，我想現在所有的 Web 開發項目 AJAX 都是不可或缺的！
Web 開發系列 #1：
Web 開發系列 #2：AJAX 動態頁面更新技術
那么 AJAX 到底是什么呢？它是 And XML 的縮寫，沒有中文翻譯，意思就是異步的 和 XML 的意思。先學一下發音，發音為：美 [?e?d??ks] 英 [?e??d??ks]，有的程序員也把它讀成：【阿賈克斯】的 ，嗯。它主要的作用就是：讓我們能夠在“向服務器發送請求和從服務器接收返回結果”的過程中不需要刷新整個網頁，that’s it。現在，它是一個非常牛逼的前端技術，基本上所有需要數據傳輸的交互體驗都靠它了。更牛逼的是我們再也不需要 XML 了，Linus ，Linux 的締造者已經說了：“XML is crap. . There are no . XML is nasty to parse for , and it’s a to parse even for . There’s just no for that crap to exist.”（通俗的說就是：“XML 已經廢了，它不僅不易于人類閱讀，甚至對于計算機來說解析它也是個災難。這種可怕的東西沒有任何存在的理由”）。所以我們現在要使用的 AJAX 實際上是它的另外一種形式，叫做 AJAJ，最后一個 J 代表的是 JSON（ ）。不過由于歷史原因大家還是會把它叫做 AJAX，可能有些讓人費解——，接受就好。哦對了，它也不一定必須是異步的…哈哈哈！
對象和 JSON
萬事開頭難，我們先從 的對象說起，看看它們到底長成什么樣子，是個什么鬼。然后 JSON 是什么我想自然而然就會清楚了。其實 中的對象（）和其它編程語言中的對象所完成的工作大同小異： 對象就是用來包裝一些功能的封裝器。然而理解 對象的難點通常是在于：“任何東西可以是任何東西，然后接著還可以成為任何其它的東西”…我都不知道怎么贊這個“混亂”而美好的語言，我來給你看一個例子。
現在你可能會有些疑惑（對于 Java 和 .NET 程序員來說），這樣就行了嗎？難道說 不需要聲明類型、也不需要更多的儀式性的方法來創建對象嗎？不需要，因為 自己實現了構造函數（）。這篇文章的重點不放在 對象的工作原理，我更想說說上面代碼中我用來描述對象的第二種方式。請注意：
當然，對象也可以包含其它的對象。
我之前搞 C# 比較多點兒，所以自然而然聯想到，你可以像使用名稱空間（）一樣來使用 里的對象，這樣就可以保持 “全局名稱空間（ ）” 的整潔，還可以盡可能的避免各種不同代碼庫之間的命名沖突。另外，對象也經常會被用來作為傳遞給 的參數選項（就是那些 ），然后你可以檢查這個對象中的某些參數或方法是否存在，它們的值是什么…等等，最后根據具體情況來執行不同的代碼邏輯。我們稍后會看到這種用法的例子。
那么我們現在再來看看 JSON 是什么呢？它也就是一些文本，而且表示方法和我們剛剛看到的 對象幾乎一樣。那我們還是來看一些例子：
這個看起來是不是已經很熟悉了呢？如果拿 XML 來進行比較的話，JSON 的表示方法更加緊湊，可以讓你在互聯網上傳輸數據的時候節省寶貴的帶寬和流量（￥￥￥）！
如何發起 AJAX 請求
我們直接看 AJAX 的例子。我們先從一個非常簡單的同步請求開始：當頁面開始加載（Load）的時候發起請求，然后從服務器得到一段僅是純文本的返回值（先不考慮 XML 或 JSON）。你會發現 AJAX 請求并不會刷新頁面，因為如果它會讓頁面刷新的話，頁面將永遠不停的刷新下去（因為請求是在頁面進行加載的時候發起的）。另外，你可以通過瀏覽器的開發者工具（ Tools）來跟蹤你的瀏覽器發出的所有請求（IE，和 都有這個功能網頁打不開顯示404要怎么處理，打開它們的開發者工具 -> 點擊 標簽頁，你就可以看到所有瀏覽器發出的請求了），從而觀察你的代碼讓瀏覽器發出的請求次數到底是多少。在下面這個例子中，我用 來獲取頁面加載事件，然后在事件的處理函數中發起 AJAX 請求并顯示請求的返回結果，HTML 文件代碼如下（文件命名為 Ajax.html）：
然后是 代碼（文件命名為 Ajax.js）：
最后是用 PHP 實現的后臺服務程序代碼（文件命名為 Ajax.php）：
所有的這些文件都放到 XAMPP 安裝路徑下的 文件夾中（這是 的部署方法，如果你是 Mac OS X，放到 /// 默認的 的站點根目錄），然后就可以用 /Ajax.html 來訪問到你的頁面（注意所有的文件都用 ’Ajax‘ 來命名的）。我們在上面的 代碼中使用了一個 對象，它是 AJAX 請求的關鍵所在：
所以讓我們將請求改為異步的方式（），這樣的話用戶就可以 “在頁面從服務器下載數據的同時” 繼續與頁面進行交互（滾動頁面、點擊某個按鈕等等）網頁打不開顯示404要怎么處理，異步請求實際上并不難，我們只需要將上面的 代碼修改成如下方式：
所以我給 指定了一個事件處理程序，當 ajax 對象的狀態發生變化時會自動調用它。狀態 4 表示 ajax 對象已經完成了請求，并且我們能夠獲得服務器返回的結果了。
使用 的時候我們可以設置很多靈活的選項，但是我們在這里就不深入的討論了，大家可以去查看 文檔，然后自己試著玩兒玩兒。接下來，我們研究研究如何用 來發送 AJAX 請求。
使用 發送 AJAX 請求
你可能會想有什么事情是 不能做的嘛？實際上有很多事情你是不會想用 來實現的，再說 本來就是一個基于 開發出來的類庫，而不是一個語言，當然會有很多它做不了的事情——但是 AJAX 不屬于， 可以讓 AJAX 變得非常簡單，我們只需要將 代碼修改為：
還記得我前面提到你可以用對象來設定參數選項嗎？這就是一個典型的例子，我們傳遞了一個對象給 $.ajax 方法，指定了 type，url 和請求完成時應當調用的 （jqXHR 代表 內部在發起請求時用的 對象，jqXHR 就是一個參數名稱，你可以隨便給它起什么名字）。我們還可以通過這個對象設置更多的選項，目前的這個設置只是可以完成之前代碼相同的功能。
.ajax 方法實際上可以做非常多的事情！接下來我們來看看如何給它傳遞更多的參數，并把結果顯示在頁面上。
然后需要修改 PHP 代碼：
所以這是不是看起來很簡單，在 代碼中，我們傳入了一個具有 和 song 屬性的 對象，然后這個對象中的屬性被自動的轉換成了 PHP 中的查詢參數！那么反方向是如何工作的呢？這就要靠 JSON 來發揮作用了！JSON 是 的縮寫，所以 定能通過它來創建我們在 代碼中實際可使用的對象。那么我們再來修改一下我們的 PHP 代碼，讓它能夠返回 JSON 數據。
上面這段 PHP 代碼：
如果你已經把上面的代碼都在你的機器上實現了的話，現在去刷新你的瀏覽器，你會看到我們已經從后臺收到了一些實際的 JSON 數據！
但是，我們還不滿足，希望能夠在 當中像使用對象一樣的使用 JSON 數據，那么這個也非常簡單！我們可以直接從 對象（jqXHR）中得到返回的 JSON 數據所對應的對象（ 自動為我們解析了），例如下面代碼：
就是這樣簡單。另外，我們還可以使用 參數，并給它指定一個方法作為事件處理程序；該方法會在請求成功時，將返回數據、當前請求狀態和 對象傳遞給我們，例如下面代碼：
同樣還可以指定 error 參數，例如下面代碼：
注意：上面代碼我請求的是 Ajaj.php，是一個并不存在的頁面。那么當然會得到 ‘404, Not found’ 之類的錯誤信息。如果使用 我們之前用到的 參數選項的話，你就必須自己來檢查請求是否成功了，因為服務器返回錯誤的情況也屬于請求完成了。我們當前的這個實現方法實際上更方便來用 幫我們區分完成請求的狀態是成功了還是出現錯誤了，如果我們要訪問 Ajaj.php 的話，.ajax 會在接收到服務器返回的錯誤信息后調用 error 參數所指定的處理程序。
所以使用 AJAX 的時候一定要考慮的比較周全，例如服務器是否返回了結果，返回結果的類型是什么，發送的請求是否成功了等等。幸運的是，我們可以使用 對象獲取幾乎是所有的信息，例如先通過檢查 屬性值就可以知道請求是否成功（例如 為 200 則代表請求成功，為 404 代表找不到相應的頁面，為 500 代表服務器端出錯等等），然后通過 獲取返回類型，最后根據不同的返回類型再用 、、 或者 來獲取相應的結果。
發送數據（POST）
前面的例子我們看到了如何用 AJAX 來實現 GET 請求，下面的例子我們來看看如何實現 POST 請求并向服務器發送數據。首先我們創建一個新的 PHP 后臺程序，命名為 .php 。這個 PHP 程序實現了以下主要功能：
我們來看看 PHP 的程序：
然后我們還需要一個 文件，命名為 .js。它實現的主要功能是：在 # 按鈕上添加點擊事件的處理程序；事件處理程序首先獲得 # input 文本框中輸入的數據，然后將數據發送（POST）給服務器，最后當服務器返回成功添加后（狀態 200）更新電影列表并清空電影信息的輸入框。
代碼就這么多，看起來復雜嗎？可能剛開始會有那么點兒，其實你只要多看它兩眼，很快就能找到感覺，還有就是建議大家去多看看 AJAX 的文檔！
另外，在 AJAX 的場景下經常會使用到的就是分頁（）技術。如果我們要添加幾萬個電影信息的話，一次性加載所有的數據會非常影響頁面加載的速度。所以我們可以用 AJAX 每次只加載 10 條、20 條、或者是 50 條的數據，每當點擊下一頁按鈕或者將頁面滾動到底部的時候頁面再加載下一組新的數據（也就是說，用 獲得一組電影信息然后用添加到頁面的列表當中，同時記錄當前加載到哪一組數據了）。這種機制叫做 分頁 ，可以很好的提升用戶體驗和頁面的性能（對于所有大型網站來說這都是必須的）。
這就是 AJAX。
未完待續！
