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 = https://www.cnblogs.com/xjs-hp/archive/2020/11/24/option.data ||''
        var dataType = option.dataType || 'text/html'
        var success = option.success

        // 發送請求
        // 設定請求行：get如果有引數就需要拼接在url后面，post不用拼接
        if(type == 'get'){
            url = url + "?" + data
            data = https://www.cnblogs.com/xjs-hp/archive/2020/11/24/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）

標籤：其他

上一篇：仿美團外賣的店鋪串列獲取思路

下一篇：jquery尋找節點