jQuery與Ajax應用
一、Ajax的優勢和不足
1.Ajax的優勢：
（1）不需要插件支持：不需要任何浏覽器插件就可以被絕大多數浏覽器支持
（2）優秀的用戶體驗：能在不刷新整個頁面的前提下更新數據
（3）提高web程序的性能：按需發送數據
（4）減輕服務器和帶寬的負擔：在客戶端創建Ajax引擎，把一些工作轉移到客戶端。
2.Ajax的不足
（1）浏覽器對XMLHttpRequest對象的支持度不足：許多浏覽器不支持XMLHttpRequest
（2）破壞浏覽器前進、“後退”按鈕的正常功能：這些按鈕會失效
（3）對搜索引擎的支持的不足：爬蟲程序無法理解javascript代碼
（4）開發和調試工具的缺乏：缺少javascript開發和調試工具
二、Ajax的XMLHttpRquest
Ajax的核心是XMLHttpRquest對象，它是Ajax實現的關鍵——發送異步請求、接收響應及執行回調都是通過它來完成的。
三、安裝Web環境——Appserv
1.下載AppServ
下載地址為：http://www.appservnetwork.com
2.安裝AppServ
安裝AppServ非常簡單，只要連續輕松的單擊“next”按鈕，就可以
四、第一個Ajax例子
在解除jQuery的Ajax操作之前，先看一個用傳統的javascript實現的Ajax例子。例子描述：單擊一個按鈕，然後通過傳統javascript的Ajax的方式從服務器端取回一個“Hello Ajax!”的字符串並顯示在頁面上。
首先在前台頁面中書寫HTML代碼，代碼如下：
<input type = “button” value = “Ajax提交” onclick = ”Ajax() ;”/>
<div id = “resText”></div>
<button>按鈕用來觸發Ajax，id為“resText”的元素用來顯示從服務器返回的HTML文本。接下來完成Ajax()函數。代碼如下：
$(function(){
$("#send").click(function(){
$("#resText").load("1.html");
});
})
五、jQuery中的Ajax
jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬於最底層的方法，第2層是load()、$.get()和$post()方法，第3層是$.getScript()和$getJSON()方法。首先介紹第2層的方法，因為使用頻率很高
1.load()方法
（1）載入HTML文檔
load()方法的結構為：
load( url [ , data] [ , callback])
它接受3個參數：
第一個是string類型的url，表示請求HTML頁面的URL地址
第二個是object類型的data（可選），表示發送至服務器的key/value數據
第三個是function類型的callback（可選），表示請求完成時回調的函數，無論請求成功或失敗
首先構建一個被load()方法加載並追加到頁面中的HTML文件，名字為test.html，HTML代碼如下：
<div class = “comment”>
<h6>張三：</h6>
<p class = “para”>沙發.</p>
</div>
<div class = “comment”>
<h6>李四：</h6>
<p class = “para”>板凳.</p>
</div>
<div class = “comment”>
<h6>王五：</h6>
<p class = “para”>地板.</p>
</div>
然後新建一個空白頁面，在上面添加兩個元素：<button>按鈕用來觸發Ajax事件，id為“resText”的元素用來顯示追加的HTML內容。HTML代碼如下：
<input type="button" value="Ajax獲取" id = “send">
<div class="comment">已有評論：</div>
<div id = “resText”></div>
接下啦開始編寫jQuery代碼。等DOM元素加載完畢後，通過單擊id為“send”的按鈕來調用load()方法，然後將test.html的內容加載到id為“resText”的元素裡。
jQuery代碼如下：
$(function(){
$(“#send”).click(function(){
$(“#resText”).load(“test.html”) ;
});
});
（2）篩選載入的HTML文檔
上面例子是將test.html頁面中的內容都加載到id為“resText”的元素裡。如果只需要test.html頁面內的某些元素，那麼可以使用load()方法的URL參數來達到目的。
load方法的URL參數的語法結構為：“url selector”。例如，需要加載test.html頁面中class名為“para”的內容，可以使用如下代碼：
$(“#resText”).load(“test.html .para”) ;
（3）傳遞參數
load()方法的傳遞方式根據參數data來自動指定，如果沒有參數傳遞，則采用GET方式傳遞，反之則會自動轉換為POST方式。
（4）回調參數
對於必須加載完成後才能繼續的操作，load()方法提供了回調函數，該函數有3個參數，分別代表請求返回的內容、請求狀態和XMLHttpRequest對象，jQuery代碼如下：
$(“#resText”).load(“test.html” , function(responseText , textStatus , XMLHttpRequest){
// responseText ： 請求返回的內容
// testStatus ： 請求狀態：success、error、notmodified、timeout4種
// XMLHttpRequest ： XMLHttpRequest對象
})
2.$.get()方法和$.post()方法
$.get()和$.post()方法是jQuery的全局函數。
（1）$.get()方法
$.get()方法使用GET方式來進行異步請求。
它的結構為：$.get(url [ , data] [ , callback ] [ , type ])
$.get()方法參數解釋：
參數名稱
類型
說明
url
String
請求的HTML頁的URL地址
data（可選）
Object
發送至服務器的key/value數據會作為QueryString附加到請求URL中
callback（可選）
Function
載入成功時回調函數（只有當Response的返回狀態是success才調用該方法）自動將請求結果和狀態傳遞給該方法
type（可選）
String
服務器端返回內容的格式，包括xml、html、script、json、text和_default
下面是一個評論頁面的HTML代碼，通過該段代碼來介紹$.get()方法的使用
<form id="form1" action="#">
<p>評論：</p>
<p>姓名：<input type="text" name="username" id="username"></p>
<p>內容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"></p>
</form>
<div class="comment">已有評論：</div>
<div id="resText"></div>
（1）使用參數：
首先要確定請求頁面的URL地址。代碼如下：
$(“#send”).click(function(){
$.get(“get1.php” data參數，回調函數) ;
}) ;
然後，在提交之前，需要獲取“姓名”和“內容”的值作為data參數傳遞給後台。
代碼如下：
$(“#send”).click(function(){
$.get(“get1.php” , {
username : $(“#username”).val() ,
content : $(“#content”).val()
} ，回調函數) ;
}) ;
如果服務器端接收到傳遞的data數據並成功返回，那麼就可以通過會調換函數將返回的數據顯示到頁面上。
$.get()方法的回調函數只有兩個參數，代碼如下：
fuction(data , textStatus){
//data : 返回的內容，可以是XML文檔、JSON文檔、HTML片段等等
//textStatus : 請求狀態：success、error、notmodified、timeout4種
}
回調函數只有當數據成功返回後才能被調用。
（2）數據格式：
①HTML片段
由於服務器端返回的數據格式是HTML片段，因此並不需要經過處理就可以將新的HTML片段數據插入到主頁中。jQuery代碼如下：
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username : $("#username").val(),
content : $("#content").val()
}, function(data , textStatus){
$("#resText").html(daga); //將返回的數據添加到頁面上
});
});
})
②XML文檔
由於服務器端返回的數據格式是XML文檔，因此需要對返回的數據進行處理，處理XML文檔與處理HTML文檔一樣，也可以使用常規的attr()、find()、filter()以及其他方法。jQuery代碼如下：
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username : $("#username").val(),
content : $("#content").val()
}, function(data , textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "<div class = 'comment'><h6>"
+ username + ":</h6><p class='para'>"
+ content + "</p></div>";
$("#resText").html(txtHtml);
});
});
})
XML文檔的體積相對較大，解析和操作它們的速度要慢一些。
③JSON文件
JSON文件非常簡潔易讀，與XML文檔一樣可以方便的被重用。
由於服務器端返回的數據格式是JSON文件，因此需要對返回的數據進行處理之後，才可以將新的HTML數據添加到主頁中。jQuery代碼如下：
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username : $("#username").val(),
content : $("#content").val()
}, function(data , textStatus){
var username = data.username;
var content = data.content;
var txtHtml = "<div class = 'comment'><h6>"
+ username + ":</h6><p class='para'>"
+ content + "</p></div>";
$("#resText").html(txtHtml);
},"json");
});
})
將$.get()方法的第4個參數設置為“json”來代表期待服務器端返回的數據格式。
通過對3中數據格式的優缺點進行分析，可以得知在不需要與其他應用程序共享數據的時候，使用HTML片段來返回數據一般來說是最簡單的；如果數據需要重用，那麼JSON文件是不錯的選擇，它在性能和文件大小方面具有優勢；而當遠程應用程序未知時，XML文檔時明智的選擇。
2.$ .post()方法
$.get()方法與$.post()方法的區別：
GET請求
POST請求
GET請求會將參數跟在URL後進行傳遞
POST請求則是作為HTTP消息的實體內容發送給Web服務器
GET方式對傳輸的數據有大小限制（通常不能大於2KB）
POST方式傳遞的數據量要比GET方式大得多（理論上不受限制）
GET方式請求的數據會被浏覽器緩存起來，因此其他人就可以從浏覽器的歷史記錄中讀取到這些數據，例如賬號密碼等。在某種情況下，GET方式會帶來嚴重的安全性問題
POST方式相對來說可以避免這些問題
在PHP中，GET方式的數據可以用$_GET[]獲取，也可以用$_REQUEST[]獲取
POST方式可以用$_POST[]獲取，也可以用$_REQUEST[]獲取
由於POST和GET方式提交的數據可以通過$_REQUEST[]獲取，因此只需要改變jQuery函數就可以將程序在GET和POST請求之間切換。代碼如下：
$(function(){
$("#send").click(function(){
$.post("post1.php" ,{
username : $("#username").val() ,
content : $("#content").val()
} , function(data , textStatus){
$("#resText").append(data);
});
});
})
另外，當load()方法帶有參數傳遞時，會使用POST方式發送請求。因此也可以使用load()方法來完成同樣的功能。代碼如下：
$(function(){
$("#send").click(function(){
$("#resText").load("post1.php",{
username : $("#username").val(),
content : $("#content").val()
})
});
})
3.$.getScript()方法和$.getJson()方法
（1）$.getScript()
有時候，在頁面初次加載時就取得所需的全部javascript文件是完全沒有必要的。為此jQuery提供了$.getScript()方法來直接加載.js文件，與加載一個HTML片段一樣簡單方便，並且不需要對javascript文件進行處理，javascript文件會自動執行。
jQuery代碼如下：
$(function(){
$(“#send”).click(function(){
$.getScript(‘test.js’);
});
})
與其他方法一樣，$.getScript()方法也有回調函數，它會在javascript文件成功載入後運行。例如想載入jQuery官方顏色動畫插件，成功後給元素綁定顏色變化動畫可以用到$.getScript()方法的回調函數。代碼如下：
$(function(){
$.getScript(‘jquery.color.js’,function(){
$(‘#go’).click(function(){
$(“.block”).animate({backgroundColor : ‘pink’} , 1000)
.animate({backgroundColor : ‘blue’} , 1000) ;
});
});
});
（2）$.getJSON()方法
$.getJSON()方法用於加載JSON文件，與$.getScript()方法的用法相同。
jQuery代碼如下：
$(function(){
$(“#send”).click(function(){
$.getJSON(‘test.json’) ;
}) ;
})
加載JSON文件之後，javascript對返回的數據要進行處理就要調用回調函數。代碼如下：
$(function(){
$(“#send”).click(function(){
$.getJSON(‘test.json’ , function(data){
// data ：返回的數據
}) ;
}) ;
})
jQuery使用了一個通用的遍歷方法$.each()，可以用於遍歷對象和和數組。$.each()函數不同於jQuery對象的each()方法，它是一個全局函數，不操作對象，而是以一個數組或者對象作為第1個參數，以一個回調函數作為第2個參數。回調函數擁有兩個參數：第1個為對象的成員或數組的索引，第2個為對應變量或內容。代碼如下：
$(function(){
$(“#send”).click( function(){
$.getJSON(‘test.json’ , function(data){
$(“#resText”).empty();
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) ;
});
});
})
4.$.ajax()方法
$.ajax()方法是jQuery最底層的Ajax實現，它們的結構是：
$.ajax(options)
該方法只有1個參數，但在這個對象裡包含了$.ajax()方法所需要的請求設置以及回調函數等信息，參數以key/value的形式存在，所有參數都是可選的。
六、序列化元素
1.serialize()方法
與jQuery其他方法一樣，serialize()方法也是作用於一個jQuery對象，它能夠將DOM元素的內容序列化為字符串，用於Ajax請求。
$(“#send”).click(function(){
$.get(“get1.php” , $(“#form1”).serialize() , function(data , textStatus){
$(“#resText”).html(data) ;
}) ;
}) ;
2.serializeArray()方法
該方法不是返回字符串而是將DOM元素序列化之後返回JSON格式的數據。jQuery代碼如下：
var fields = $(“: checkbox , : radio”).serializeArray() ;
console.log(fields) ;
3.$.param()方法
它是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。比如將一個普通的對象序列化：
var obj = {a : 1 , b : 2 , c : 3} ;
var k = $.param(obj) ;
alert(k) ;