摘要：當(dāng)請(qǐng)求完成后注冊(cè)一個(gè)回調(diào)函數(shù)。該請(qǐng)求是否觸發(fā)全局處理事件如等，請(qǐng)求發(fā)送前的回調(diào)函數(shù)，用來修改請(qǐng)求發(fā)送前，此功能可用來設(shè)置自定義頭信息，在函數(shù)中返回將取消這個(gè)請(qǐng)求。例如，為請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的，默認(rèn)就是傳入的整個(gè)對(duì)象。

Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術(shù)的組合，主要用來實(shí)現(xiàn)客戶端與服務(wù)器端的異步通信效果，實(shí)現(xiàn)頁面的局部刷新，從而創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。

-  創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
-  創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定其請(qǐng)求的方法、URL及驗(yàn)證信息
-  設(shè)置響應(yīng) HTTP 請(qǐng)求狀態(tài)變化的函數(shù)
-  發(fā)送 HTTP 請(qǐng)求
-  獲取異步調(diào)用返回的數(shù)據(jù)
-  使用 JavaScript 和 DOM 實(shí)現(xiàn)局部刷新

var xhr = null; // 創(chuàng)建異步對(duì)象
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest(); // ie7+等現(xiàn)代瀏覽器
}else if(window.ActiveXObject){ // ie6，老版Opera
  xhr = new ActiveXObject("Microsft.XMLHTTP");
}
xhr.open("get","http://localhost:4000/test",true); // true是異步，可省略
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // post 必須設(shè)置
xhr.onreadystatechange = function(){ // 若為同步，此代碼不用寫，直接在send后，用`xhr.responseText`即可。
    if(xhr.readyState==4 && xhr.status==200){
    /* 
    readyState
        0: 請(qǐng)求未初始化
        1: 服務(wù)器連接已建立
        2: 請(qǐng)求已接收
        3: 請(qǐng)求處理中
        4: 請(qǐng)求已完成，且響應(yīng)已就緒
    status
        200 OK
        404 Not Found
    */
      xhr.responseText;
      xhr.responseXML.children[0].children;
      JSON.parse(xhr.responseText);
    }
}
xhr.send(String); // 用于post傳參，形式："a=1&b=2"，而get傳參就在url后面用“?”拼接

優(yōu)點(diǎn)：可以使得頁面不重載全部?jī)?nèi)容的情況下加載局部?jī)?nèi)容，降低數(shù)據(jù)傳輸量，避免用戶不斷刷新或者跳轉(zhuǎn)頁面，提高用戶體驗(yàn)

缺點(diǎn)：對(duì)搜索引擎不友好，要實(shí)現(xiàn)ajax下的前進(jìn)后退功能成本較大；跨域問題限制

jQuery 庫支持完整的 Ajax 操作。這里所包含的所有函數(shù)和方法用于從服務(wù)端加載數(shù)據(jù)，并且不會(huì)導(dǎo)致頁面刷新。

$(document).ajaxComplete(handler(event, XMLHttpRequest, ajaxOptions)) 當(dāng)Ajax請(qǐng)求完成后注冊(cè)一個(gè)回調(diào)函數(shù)。

每當(dāng)一個(gè)Ajax請(qǐng)求完成，jQuery就會(huì)觸發(fā)ajaxComplete事件，在這個(gè)時(shí)間點(diǎn)所有處理函數(shù)會(huì)使用.ajaxComplete()方法注冊(cè)并執(zhí)行。

從 jQuery 1.8 開始, .ajaxComplete() 方法只能綁定到 document元素。

如果global選項(xiàng)設(shè)置為false，調(diào)用$.ajax() 或 $.ajaxSetup(),.ajaxComplete()方法將不會(huì)被觸發(fā)。

類似的還有：請(qǐng)求出錯(cuò)ajaxError()、請(qǐng)求發(fā)送前ajaxSend()、請(qǐng)求剛開始ajaxStart()、請(qǐng)求完成時(shí)ajaxStop()、請(qǐng)求成功完成時(shí)ajaxSuccess()

$.param() 創(chuàng)建一個(gè)數(shù)組或?qū)ο笮蛄谢淖址?，適用于一個(gè)URL地址查詢字符串或Ajax請(qǐng)求。此方法無法對(duì)復(fù)雜數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼。

serialize() 將用作提交的表單元素的值編譯成字符串。

    
    
    
        女
        男
    
    


console.log($("form").serialize()); // username=abc&age=24&sex=0

serializeArray() 將用作提交的表單元素的值編譯成擁有name和value對(duì)象組成的數(shù)組。

console.log($("form").serializeArray()); // [{name: "username", value: "abc"}, {name: "age", value: "24"}, {name: "sex", value: "0"}]

$.ajax(url, {})或$.ajax({url: ""}) 關(guān)于傳參項(xiàng)（可以使用$.ajaxSetup()設(shè)置任何默認(rèn)參數(shù)），下面列舉一些常用的：

url：String，一個(gè)用來包含發(fā)送請(qǐng)求的URL字符串

