摘要：當請求完成后注冊一個回調函數。該請求是否觸發全局處理事件如等，請求發送前的回調函數，用來修改請求發送前，此功能可用來設置自定義頭信息，在函數中返回將取消這個請求。例如，為請求指定一個回調函數名。即改變回調函數的，默認就是傳入的整個對象。

Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術的組合，主要用來實現客戶端與服務器端的異步通信效果，實現頁面的局部刷新，從而創建快速動態網頁的技術。

-  創建XMLHttpRequest對象,也就是創建一個異步調用對象
-  創建一個新的HTTP請求,并指定其請求的方法、URL及驗證信息
-  設置響應 HTTP 請求狀態變化的函數
-  發送 HTTP 請求
-  獲取異步調用返回的數據
-  使用 JavaScript 和 DOM 實現局部刷新

var xhr = null; // 創建異步對象
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest(); // ie7+等現代瀏覽器
}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 必須設置
xhr.onreadystatechange = function(){ // 若為同步，此代碼不用寫，直接在send后，用`xhr.responseText`即可。
    if(xhr.readyState==4 && xhr.status==200){
    /* 
    readyState
        0: 請求未初始化
        1: 服務器連接已建立
        2: 請求已接收
        3: 請求處理中
        4: 請求已完成，且響應已就緒
    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后面用“?”拼接

優點：可以使得頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提高用戶體驗

缺點：對搜索引擎不友好，要實現ajax下的前進后退功能成本較大；跨域問題限制

jQuery 庫支持完整的 Ajax 操作。這里所包含的所有函數和方法用于從服務端加載數據，并且不會導致頁面刷新。

$(document).ajaxComplete(handler(event, XMLHttpRequest, ajaxOptions)) 當Ajax請求完成后注冊一個回調函數。

每當一個Ajax請求完成，jQuery就會觸發ajaxComplete事件，在這個時間點所有處理函數會使用.ajaxComplete()方法注冊并執行。

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

如果global選項設置為false，調用$.ajax() 或 $.ajaxSetup(),.ajaxComplete()方法將不會被觸發。

類似的還有：請求出錯ajaxError()、請求發送前ajaxSend()、請求剛開始ajaxStart()、請求完成時ajaxStop()、請求成功完成時ajaxSuccess()

$.param() 創建一個數組或對象序列化的字符串，適用于一個URL地址查詢字符串或Ajax請求。此方法無法對復雜數據結構進行編碼。

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

    
    
    
        女
        男
    
    


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

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

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

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

url：String，一個用來包含發送請求的URL字符串

data：Object、String，發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后面。

dataType：String，默認Intelligent Guess (xml, json, script, or html))。預期服務器返回的數據類型。

xml，html，script，json，text

jsonp: 以 JSONP 的方式載入 JSON 數據塊。會自動在所請求的URL最后添加 "?callback=?"。默認情況下不會通過在URL中附加查詢字符串變量 "_=[TIMESTAMP]" 進行自動緩存結果，除非將 cache參數設置為true。

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

async：Boolean，默認true，異步請求

global：Boolean，默認true。該請求是否觸發全局處理事件（如$(document).ajaxComplete()等）

beforeSend(jqXHR, settings)：Function，請求發送前的回調函數，用來修改請求發送前jqXHR，此功能可用來設置自定義 HTTP 頭信息，在beforeSend函數中返回false將取消這個請求。

catch：Boolean，默認true，dataType為"script"和"jsonp"時默認為false。是否緩存此頁面，原理是在GET請求參數中附加"_=時間戳"。該參數不是其他請求所必須的，除了在IE8中，當一個POST請求一個已經用GET請求過的URL。

complete：Function，請求完成后回調函數 (請求success 和 error之后均調用)。

success(data, textStatus, jqXHR)：Function，請求成功時調用函數

error：Function，請求失敗時調用函數

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

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

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

contents： PlainObject，一個以"{字符串/正則表達式}"配對的對象，根據給定的內容類型，解析請求的返回結果。

contentType：String，默認application/x-www-form-urlencoded; charset=UTF-8。發送信息至服務器時內容編碼類型。

context：Object，設置Ajax相關回調函數的上下文。即改變回調函數的this，默認就是傳入的整個對象。

converters： PlainObject，默認: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}。一個數據類型到數據類型轉換器的對象。每個轉換器的值是一個函數，返回經轉換后的請求結果。

crossDomain：Boolean，同域請求為false， 跨域請求為true。如果你想在同一域中強制跨域請求（如JSONP形式），例如，想服務器端重定向到另一個域，那么需要將crossDomain設置為 true 。

username：String，于響應HTTP訪問認證請求的用戶名

password：String，用于響應HTTP訪問認證請求的密碼

$.ajax() 返回jqXHR對象，可調用

.done() success

.fail() error

.always() complete

.then() 傳兩個回調函數，分別是done和fail

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

$.ajaxSetup(options) 為以后要用到的Ajax請求設置默認的值，其后的 AJAX 請求不再設置任何已設置的選項參數。

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

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

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

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

$(selector).load() 從服務器載入數據并且將返回的 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 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

從瀏覽器中創建 XMLHttpRequests

從 node.js 創建 http 請求

支持 Promise API

攔截請求和響應

轉換請求數據和響應數據

取消請求

自動轉換 JSON 數據

客戶端支持防御 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)
})

這里分發請求，同時請求成功才執行 then 方法，可用于獲取 省市區 的數據

// 在 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 = {/* ... */}; // 請求前修改
    return ops; // 返回沒有修改的位置，如果return false 直接攔截
})

例如，在請求成功前顯示加載loading圖標，拿到數據后消失

// main.js
import Mint from "mint-ui" // 實際項目中選擇引入
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最早出現的發送后端請求技術，利用用XMLHttpRequest對象。

$.ajax是jQuery中的發送后端請求技術，基于原生Ajax的封裝。

Axios不是原生JS的，需要進行安裝。它在client-side和server-side都可以使用。也可以在請求和響應階段進行攔截。它是基于promise對象的。

Fetch號稱是AJAX的替代品，使用了ES6中的promise對象。其參數有點像jQuery.ajax。但是fetch不是對ajax的封裝，而是原生js實現的，并沒有使用XMLHttpRequest對象。