JS 進階(八) 前後端通訊

1、前後端通訊

1、AJAX: 前後端數據通訊非常重要的手段，基於AJAX從伺服器獲取數據，基於用戶端實現數據的渲染

JQuery $.ajax([options])
Axios

2、Fetch: 新的前後端通訊方案

3、跨域處理

jsonp
iframe(document.domain.location.hash…)
postMessage
CORS
proxy

伺服器渲染(前後端沒有完全分離)

用戶端	伺服器端
瀏覽器獲取程式碼後，進行解析 + DOM樹 +CSSOM樹 +RENDER樹 +Layout 分層繪製 +…	Web站點資源 index.jsp ndex.css

伺服器渲染

弊端：

中後臺，輕前端
伺服器壓力大
無法實現區域性重新整理

好處

有利於SEC優化，頁面原始碼重可以看到所有動態系結的內容
如果伺服器抗壓能力強，則頁面渲染速度很快

SSR：基於NODE業務邏輯的處理，頁面模版基於一些框架，jade/ejs/nuxt.js/next.js, 基於NODE環境完成伺服器渲染

用戶端渲染：前後端分離開發

前端開發：

頁面製作
JS互動效果
數據互動
web站點的部署(linux/nginx)

後端開發：

寫API介面
寫業務邏輯(數據庫的增刪改查)

優勢：

前後端二分天下，不分輕重
伺服器壓力小，降低很多
可以實現區域性重新整理

弊端：不利於SEO優化，基於JS完成的數據系結，頁面原始碼中是不存在的,需要至少請求兩次(一次頁面資源請求，一次數據請求) ，如果網路慢，則白屏時間較長

當代專案架構模型

基於NODE.JS的伺服器渲染(大部分伺服器渲染) => 需要考慮SEO
用戶端渲染(純用戶端渲染)：伺服器用啥語言和我們沒關係，我們只需要基於ajax拿到數據即可

—> 前端基於loading或者骨架背景等在數據請求回來之前，做一個處理，來減少白屏時間
半用戶端渲染：首屏資訊都是基於伺服器渲染(伺服器骨架屏)，第一次載入完，後期再渲染，還是基於ajax用戶端渲染，其他屏都是用戶端渲染
用戶端 + 中間層(NODE.JS) + 數據分析層

AJAX

核心：

在早起基於ajax獲取的數據格式基本都以xml格式爲主，只不過現在都以json格式爲主

ajax: async javascript and xml

XMLHttpRequest: 也就是基於http請求從伺服器拿到xml格式的數據

建立一個XHR物件(AJAX範例)

let xhr = new XMLHttpRequest;
開啓請求API地址(發送之前的一些設定資訊)
- GET系列(get/head/delete/options)
- POST系列(post/put)
- GET系列請求傳遞給伺服器一般基於URL問號參數
- POST系列請求傳遞給伺服器的資訊一般基於"請求主體"
- 所有請求方式都可以基於請求頭把資訊傳遞給伺服器
xhr.open( [method], [url] , [async 預設true] )

xhr.setRequestHeader(‘xxx’,‘zhufeng’)

監聽請求進度: 當ajax狀態改變

xhr.readyState
- 2 響應頭資訊返回（伺服器時間）
- 4 響應主體資訊返回
Xhr.status
- 不是所有請求都一定成功，網路狀態碼記錄了這個結果

1. xhr.onreadystatechange = function(){ 
     if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
        // 獲取響應頭資訊
       console.log(xhr.getResponseHeader('date'))
       console.log(xhr.getallResponseHeaders());
       // 獲取響應主體
       xhr.responseText; (最常用 JSON.parsen())
       xhr.responseXML;
       xhr.response;
       xhr.responseType;
     } 
   }
2.

發送請求

xhr.send([請求主體資訊])

axios

axios中文官網

axios 是基於Promise封裝的ajax庫（核心還是ajax的四步操作）, 這樣通過Promise非同步管控，避免序列介面呼叫形成回撥地獄
- ajax請求一般採用的是非同步
  - ajax的序列：第一個介面請求成功才能纔能繼續請求第二個
```
 傳統的
 $.ajax({
     url:'http://v1.hitokoto.cn',
     success:result=>{
          $.ajax({
              url:'http://v1.hitokoto.cn',
              success:result=>{
                  ...
              }
          })   
     }
 })
 axios.get('http://v1.hitokoto.cn').then(res=>{
     return axios.get('http://v1.hitokoto.cn');
 }).then(response=>{})
```
  - ajax的並行：同時發送多個介面請求，當所有介面都請求成功，再去執行某些事(Promise.all) —— Axios.all
- 基於Promise管理ajax的非同步操作
- URLSearchParams瀏覽器新增的處理問號傳參的類
  let obj = new URLSearchParams(‘name=liming&age=12’)
  console.log(…obj.values())
axios的基礎使用

axios([config])

axios([url],[config])

axios.get/head/delete/options([url],[config])

axios.post/put([url],[data],[config])
axios的二次封裝

攔截器
一些常規設定

axios原始碼(基於Promise封裝一個ajax庫)

Fetch

瀏覽器新增的API，預設就是基於Promise管理的(核心不是XMLHttpRequest)

JS 進階(八) 前後端通訊

1、前後端通訊

AJAX

axios

Fetch