data：Object、String，發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后面。

dataType：String，默認(rèn)Intelligent Guess (xml, json, script, or html))。預(yù)期服務(wù)器返回的數(shù)據(jù)類型。

xml，html，script，json，text

jsonp: 以 JSONP 的方式載入 JSON 數(shù)據(jù)塊。會(huì)自動(dòng)在所請(qǐng)求的URL最后添加 "?callback=?"。默認(rèn)情況下不會(huì)通過在URL中附加查詢字符串變量 "_=[TIMESTAMP]" 進(jìn)行自動(dòng)緩存結(jié)果，除非將 cache參數(shù)設(shè)置為true。

accepts：PlainObject（可用$.isPlainObject()檢測(cè)），內(nèi)容類型發(fā)送請(qǐng)求頭（Content-Type），用于通知服務(wù)器該請(qǐng)求需要接收何種類型的返回結(jié)果。如果accepts設(shè)置需要修改，推薦在$.ajaxSetup() 方法中設(shè)置一次。

async：Boolean，默認(rèn)true，異步請(qǐng)求

global：Boolean，默認(rèn)true。該請(qǐng)求是否觸發(fā)全局處理事件（如$(document).ajaxComplete()等）

beforeSend(jqXHR, settings)：Function，請(qǐng)求發(fā)送前的回調(diào)函數(shù)，用來修改請(qǐng)求發(fā)送前jqXHR，此功能可用來設(shè)置自定義 HTTP 頭信息，在beforeSend函數(shù)中返回false將取消這個(gè)請(qǐng)求。

catch：Boolean，默認(rèn)true，dataType為"script"和"jsonp"時(shí)默認(rèn)為false。是否緩存此頁面，原理是在GET請(qǐng)求參數(shù)中附加"_=時(shí)間戳"。該參數(shù)不是其他請(qǐng)求所必須的，除了在IE8中，當(dāng)一個(gè)POST請(qǐng)求一個(gè)已經(jīng)用GET請(qǐng)求過的URL。

complete：Function，請(qǐng)求完成后回調(diào)函數(shù) (請(qǐng)求success 和 error之后均調(diào)用)。

success(data, textStatus, jqXHR)：Function，請(qǐng)求成功時(shí)調(diào)用函數(shù)

error：Function，請(qǐng)求失敗時(shí)調(diào)用函數(shù)

timeout：Number，設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋$.ajaxSetup() 里的全局設(shè)置。

jsonp：String，在一個(gè)jsonp請(qǐng)求中重寫回調(diào)函數(shù)的名字。這個(gè)值用來替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分，比如{jsonp:"onJsonPLoad"}會(huì)導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。在jQuery 1.5，，設(shè)置jsonp選項(xiàng)為false，阻止了jQuery從加入"?callback"字符串的URL或試圖使用"=?"轉(zhuǎn)換。在這種情況下，你也應(yīng)該明確設(shè)置jsonpCallback設(shè)置。例如, { jsonp: false, jsonpCallback: "callbackName" }

jsonpCallback：String、Function，為jsonp請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。這個(gè)值將用來取代jQuery自動(dòng)生成的隨機(jī)函數(shù)名。這主要用來讓jQuery生成一個(gè)獨(dú)特的函數(shù)名，這樣管理請(qǐng)求更容易，也能方便地提供回調(diào)函數(shù)和錯(cuò)誤處理。你也可以在想讓瀏覽器緩存GET請(qǐng)求的時(shí)候，指定這個(gè)回調(diào)函數(shù)名。從jQuery 1.5開始，你也可以使用一個(gè)函數(shù)作為該參數(shù)設(shè)置，在這種情況下，該函數(shù)的返回值就是jsonpCallback的結(jié)果。

contents： PlainObject，一個(gè)以"{字符串/正則表達(dá)式}"配對(duì)的對(duì)象，根據(jù)給定的內(nèi)容類型，解析請(qǐng)求的返回結(jié)果。

contentType：String，默認(rèn)application/x-www-form-urlencoded; charset=UTF-8。發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型。

context：Object，設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文。即改變回調(diào)函數(shù)的this，默認(rèn)就是傳入的整個(gè)對(duì)象。

converters： PlainObject，默認(rèn): {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}。一個(gè)數(shù)據(jù)類型到數(shù)據(jù)類型轉(zhuǎn)換器的對(duì)象。每個(gè)轉(zhuǎn)換器的值是一個(gè)函數(shù)，返回經(jīng)轉(zhuǎn)換后的請(qǐng)求結(jié)果。

crossDomain：Boolean，同域請(qǐng)求為false， 跨域請(qǐng)求為true。如果你想在同一域中強(qiáng)制跨域請(qǐng)求（如JSONP形式），例如，想服務(wù)器端重定向到另一個(gè)域，那么需要將crossDomain設(shè)置為 true 。

username：String，于響應(yīng)HTTP訪問認(rèn)證請(qǐng)求的用戶名

password：String，用于響應(yīng)HTTP訪問認(rèn)證請(qǐng)求的密碼

