$.ajaxSetup()設定全域性Ajax(ajax在jQuery中的運用學習第十一天)
在使用$.ajax()方法時,有時需要呼叫多個$.ajax()方法,如果每個方法都設定其中的請求細節,將是一件十分麻煩的事。為了簡化這種工作,在jQuery中,可以使用$.ajaxSetup()方法設定全域性性的ajax預設選項,一次設定,全域性有效,這樣大大簡化了$.ajax()方法中細節的編寫,該方法的呼叫格式為:
$.ajaxSetup([options])
其中,可選項引數[options]是一個物件,通過該物件可以設定$.ajax()方法中的引數。
示例:
(1)功能描述
在頁面中,設定三個按鈕,分別通過$.ajax()方法請求一個XML文件中的某部分資料,並回調的資料展示在頁面中。在請求前,使用$.ajaxSetup()方法進行一些引數項的全域性性設定。
(2)實現程式碼
<script type="text/javascript" src="text/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"); //顯示“郵箱”部分
}
})
})
/*
根據名稱與值,獲取請求響應資料中的某部分
@Parm d為請求響應後的資料
@Parm n為資料中文說明字元
@Parm d為資料在響應資料中的元素名稱
*/
function ShowData(d, n, v){
$("#divTip").empty(); //先清空標記中的內容
var strHTML = "" //初始化儲存內容變數
$(d).find("User").each(function() { //遍歷獲取的資料
var $strUser = $(this);
strHTML += n + ": " + $strUser.find(v).text() + "<hr>"
})
$("#divTip").html(strHtML); //處理後的資料
}
})
</script>
<div class="divFrame">
<div class="divTitle">
<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>
</div>
<div class="divContent">
<div id="divTip" class="clsShow"></div>
</div>
</div>
程式碼分析:
在js程式碼中,由於使用了$.ajaxSetup()方法設定部分全域性性的Ajax引數選項,使後續程式碼中的非同步資料請求非常簡單,避免了重複編寫相同程式碼。由於每次請求都要分析響應後的資料,因此通過一個自定義的函式ShowData,在每次呼叫時,根據不同的元素名稱,返回對應的資料。