前兩篇文章主要介紹Jquery如何利用Ajax進行操作數據,主要介紹調用的方法;其中Jquery.ajax()是Jquery中最底層的方法;Jquery還定義的一個方法跟幾個事件為Jquery.ajax ()進行簡化跟擴展;
1:其中全局方法jQuery.ajaxSetup([options])則是為瞭在使用$.ajax(),有時一個頁面需要調用多個$.ajax()方法,如果每個方法都設置其中的請求細節,將是一件十分麻煩的事 。可以一次設置,全局有效,這樣大大簡化瞭$.ajax()方法中細節的編寫;
實例代碼(隻需要設置一個$.ajaxSetup(),其它幾個地方調用就不用再編寫相同的代碼):
復制代碼
<head>
<title>$.ajaxSetup()方法全局設置Ajax</title>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
</script>
<script type="text/javascript">
$(function() {
$.ajaxSetup({ //設置全局性的Ajax選項
type: "GET",
url: "UserInfo.xml",
dataType: "xml"
})
$("#Button1").click(function() { //"姓名”按鈕的單擊事件
$.ajax({
success: function(data) { //傳回請求響應的數據
ShowData(data, "姓名", "name"); //顯示"姓名"部分
}
})
})
$("#Button2").click(function() { //"性別”按鈕的單擊事件
$.ajax({
success: function(data) { //傳回請求響應的數據
ShowData(data, "性別", "sex"); //顯示"性別"部分
}
})
})
$("#Button3").click(function() { //"郵箱”按鈕的單擊事件
$.ajax({
success: function(data) { //傳回請求響應的數據
ShowData(data, "郵箱", "email"); //顯示"郵箱"部分
}
})
})
/*
*根據名稱與值,獲取請求響應數據中的某部分
*@Param d為請求響應後的數據
*@Param n為數據中文說明字符
*@Param d為數據在響應數據中的元素名稱
*/
function ShowData(d, n, v) {
$("#pTip").empty(); //先清空標記中的內容
var strHTML = ""; //初始化保存內容變量
$(d).find("User").each(function() { //遍歷獲取的數據
var $strUser = $(this);
strHTML += n + ":" + $strUser.find(v).text() + "<hr>";
})
$("#pTip").html(strHTML); //顯示處理後的數據
}
})
</script>
</head>
<body>
<p class="pFrame">
<p class="pTitle">
<span><input id="Button1" type="button" value="姓名" class="btn" /></span>
<span><input id="Button2" type="button" value="性別" class="btn" /></span>
<span><input id="Button3" type="button" value="郵箱" class="btn" /></span>
</p>
<p class="pContent">
<p id="pTip" class="clsShow"></p>
</p>
</p>
</body>
</html>
復制代碼
2:在Jquery中,除瞭全局性的函數外,還有6個全局性的Ajax事件,由於在使用$.ajax()方法時,其中的選項參數global的值默認情況下為true,這也意味著所有在執行的Ajax的數據請求,都綁定瞭全局事件;也就是說6個全局性的開關是global屬性決定;
2.1 ajaxStart(callback)和ajaxStop(callback)這兩個使用的頻率非常高,前者是當請求開始執行時觸發,往往用於編寫一些準備性的工作,後者是當請求結束時觸發;
實例代碼:
復制代碼
<head>
<title>Ajax中的全局事件</title>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
</script>
<script type="text/javascript">
$(function() {
//元素綁定全局ajaxStart事件
$("#pMsg").ajaxStart(function() {
$(this).show(); //顯示元素
})
//元素綁定全局ajaxStop事件
$("#pMsg").ajaxStop(function() {
$(this).html("已成功獲取數據。").hide();
})
$("#Button1").click(function() {
$.ajax({ //帶參數請求服務器
type: "GET",
url: "GetData.aspx",
//獲取加碼後的數據並作為參數傳給服務器
data: { txtData: encodeURI($("#txtData").val()) },
dataType: "html",
success: function(data) { //顯示解碼後的返回數據
$("#pTip").html(decodeURI(data));
}
})
})
})
</script>
</head>
<body>
<p class="pFrame">
<p class="pTitle">
<span>數據:<input id="txtData" type="text" class="txt" /></span>
<span><input id="Button1" type="button" value="發送" class="btn" /></span>
</p>
<p class="pContent">
<p id="pMsg" class="clsTip">正在發送數據請求…</p>
<p id="pTip" class="clsShow"></p>
</p>
</p>
</body>
</html>
其中GetData.aspx代碼:
string strName = Request["txtData"]; //返回傳回的參數
Response.Write(strName); //返回傳回的參數