jQuery Ajax()方法使用指南_jquery

 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());
       });
    }