jQuery提供了簡單而強大的選擇器功能,同時對Ajax操作也給出了很好的支持。在Ajax方面,jQuery除了提供底層的jQuery.ajax()方法外,也提供了下面的簡單方法:
(1) jQuery.get(url, [data], [callback], [type])
(2) jQuery.getJSON(url, [data], [callback])
(3) jQuery.getScript(url, [callback])
(4) jQuery.post(url, [data], [callback], [type])
由於jQuery.ajax()功能比較強大,可配置的參數比較多,現在主要對這個方法的注意事項進行總結。
1. jQuery.ajax()默認是以異步的方式請求的,如果需要同步,使用參數async為false。因為有些應用必須同步請求數據的。例如,某些Flash與JS交互應用中,請求一個JS函數需要馬上得到返回數據。此時,必須采用同步的Ajax調用方式。
2. Ajax如果是Get請求,返回的數據一般會被浏覽器緩存,如果不想被緩存,可以設置cache參數為false;或者發送請求是帶上時間戳,這樣浏覽器會認為是新的請求,而重新從服務器加載數據。當然,如果是POST發送的請求則不會被緩存。
3. dataType:預期服務器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText,並作為回調函數參數傳遞,可用值:
(1)"xml": 返回 XML 文檔,可用 jQuery 處理。
(2)"html": 返回純文本 HTML 信息;包含的script標簽會在插入dom時執行。
(3)"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。'''注意:'''在遠程請求時(不在同一個域下),所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)
(4)"json": 返回 JSON 數據 。
(5)"jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名,以執行回調函數。
(6)"text": 返回純文本字符串
其中,"script"、"json"設置可以解決Ajax的跨域問題。
4. 如果服務器返回的一個字符串或數值,則使用普通的ajax調用即可。
如果服務器返回的是一個JSON對象,那麼最好采用jQuery.getJSON的方式,或者設置dataType=json。因為浏覽器解析JSON對象需要時間,直接返回JSON對象,節省解析時間,可以避免在服務器明明有返回數據,但是浏覽器得不到的錯誤。
5. Ajax調用是需要時間的,所以一般將Ajax調用後的處理代碼全部放在回調方法中。不能采用這樣的處理方式:
代碼如下:
function getMyPrizeList(){
if(isNotEmpty(uid)){
var obj=new Object();
try{
jQuery.ajax({type:"GET",url:"someurl",async:false,cache:false,dataType:"script",scriptCharset:"gbk",success:function(json){
obj=json;
}
});
}catch(e){}
obj=eval("("+obj+")");
//alert(obj);
var str="";
for(var i in obj)
{
str+='<tr>'+'<th>'+prizearray[obj[i].prizeno]+'</th>'
str+='<td>'+'CD-KEY:'+obj[i].cdkey+'</td>'
str+='<td>'+'期限:'+obj[i].expiratedate+'前'+'</td></tr>';
}
jQuery("#prizelist").append(str);
}
}
而必須這樣處理:即將處理代碼放到success函數裡面!
代碼如下:
function getMyPrizeList(){
if(isNotEmpty(uid)){
var obj=new Array();
try{
jQuery.ajax({type:"GET",url:"someurl",
cache:false,
dataType:"script",
scriptCharset:"gbk",
success:function(json){
try{
obj=result;
}catch(e){}
jQuery("#prizelist").html("");
var str="";
for(var i=0;i<obj.length;i++ ){
str+='<tr><th>'+prizearray[obj[i].prizeno]+'</th>';
str+='<td>CD-KEY:'+obj[i].cdkey+'</td>';
str+='<td>期限:'+obj[i].expiratedate+'前</td></tr>';
}
jQuery("#prizelist").append(str);
}
});
}catch(e){}
}
}
6. jQuery.getJSON實例:
代碼如下:
//內部函數,實現債務人詳細信息的載入、設置值
function innerShowDetail() {
// 獲得JSON格式的數據
$.getJSON('load.do',{id : userId}, function(json) {
// 根據key設置value
for (key in json) {
if(key == 'id'){
$('#detailDiv #' + key).val(json[key]);
} else {
if(json[key] == ''){
// 沒有值設置為空
$('#detailDiv #' + key).html(' ');
} else if(key == 'sex'){
$('#detailDiv #' + key).html(json[key] == '0' ? '女' : '男');
} else if(key == 'group'){
if(json[key] != null) {
$('#detailDiv #' + key).html(json[key]['groupName']);
}
} else {
$('#detailDiv #' + key).html(json[key]);
}
}
}
//設置對話框標題和內容
$('#detailDiv').removeAttr('class');
dialog.setTitle('查看人員[' + json['userName'] + ']詳細資料');
dialog.setContent($('#detailDiv').html());
});
}