天天看點

JQuery-ajax

url: 要求為string類型的參數,(預設為目前頁位址)發送請求的位址。

type: 要求為string類型的參數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分浏覽器支援。

timeout: 要求為number類型的參數,設定請求逾時時間(毫秒)。此設定将覆寫$.ajaxsetup()方法的全局設定。

async:要求為boolean類型的參數,預設設定為true,所有請求均為異步請求。如果需要發送同步請求,請将此選項設定為false。注意,同步請求将鎖住浏覽器,使用者其他操作必須等 待請求完成才可以執行。

cache:要求為boolean類型的參數,預設為true(當datatype為script時,預設為false)。設定為false将不會從浏覽器緩存中加載請求資訊。

data: 要求為object或string類型的參數,發送到伺服器的資料。如果已經不是字元串,将自動轉換為字元串格式。get請求中将附加在url後。防止這種自動轉換,可以檢視processdata選項。對象必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,jquery将自動為不同 值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

datatype: 要求為string類型的參數,預期伺服器傳回的資料類型。如果不指定,jquery将自動根據http包mime資訊傳回responsexml或responsetext,并作為回調函數參數傳遞。

          可用的類型如下:

          xml:傳回xml文檔,可用jquery處理。

          html:傳回純文字html資訊;包含的script标簽會在插入dom時執行。

          script:傳回純文字javascript代碼。不會自動緩存結果。除非設定了cache參數。注意在遠端請求 時(不在同一個域下),所有post請求都将轉為get請求。

          json:傳回json資料。

          jsonp:jsonp格式。使用sonp形式調用函數時,例如myurl?callback=?,jquery将自動替換後一個 “?”為正确的函數名,以執行回調函數。

          text:傳回純文字字元串。

beforesend:要求為function類型的參數,發送請求前可以修改xmlhttprequest對象的函數,例如添加自定義 http頭。在beforesend中如果傳回false可以取消本次ajax請求。xmlhttprequest對象是惟一的參數。

function(xmlhttprequest){

               this;   //調用本次ajax請求時傳遞的options參數

            }

complete:要求為function類型的參數,請求完成後調用的回調函數(請求成功或失敗時均調用)。

          參數:xmlhttprequest對象和一個描述成功請求類型的字元串。

          function(xmlhttprequest, textstatus){

             this;    //調用本次ajax請求時傳遞的options參數

          }

success:要求為function類型的參數,請求成功後調用的回調函數,有兩個參數。

         (1)由伺服器傳回,并根據datatype參數進行處理後的資料。

         (2)描述狀态的字元串。

         function(data, textstatus){

            //data可能是xmldoc、jsonobj、html、text等等

            this;  //調用本次ajax請求時傳遞的options參數

error:要求為function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即xmlhttprequest對象、錯

       誤資訊、捕獲的錯誤對象(可選)。

       ajax事件函數如下:

       function(xmlhttprequest, textstatus, errorthrown){

          //通常情況下textstatus和errorthrown隻有其中一個包含資訊

          this;   //調用本次ajax請求時傳遞的options參數

       }

contenttype:要求為string類型的參數,當發送資訊至伺服器時,内容編碼類型預設為"application/x-www-form-urlencoded"。該預設值适合大多數應用場合。

案例代碼:

$(function(){

    $('#send').click(function(){

         $.ajax({

             type: "get",

             url: "test.json",

             data: {username:$("#username").val(), content:$("#content").val()},

             datatype: "json",

             success: function(data){

                         $('#restext').empty();   //清空restext裡面的所有内容

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

                      }

         });

    });

});

順便說一下$.each()函數:

$.each()函數不同于jquery對象的each()方法,它是一個全局函數,不操作jquery對象,而是以一個數組或者對象作為第1個參數,以一個回調函數作為第2個參數。回調函數擁有兩個參數:第1個為對象的成員或數組的索引,第2個為對應變量或内容。

ajax出于安全考慮,禁止跨站請求。

xsrf,cross site request forgery,跨站請求僞造。

下面是一個xsrf攻擊的例子:

1.使用者a登入到了它的銀行賬戶(http://www.bank.com);

2.使用者b發現了這一點,然後讓使用者a通路自己的首頁;

3.使用者b的首頁上有一個故意的圖檔連結,用來發起xsrf攻擊: <img src="http://bank.com/xfer?from=usera&amount=100&to=userb">

如果使用者a的cookie沒有過期,那麼a通路了b的首頁,就不知情地發起了一次轉賬操作。

正常的$.ajax()會報異常,見下圖:

JQuery-ajax

應對方法

使用 jsonp格式。

什麼是jsonp格式呢?

api原文:如果擷取的資料檔案存放在遠端伺服器上(域名不同,也就是跨域擷取資料),則需要使用jsonp類型。使用這種類型的話,會建立一個查詢字元串參數 callback=? ,這個參數會加在請求的url後面。伺服器端應當在json資料前加上回調函數名,以便完成一個有效的jsonp請求。意思就是遠端服務端需要對傳回的資料做下處理,根據用戶端送出的callback的參數,傳回一個callback(json)的資料,而用戶端将會用script的方式處理傳回資料,來對json資料做處理。

服務端也需要配合,如果隻傳回json的話還是報錯:

JQuery-ajax

繼續閱讀