Ajax
- AJAX
- 異步請求區域重繪
- Ajax 引數詳解
- js、json、jsonp區別
- json和jsonp的區別
- 同源策略
- json和js物件的區別
- Ajax高級用法（axios）
- 為什么要用Axios
AJAX
ajax 即 “Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建互動式、快速動態網頁應用的技術，早期只有同步的方式，多個請求，只能順序執行，只能等待執行，有了ajax異步技術，可以無需等待上一個請求執行完成，就可以直接發起請求，服務端回傳后，ajax通過回呼技術通知客戶端程式，把回應的結果傳遞給用戶事先寫好的回呼函式，通過在后臺與服務器進行少量資料交換，Ajax 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁進行區域更新，提升網頁的效率，用戶無需等待頁面的重繪，嗖的一下內容就變化了，改變原有整個頁面重繪，造成頁面晃眼的現象，所以這項技術一出現，就得到業界的推崇，
關鍵字：異步、回呼、區域重繪，
異步請求區域重繪
主流方式：
技術堆疊
- HTML 頁面展示
- JavaScript 形成互動
- jQuery 封裝JavaScript，代碼更加簡潔高效
- json 資料傳輸
- ajax 異步請求
- Web中間件(tomcat) 處理請求和回應
- mysql資料庫 存取資料
用戶頁面中觸發ajax請求，訪問后端服務器，Web 中間件 攔截用戶請求，轉發后端程式進行資料處理，一般還需訪問資料庫，然后逐層回傳，資料庫回傳資料處理服務，資料處理服務回傳Web中間件，Web中間件回傳ajax呼叫，將資料封裝到回傳的js物件中，目前主流回傳資料為json字串（可以通過Jsonp格式實作跨域訪問），在回呼callback的方法中決議json中的資料，最侄訓顯到頁面上，通常我們使用jquery封裝過的ajax，寫法更加簡潔靈活，
Ajax 引數詳解
$.ajax({ //互動方式 $.get，$.post，$.getJSON
async: //請求同步異步，默認true異步
type: //請求型別：GET/POST
url: //請求的網站地址
data: //提交的資料，引數
contentType: //請求的MIME媒體型別：application/x-www-form-urlencoded（默認）、application/json;charset=UTF-8
dataType: //服務器回傳MIME型別：xml/html/script/json/jsonp
success: function(data){ //請求成功，回呼函式，data封裝網站回傳的資料
console.log( data );
},
error: function(e){ //請求失敗回呼函式，e封裝錯誤資訊
console.log(e.status); //狀態碼
console.log(e.responseText); //錯誤資訊
}
})
js、json、jsonp區別
json和jsonp的區別
json請求回傳就是json格式，而jsonp請求回傳是fun(json)格式，
- 京東的價格是單獨發起ajax請求，回傳json陣列，一次可以查詢多個價格
查詢網址：http://p.3.cn/prices/mgets?skuIds=J_1411013,J_1411014
[{"p":"-1.00","op":"3888.00","cbf":"0","id":"J_1411013","m":"6699.00"},
{"p":"-1.00","op":"799.00","cbf":"0","id":"J_1411014","m":"1398.00"}]
- 京東的商品描述是單獨發起ajax請求，回傳jsonp格式資料，回顯到頁面
查詢網址：https://d.3.cn/desc/1411000
通過JSONView插件展示資料：
網站有一個跨域問題，非同一個網站的請求默認是禁止的**（同源策略）**，那我們的頁面要訪問其他網站啊，例如：我們訪問京東獲取其商品的價格資訊，這時就必須用jsonp方式進行跨域請求，
同源策略
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源，所以a.com下的js腳本采用ajax讀取b.com里面的檔案資料是會報錯的，
json和js物件的區別
json字串: { "id":"100","name":"tony","salary":"30000" }
js物件： { "id":100,"name":"tony","salary":30000 }
可以看出js物件中value值如果是整數，小數，無需加雙引號
- 含義不同，json是一種資料格式，js物件表示類的實體
- 傳輸：json用于跨平臺、跨網路傳輸，速度快；js不能傳輸
- 展現：json是字串不能是物件方法函式；js值不一定加雙引號，值可以是物件、函式、字串等
- 轉換：JSON已經作為瀏覽器內置物件，eval(json)、JSON.parse(jsonStr) 、JSON.stringify(obj)
Ajax高級用法（axios）
Vue中封裝了ajax并增強了它，在異步并發處理優于原生ajax，稱為：axios（ajax input output system）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
//引入js支持,axios.min.js檔案
<script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
商品價格：{{info}}
</div>
</body>
<script>
new Vue({
el: "#app",
data(){ //data的ES6函式寫法
return {
info : null
}
},
mounted(){
axios.get('../data/price.json')
.then(
//箭頭函式，res為回傳值，res.data 回傳的json資料物件
res => (
this.info = res.data.price
)
)
.catch(function (e){
console.log(e)
})
}
})
</script>
</html>
注意：
axios請求頭的 Content-Type 默認是 application/json，而postman默認的是 application/x-www-form-urlencoded，
ajax一般采用@RequestParam接收引數：
@ResponseBody
public Result testpost(@RequestParam String username) {}
axiso采用@RequestBody的json方式接收引數
@ResponseBody
public Result testget(@RequestBody Map map) {}
為什么要用Axios
傳統 Ajax 指的是 XMLHttpRequest（XHR）， 最早出現的發送后端請求技術，隸屬于原始js中，核心使用XMLHttpRequest物件，多個請求之間如果有先后關系的話，就會出現回呼地獄，
JQuery ajax 是對原生XHR的封裝，除此以外還增添了對JSONP的支持，經過多年的更新維護，真的已經是非常的方便了，優點無需多言；如果是硬要舉出幾個缺點，那可能只有：
- 本身是針對MVC的編程,不符合現在前端MVVM的浪潮
- 基于原生的XHR開發，XHR本身的架構不清晰，
- JQuery整個專案太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務）
- 不符合關注分離（Separation of Concerns）的原則
- 配置和呼叫方式非常混亂，而且基于事件的異步模型不友好，
Vue2.0之后，尤雨溪推薦大家用axios替換JQuery ajax，想必讓axios進入了很多人的目光中，
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實作版本，符合最新的ES規范，它本身具有以下特征：
- 從瀏覽器中創建 XMLHttpRequest
- 支持 Promise API
- 客戶端支持防止CSRF
- 提供了一些并發請求的介面（重要，方便了很多的操作）
- 從 node.js 創建 http 請求
- 攔截請求和回應
- 轉換請求和回應資料
- 取消請求
- 自動轉換JSON資料
防止CSRF：就是讓你的每個請求都帶一個從cookie中拿到的key，根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，后臺就可以輕松辨別出這個請求是否是用戶在假冒網站上的誤導輸入，從而采取正確的策略，
fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise物件，Fetch是基于promise設計的，Fetch的代碼結構比起ajax簡單多了，引數有點像jQuery ajax，但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest物件，
總得來說：axios既提供了并發的封裝，也沒有fetch的各種問題，而且體積也較小，當之無愧現在最應該選用的請求的方式，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277693.html
標籤：其他
上一篇：vue首次渲染全程序