Ajax詳解
Ajax(Asynchronous JavaScript And XML)
傳統web互動使用戶觸發一個http請求，服務器接收到請求之后，回應到用戶，回傳一個新頁面；AJAX是一種用于創建快速動態網頁的技術，通過在后臺與服務器進行少量資料交換，AJAX 可以使網頁實作異步更新，
異步與同步
JS是單執行緒語言， 同步 代碼會從上到下執行，如果中間某一段代碼執行時間較長，后面的代碼必須等待前面執行完，才能執行，JS 對于這種場景就設計了異步，JS代碼執行的機制是將遇到的異步代碼放到 異步佇列 中，執行完所有同步代碼后，異步代碼再出佇列執行，
優點和不足
- 優點
- 不需要插件支持（一般瀏覽器且默認開啟 JavaScript 即可）
- 用戶體驗極佳（不重繪頁面即可獲取可更新的資料）
- 提升 Web 程式的性能（在傳遞資料方面做到按需放松，不必整體提交）
- 減輕服務器和帶寬的負擔（將服務器的一些操作轉移到客戶端）
- 不足
- 不同版本的瀏覽器度 XMLHttpRequest 物件支持度不足(比如 IE5 之前)
- 前進、后退的功能被破壞（因為 Ajax 永遠在當前頁，不會記錄前后頁面）
- 3.搜索引擎的支持度不夠（因為搜索引擎爬蟲還不能理解 JS 引起變化資料的內容）
Ajax互動
-
準備頁面請求，創建XMLHttpRequest物件
let xhr = new XMLHttpRequest(); -
使用XMLHttpRequest物件的open()和send()方法發送請求
/**open()有三個引數 *@param {string} method 提交方法 *@param {string} url 提交地址 *@param {boolean} true 是否異步，默認為異步，一般不設定 */ //get提交 xhr.open('get','url?id=1'); //send()方法引數里放request body里面的攜帶的值 xhr.send()//get方法提交不傳參 //post提交 xhr.open('post','url'); //設定enctype xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //發送請求資訊 xhr.send('id=1'); -
onreadystatechange函式，狀態改變時發送資料回客戶端，使用 XMLHttpRequest物件的responseText或responseXML屬性獲得服務器的回應
xhr.onreadystatechange = function(){ //判斷狀態是否為完成回應 if(xhr.readyState == 4）{ //判斷回傳值是否正確 if (xhr.status == 200) { console.log(xhr.responseText); } } }-
1** 請求收到，繼續處理
-
2** 操作成功收到，分析、接受
-
3** 完成此請求必須進一步處理
-
4** 請求包含一個錯誤語法或不能完成
-
5** 服務器執行一個完全有效請求失敗
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版
200——交易成功
201——提示知道新檔案的URL
202——接受和處理、但處理未完成
203——回傳資訊不確定或不完整
204——請求收到，但回傳資訊為空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的檔案
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——洗掉請求資料
302——在其他地址發現了請求資料303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但檔案未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性洗掉
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭回應
403——請求不允許
404——沒有發現檔案、查詢或URl
405——用戶在Request-Line欄位定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭欄位在當前請求中錯誤
413——請求的資源大于服務器允許的大小
414——請求的資源URL長于服務器允許的長度
415——請求資源不支持請求專案格式
416——請求中包含Range請求頭欄位，在當前請求資源范圍內沒有range指示值，請求也不包含If-Range請求頭欄位
417——服務器不滿足請求Expect頭欄位指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函式
502——服務器暫時不可用，有時是為了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來回應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
-
瀏覽器同源策略
瀏覽器安全策略，保障非同源資源之間資料訪問的安全性，默認不允許非同源的資源直接訪問，
URL：協議://域名:埠/路徑名稱?查詢字串#位置識別符號
同源：協議、域名、埠完全一致，只要三個中有任何一個不一致，則是非同源，非同源資源間需要進行訪問，則需要實作跨域，
跨域
-
CORS(cross-origin resource sharing,跨域資源共享)
只需在服務器端設定回應頭資訊：Access-Control-Allow-Origin:*，如
header("Access-Control-Allow-Origin:*"); //php -
jsonp
利用<script>在引入外部JS時不受同源策略限制的特性，來實作跨域，(src的開放性原則)
JSONP只能處理GET請求方式的跨域
function jsonp(url, fn, query) { let str = ''; //拼接回呼函式引數 url += `?cb=${fn}`; if (query) { //拼接其他函式 for (let key in query) { str += `&${key}=${query[key]}`; } } //引數拼接在url后面 url += str; //創建一個script const script = document.createElement("script"); //設定src script.src = https://www.cnblogs.com/chenliang0817/p/url; //將script渲染到頁面 document.body.appendChild(script); //請求后移除script document.body.removeChild(script); } -
proxy(代理) 通過當前服務器訪問跨域的服務器
初始化npm init全域安裝gulp
npm i gulp -g本地下載gulp包
npm i gulp --save-dev本地下載http-proxy-middleware包
npm i http-proxy-middleware -dev
const proxy = require('http-proxy-middleware') //指定任務
// 原請求方式：$.get('http://localhost:80/api/login.php')
const server = () => {
connect.server({
port: 8081, //自定義埠
root: 'dist', //埠根目錄
livereload: true,
// 中間件：指的是在請求回應程序當中做一些處理
// 是一個函式，回傳值是一個陣列，在陣列里配置代理跨域
middleware () {
return [
// 將前端請求以/api開頭的代理到后端埠
proxy('/api', {
target: 'http://localhost:80', //請求的后端埠
changeOrigin: true
})
]
}
})
}
```
promise（ES6）
承諾：兌現（resolve）或 失信（rejected）
這個物件有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗），只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態，這也是 Promise 這個名字的由來，它的英語意思就是「承諾」，表示其他手段無法改變，
new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('get', './06.php?id=5')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// resolve只能傳一個引數，如果要傳遞多個引數，使用物件
resolve(xhr.responseText, 5)
} else {
reject()
}
}
}
}).then((resp, num) => {
console.log(resp)
console.log(num) // undefined
}).catch(() => {
console.log('網路錯誤')
})
-
Promise.all(iterable)
-- iterable : 可迭代物件（陣列）
-- 回傳Promise物件
-- 當陣列中所有Promise物件都完成時，回呼執行成功的函式，當只要有一個執行失敗時，就回呼執行失敗的函式，
-
Promise.race(iterable)
-- iterable : 可迭代物件（陣列）
-- 回傳Promise物件
-- 當陣列中所有Promise物件任意有一份完成時，回呼執行成功的函式，
by：逆戰班 陳亮
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147686.html
標籤：JavaScript
下一篇：JavaScript之DOM基礎