jQuery中的Ajax

學習jQuery中的Ajax 前須要先認識其如何封裝的

AJAX工具函數
爲何須要AJAX工具函數:

• 以前每次發判斷請求，若是請求方式，或者參數或者url不同，那麼代碼沒法複用，因此咱們迫切的須要一個通用函數，讓用戶在使用異步對象的時候經過調用一個相同的函數就能夠實現需求
• 總之：爲了提高咱們的開發效率，咱們自已將XMLHttpRequest封裝成一個函數。

關鍵點:

• 找到操做的共同點
• 找到不一樣的部分--參數

不一樣部分:

• 請求方式：type
• 請求url:url
• 請求參數不同:data
• 數據的轉換方式--返回數據的格式:dataType
• 對於數據的處理方式不同: success: 這是一個回調函數

函數的封裝形式：

var $ = {
    ajax:function(option){
        // 實現具體的業務處理
  }
}

代碼實現:

var $ = {
    //傳入對象
    ajax:function(option){
        // 實現具體的業務處理
        var xhr = new XMLHttpRequest()

        // 接收參數
        var type= option.type || 'get'
        // location.pathname:當前頁面的全路徑
        var url = option.url || location.pathname
        var data = option.data || ''
        var dataType = option.dataType || 'text/html'
        var success = option.success

        // 發送請求
        // 設置請求行：get若是有參數就須要拼接在url後面，post不用拼接
        if(type == 'get'){
            url = url + "?" + data
            data = null
        }
        xhr.open(type,url)
        // 設置請求頭：get方式不須要設置請求頭，post方式須要設置Content-Type
        if(type == 'post'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        }
        // 設置請求體:若是有參數，post方式在請求體中傳遞參數
        xhr.send(data)

        // 接收響應
        xhr.onload = function(){
            // 調用回調
            success && success(this.response)
        }
    }
}

由以上封裝的函數,能夠看出在客戶端每次發判斷請求: 不一樣方式的請求,不一樣參數,不一樣url,只要用以上的函數傳入所需的參數便可獲得結果,作到了代碼的複用,使代碼更簡潔.提高了開發效率.

而在jQuery中已經封裝好了以上所需的功能:

$.ajax({}) 可配置方式發起Ajax請求

• url 接口地址 *
  (
  類型：String
  默認值: 當前頁地址。發送請求的地址。
  )

• type 請求方式 *
  (
  類型：String
  默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。
  )

• timeout 請求超時
  (
  類型：Number
  設置請求超時時間（毫秒）。此設置將覆蓋全局設置。
  )

• dataType 服務器返回格式 *
  (
  類型：String
  預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，好比 XML MIME 類型就被識別爲 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。
  隨後服務器端返回的數據會根據這個值解析後，傳遞給回調函數。可用值:
  "xml": 返回 XML 文檔，可用 jQuery 處理。
  "html": 返回純文本 HTML 信息；包含的 script 標籤會在插入 dom 時執行。
  "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，全部 POST 請求都將轉爲 GET 請求。（由於將使用 DOM 的 script標籤來加載）
  "json": 返回 JSON 數據 。
  "jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。
  "text": 返回純文本字符串
  )

• data 發送請求數據 *
  (
  類型：String
  發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。
  必須爲 Key/Value 格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。
  )

• beforeSend:function () {} 請求發起前調用 *
  (
  類型：Function
  發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。
  XMLHttpRequest 對象是惟一的參數。
  這是一個 Ajax 事件。若是返回 false 能夠取消本次 ajax 請求。
  )

• success 成功響應後調用 *
  (
  類型：Function
  請求成功後的回調函數。
  參數：由服務器返回，並根據 dataType 參數進行處理後的數據；描述狀態的字符串。
  這是一個 Ajax 事件。
  )

• error 錯誤響應時調用
  (
  類型：Function
  默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。
  有如下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。
  若是發生了錯誤，錯誤信息（第二個參數）除了獲得 null 以外，還多是 "timeout", "error", "notmodified" 和 "parsererror"。
  這是一個 Ajax 事件。
  )

• complete 響應完成時調用（包括成功和失敗） *
  (
  類型：Function
  請求完成後回調函數 (請求成功或失敗以後均調用)
  參數： XMLHttpRequest 對象和一個描述請求類型的字符串。
  這是一個 Ajax 事件。
  )

• $.get(url,data,callback,dataType) 以GET方式發起Ajax請求

• $.post(url,data,callback,dataType) 以POST方式發起Ajax請求

• $('form').serialize()序列化表單（即格式化key=val&key=val）