鋒利的JQuery學習筆記之JQuery
今天終於看到了最令我興奮的一章：JQuery與Ajax的應用。AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX並非縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種創建交互式應用的網頁開發技術。在最初學習Ajax的日子裏，我被ASP.NET AJAX框架提供的UpdatePanel迷惑了，以後Ajax就這麽簡單，所以在最初做的幾個項目裏，前臺代碼裏必至少有一個UpdatePanel區域，把要局部刷新的內容全放到這個Panel裏面，殊不知一個UpdatePanel只適合於局域網的內部信息系統，不適合在前臺互聯網中使用，這樣效率很低。
於是，我帶著好奇的心情觀看了itcast楊中科老師的2010版視頻第13季Ajax，明白了應該是從XMLHttpRequest對象開始學起，它是Ajax的核心內容，也是實現的關鍵-發送異步請求、接收響應以及執行回調都是通過它來完成的。Ajax最大的優勢就在於：1.不需要插件的支持，可以被絕大多數瀏覽器所支持；2.優秀的用戶體驗，使得Web應用程序能夠更為迅速的回應用戶的操作；3.提高Web程序的性能，即通過XMLHttpRequest按需發送；4.減輕服務器和寬帶的負擔，即在客戶端和服務器端增加了一個中間層，使用戶操作與服務器響應異步化；金無赤金，人無完人，Ajax也是如此，那麽Ajax的不足在哪裏呢？這個問題在去年秋季的中軟國際校園招聘上被技術面試官問到過，我當時頓時沒想起來，失誤啊。Ajax主要有以下幾點不足：1.瀏覽器對XMLHttpRequest對象的支持度不足！！2.破壞瀏覽器“前進”、“後退”按鈕的正常功能；3.對搜索引擎支持的不足；4.開發和調試工具的缺乏；
下面看一段最經典的實現Ajax的js腳本代碼：
<script language="javascript" type="text/javascript">
//通過這個函數來異步獲取信息
function Ajax(){
var xmlHttpReq = null; //聲明一個空對象用來裝入XMLHttpRequest
if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){//除IE5 IE6 以外的瀏覽器XMLHttpRequest是window的子對象
xmlHttpReq = new XMLHttpRequest();//實例化一個XMLHttpRequest
}
if(xmlHttpReq != null){ //如果對象實例化成功
xmlHttpReq.open("GET","test.ashx",true); //調用open()方法並采用異步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //設置回調函數
xmlHttpReq.send(null); //因為使用get方式提交，所以可以使用null參調用
}
function RequestCallBack(){//一旦readyState值改變，將會調用這個函數
if(xmlHttpReq.readyState == 4){
if(xmlHttpReq.status == 200){
//將xmlHttpReq.responseText的值賦給ID為 resText 的元素
document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
}
}
}
</script>
這裏test.ashx裏面只有一句context.Response.Write("Hello World!");
幸運的是，我們強大的JQuery庫為我們封裝了許多Ajax操作，在JQuery中$.ajax()屬於最底層的方法，第2層則是load,get,post方法，第3層是getScript和getJSON方法。於是，如果我們可以實現一個極其簡單的AJAX獲取評論的功能：
$(function() {
$("#send").click(function() {
$("#resText").load("test.htm");
});
});
通過設置id為send的按鈕點擊事件，在id為resText的div中加載test.htm裏面的評論信息，簡單的一行代碼就實現了ajax效果，太方便了！！至於get和post方法，更是封裝的非常好，指定服務頁面，提供參數，獲取返回數據，三位一體。
在這裏碰到了一些問題，學習了下JSON，JSON文件非常簡潔，容易閱讀。參考一篇博文：http://www.cnblogs.com/zhaozhan/archive/2011/01/09/1931340.html，這裏面主要講了在ASP.NET中JSON的序列化與反序列化。
$.ajax()方法是最底層的Ajax實現，它可以代替load，get，post，getScript和getJson這些方法，但是要使用$.ajax()方法需熟悉一些常用的參數，例如url,type,timeout,data等，不如上面兩層的方法方便，但畢竟是最底層的實現，效率上應該高一點。於是，就寫下了如下的代碼：
$(function() {
$("#send").click(function() {
$.ajax({
type: "GET",
url: "../App_Themes/default/js/test.json",
dataType: "json",
success: 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);
}
});
});
});
當需要傳遞的form裏面的參數較多時，就可以使用serialize()序列化方法，一個很實用的方法。即使在表單中增加多個字段，腳本仍然能夠使用，並且不需要做其他多余的工作。於是，我可以寫下如下的代碼：
$(function() {
$("#send").click(function() {
$.get("jqajax-test-2.ashx", $("#form1").serialize(), function(data, textStatus) {
$("#resText").html(data);
});
});
$("#loading").ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
最後，作者給出了一個實例：Ajax聊天室，用PHP+MySql寫的，於是我將其改成了ASP.NET+MSSQL版。
鋒利的JQuery學習筆記之JQuery