$.ajax() 返回jqXHR對(duì)象，可調(diào)用

.done() success

.fail() error

.always() complete

.then() 傳兩個(gè)回調(diào)函數(shù)，分別是done和fail

$.ajaxPrefilter([dataTypes], handler(options, originalOptions, jqXHR) ) 在每個(gè)請(qǐng)求之前被發(fā)送和$.ajax()處理它們前處理，設(shè)置自定義Ajax選項(xiàng)或修改現(xiàn)有選項(xiàng)。

$.ajaxSetup(options) 為以后要用到的Ajax請(qǐng)求設(shè)置默認(rèn)的值，其后的 AJAX 請(qǐng)求不再設(shè)置任何已設(shè)置的選項(xiàng)參數(shù)。

$.get() {type: "get"}

$.post() {type: "post"}

$.getScript() {type: "script"}

$.getJSON() {type: "json"}

$(selector).load() 從服務(wù)器載入數(shù)據(jù)并且將返回的 HTML 代碼并插入至 匹配的元素中。

// 前端
function jsonpFn(data){
    console.log(data)
    console.log("jsonpFn");
}
$(function(){
    $.ajax({
        url: "http://localhost:3000/test",
        data: {username: "xx"},
        dataType: "jsonp",
        jsonp: "selfNamedReplaceCallback",
        jsonpCallback: "jsonpFn", // server side：req.query.callback = "jsonpFn"
        success(data){
            console.log(data)
        }
    })
})

// 后端
const app = require("express").Router();
app.get("/test", (req, res, next) => {
    let name = req.query.username;
    let callback = req.query.selfNamedReplaceCallback
    let s1 = "{status: 1}"
    let s2 = `
        {
            status: 0,
            info: {
                name: "${name}",
                age: 24,
                sex: "girl",
                tel: "1522*******"
            }
        }
    `
    s1=callback+"("+s1+")"
    s2=callback+"("+s2+")"
    if(!name)return res.send(s1)
    res.send(s2)
}).listen(3000)

axios 是一個(gè)基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

從瀏覽器中創(chuàng)建 XMLHttpRequests

從 node.js 創(chuàng)建 http 請(qǐng)求

支持 Promise API

攔截請(qǐng)求和響應(yīng)

轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)

取消請(qǐng)求

自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)

客戶端支持防御 XSRF

// main.js
import axios from "axios"
axios.defaults.baseURL = "http://localhost/"
Vue.prototype.$axios = axios

// 在 .vue 文件（組件）
this.$axios.get("").then().catch()

this.$axios.all([
    this.$axios.post("one","content=123"),
    this.$axios.get("one?pageIndex=1")
])
.then(this.$axios.spread((res1,res2)=>{
    console.log(res1,res2)
}))
.catch(err=>{
    console.log(err)
})

這里分發(fā)請(qǐng)求，同時(shí)請(qǐng)求成功才執(zhí)行 then 方法，可用于獲取 省市區(qū) 的數(shù)據(jù)

// 在 server.js 文件
const Koa = require("koa")
const Router = require("koa-router")
const app = new Koa()
const router = new Router()
router.get("/one",ctx=>{
    ctx.body = {
        a: 1,
        b: 2
    }
})
router.post("/one",ctx=>{
    ctx.body = {
        c: 3,
        d: 4
    }
})

app.use((ctx,next)=>{
    ctx.set("Access-Control-Allow-Origin", "*");
    ctx.body = {}
    next()
})
.use(router.routes())
.use(router.allowedMethods())
.listen(80)

攔截器

axios.interceptors.request.use(function(ops){
    console.log(ops);
    ops.headers = {/* ... */}; // 請(qǐng)求前修改
    return ops; // 返回沒有修改的位置，如果return false 直接攔截
})

例如，在請(qǐng)求成功前顯示加載loading圖標(biāo)，拿到數(shù)據(jù)后消失

// main.js
import Mint from "mint-ui" // 實(shí)際項(xiàng)目中選擇引入
import "mint-ui/lib/style.css"
Vue.use(Mint)

axios.interceptors.request.use(function(config){
    Mint.Indicator.open()
    return config;
})
axios.interceptors.response.use(function(data){
    Mint.Indicator.close()
    return data;
})

ajax最早出現(xiàn)的發(fā)送后端請(qǐng)求技術(shù)，利用用XMLHttpRequest對(duì)象。

$.ajax是jQuery中的發(fā)送后端請(qǐng)求技術(shù)，基于原生Ajax的封裝。

Axios不是原生JS的，需要進(jìn)行安裝。它在client-side和server-side都可以使用。也可以在請(qǐng)求和響應(yīng)階段進(jìn)行攔截。它是基于promise對(duì)象的。

Fetch號(hào)稱是AJAX的替代品，使用了ES6中的promise對(duì)象。其參數(shù)有點(diǎn)像jQuery.ajax。但是fetch不是對(duì)ajax的封裝，而是原生js實(shí)現(xiàn)的，并沒有使用XMLHttpRequest對(duì)象。