jquery ajax學習筆記

lsxj發表於2016-04-30

這兩天做專案的時候頻繁用到jquery ajax,很多東西都忘了。於是寫下這篇文章,加深印象,也方便自己日後查閱。

先看一下基本版本:

$.ajax({
    url: url,    //請求的url地址
    dataType: datatype,   //伺服器返回的值型別
    async: true, //請求是否非同步,預設為非同步
    data: { 
        "id": "value" ,
        "param":"param"
    },//傳送到伺服器的引數
    type: "GET",   //請求方式
    beforeSend: function() {
        //請求前的處理
    },
    success: function(data) {
        //請求成功時處理
    },
    complete: function() {
        //請求完成的處理
    },
    error: function() {
        //請求出錯處理
    }
});

接下來來詳細看一下各個屬性

  • url 請求的url地址,String型別

  • dataType 伺服器返回的值的型別。【若沒有填寫,jQuery會自動根據HTTP包MIME資訊來智慧判斷。若填寫錯了反而會有問題】有以下幾種型別:

    • “xml”: 返回XML文件,可用 jQuery 處理。

    • “html”: 返回純文字HTML資訊;包含的 script 標籤會在插入 dom 時執行。

    • “script”: 返回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了 “cache” 引數。注意:在遠端請求時(不在同一個域下),所有 POST 請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)

    • “json”: 返回 JSON 資料

    • “jsonp”: JSONP 格式。使用 JSONP 形式呼叫函式時,如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函式名,以執行回撥函式。

    • “text”: 返回純文字字串

  • data 傳送到伺服器的引數。GET請求中將附加在URL後。

  • type 請求方式GET【預設方式】 | POST

  • async Boolean型別。預設值: true【表示非同步】。
    預設設定下,所有請求均為非同步請求。
    如果需要傳送同步請求,設定為 false。
    【注意,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行。】

  • cache Boolean型別。【預設】true。當dataType為script和jsonp時預設為 false。設定為false將不快取此頁面。
    【預設情況下,請求總會被髮出去,但瀏覽器有可能從它的快取中調取資料。要禁止使用快取的結果,可以設定 cache 引數為 false】

  • contentType 傳送資訊至伺服器時內容編碼型別。預設值: “application/x-www-form-urlencoded”。
    contentType:”application/x-www-form-urlencoded; charset=utf-8″

  • beforeSend 傳送請求前可修改 XMLHttpRequest 物件的函式,如新增自定義 HTTP 頭。(沒有實踐過,不是很懂。)

  • success 請求成功後的回撥函式。引數:由伺服器返回,並根據 dataType 引數進行處理後的資料;描述狀態的字串。

  • dataFilter 在請求成功之後呼叫。提供 data 和 type 兩個引數:data 是 Ajax 返回的原始資料,type 是呼叫 jQuery.ajax 時提供的 dataType 引數。並且必須返回新的資料(可能是處理過的)傳遞給 success 回撥函式。

  • error 很明顯是請求失敗時呼叫此函式。有以下三個引數:XMLHttpRequest 物件、錯誤資訊、(可選)捕獲的異常物件。如果發生了錯誤,錯誤資訊(第二個引數)除了得到 null 之外,還可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。

  • complete 請求完成後回撥函式 (請求成功或失敗之後均呼叫)。引數: XMLHttpRequest 物件和一個描述請求型別的字串。

  • global 是否觸發全域性AJAX事件。預設為true | 【不觸發則設定為】false。用於阻止響應註冊的回撥函式,比如 .ajaxSend,或者 ajaxError,以及類似的方法。這在有些時候很有用,比如傳送的請求非常頻繁且簡短的時候,就可以在 ajaxSend 裡禁用這個。

  • ifModified 僅在伺服器資料改變時獲取新資料。預設值: false。使用 HTTP 包 Last-Modified 頭資訊判斷。在 jQuery 1.4 中,它也會檢查伺服器指定的 `etag` 來確定資料沒有被修改過。
    【如果希望判斷資料自從上次請求後沒有更改過就報告出錯的話,設定ifModified為true】

  • jsonp 在一個 jsonp 請求中重寫回撥函式的名字。這個值用來替代在 “callback=?” 這種 GET 或 POST 請求中 URL 引數裡的 “callback” 部分,比如 {jsonp:`onJsonPLoad`} 會導致將 “onJsonPLoad=?” 傳給伺服器。

  • jsonpCallback 為 jsonp 請求指定一個回撥函式名。這個值將用來取代 jQuery 自動生成的隨機函式名。這主要用來讓 jQuery 生成度獨特的函式名,這樣管理請求更容易,也能方便地提供回撥函式和錯誤處理。
    你也可以在想讓瀏覽器快取 GET 請求的時候,指定這個回撥函式名。

  • username 用於響應 HTTP 訪問認證請求的使用者名稱。

  • password 用於響應 HTTP 訪問認證請求的密碼
    如果伺服器需要 HTTP 認證,可以使用使用者名稱和密碼可以通過 username 和 password 選項來設定。

  • processData 預設值: true。預設情況下,通過data選項傳遞進來的資料,如果是一個物件(技術上講只要不是字串),都會處理轉化成一個查詢字串,以配合預設內容型別 “application/x-www-form-urlencoded”。
    【傳送 DOM 樹資訊或其它不希望轉換的資訊設定為false】。

  • scriptCharset 只有當請求時 dataType 為 “jsonp” 或 “script”,並且 type 是 “GET” 才會用於強制修改 charset
    通常只在本地和遠端的內容編碼不同時使用。

  • timeout 設定請求超時時間(毫秒)。此設定將覆蓋全域性設定。

參考文章:jQuery ajax()方法|菜鳥教程
jQuery ajax w3school

相關文章