學習要點：

1.Ajax 概述

2.load()方法

3.$.get()和$.post()

4.$.getScript()和$.getJSON()

5.$.ajax()方法

6.表單序列化

Ajax 全稱為：“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML）， 它並不是 JavaScript 的一種單一技術，而是利用了一系列交互式網頁應用相關的技術所形 成的結合體。使用 Ajax，我們可以無刷新狀態更新頁面，並且實現異步提交，提升了用戶 體驗。

一．Ajax 概述

Ajax 這個概念是由 Jesse James Garrett 在 

1.JavaScript，通過用戶或其他與瀏覽器相關事件捕獲交互行為；

2.XMLHttpRequest 對象，通過這個對象可以在不中斷其它瀏覽器任務的情況下向服務 器傳送請求；

3.服務器上的文件，以 XML、HTML 或 JSON 格式保存文本數據；

4.其它 JavaScript，解釋來自服務器的數據（比如 PHP 從 MySQL 獲取的數據）並將其 呈現到頁面上。

由於 Ajax 包含眾多特性，優勢與不足也非常明顯。優勢主要以下幾點：

1.不需要插件支持（一般瀏覽器且默認開啟 JavaScript 即可）

2.用戶體驗極佳（不刷新頁面即可獲取可更新的數據）；

3.提升 Web 程序的性能（在傳遞數據方面做到按需放鬆，不必整體提交）；

4.減輕服務器和帶寬的負擔（將服務器的一些操作轉移到客戶端）；

而 Ajax 的不足由以下幾點：

1.不同版本的瀏覽器度 XMLHttpRequest 對象支持度不足(比如 IE5 之前)；

2.前進、後退的功能被破壞（因為 Ajax 永遠在當前頁，不會幾率前後頁面）；

3.搜索引擎的支持度不夠（因為搜索引擎爬蟲還不能理解 JS 引起變化數據的內容）；

4.開發調試工具缺乏（相對於其他語言的工具集來說，JS 或 Ajax 調試開發少的可憐）。

異步和同步

使用 Ajax 最關鍵的地方，就是實現異步請求、接受響應及執行回調。那麼異步與同步

有什麼區別呢？我們普通的 Web 程序開發基本都是同步的，意為執行一段程序才能執行下 一段，類似電話中的通話，一個電話接完才能接聽下個電話；而非同步可以同時執行多條任務， 感覺有多條線路，類似於簡訊，不會因為看一條簡訊而停止接受另一條簡訊。Ajax 也可以 使用同步模式執行，但同步的模式屬於阻塞模式，這樣會導致多條線路執行時又必須一條一 條執行，會讓 Web 頁面出現假死狀態，所以，一般Ajax 大部分採用異步模式。

二．load()方法

jQuery 對 Ajax 做了大量的封裝，我們使用起來也較為方便，不需要去考慮瀏覽器兼容 性。對於封裝的方式，jQuery 採用了三層封裝：最底層的封裝方法為：$.ajax()，而通過這 層封裝了第二層有三種方法：.load()、$.get()和$.post()，最高層是$.getScript()和$.getJSON() 方法。

.load()方法可以參數三個參數：url(必須，請求 html 文件的 url 地址，參數類型為 String)、 data(可選，發送的 key/value 數據，參數類型為 Object)、callback(可選，成功或失敗的回調 函數，引數型別為函式 Function)。

如果想讓 Ajax 異步載入一段 HTML 內容，我們只需要一個 HTML 請求的 url 即可。

//HTML

<input type="button" value="異步獲取數據" />

<div id="box"></div>

//jQuery

$('input').click(function () {

$('#box').load('test.html');

});

如果想對載入的 HTML 進行篩選，那麼只要在 url 參數後面跟著一個選擇器即可。

//帶選擇器的 url

$('input').click(function () {

$('#box').load('test.html .my');

});

如果是服務器文件，比如.php。一般不僅需要載入數據，還需要向服務器提交資料，那 麼我們就可以使用第二個可選引數 data。向服務器提交數據有兩種方式：get 和 post。

//不傳遞 data，則默認 get 方式

$('input').click(function () {

$('#box').load('test.php?url=ycku');

});

//get 方式接受的 PHP

<?php

if ($_GET['url'] == 'ycku') {

echo '瓢城 Web 俱樂部官網';

} else {

echo '其他網站';

}

?>

//傳遞 data，則為 post 方式

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

});

});

//post 方式接受的 PHP

<?php

if ($_POST['url'] == 'ycku') {

echo '瓢城 Web 俱樂部官網';

} else {

echo '其他網站';

}

?>

在 Ajax 數據載入完畢之後，就能執行回調函數 callback，也就是第三個參數。回調函數

也可以傳遞三個可選參數：responseTex（t

（XMLHttpRequest 對象）。

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

請求返回）、textStatus（請求狀態)、XMLHttpRequest

}, function (response, status, xhr) {

alert('返回的值為：' + response + '，狀態為：' + status + '，狀態是：' + xhr.statusText);

});

});

注意：status 得到的值，如果成功返回數據則為：success，否則為：error。XMLHttpRequest

對象屬於 JavaScript 範疇，可以調用一些屬性如下：

如果成功返回數據，那麼 xhr 對象的 statusText 屬性則返回'OK'字符串。除了'OK'的狀態

字符串，