Web前端（十二）-同步和異步、如何發出異步請求、前后端分離、json

同步和異步

• 同步: 單線程依次做幾件事

• 異步:多線程同時做幾件事

• 同步請求: 客戶端瀏覽器 只有一個主線程,主線程負責頁面渲染和事件監聽,當需要發出請求時, 頁面會停止渲染(清空頁面,原頁面的內容就沒有了),主線程負責發出請求得到響應數據,得到數據后主線程繼續渲染頁面,這種方式只能實現頁面的整體刷新

• 異步請求:客戶端瀏覽器主線程負責頁面渲染和事件監聽,由單獨的子線程負責發出請求獲取數據, 這樣得到數據后就可以在原頁面的基礎上做頁面的改動(叫做頁面的局部刷新)

• 異步請求可以實現頁面的局部刷新 同步不能!

 

如何發出異步請求

• 通過一個axios框架發出異步請求, 此框架是一個前端js文件

• 通過以下代碼引入框架:

   <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

前后端分離

• 為什么使用前后端分離?

  • 讓后端程序員不需要考慮前端是瀏覽器客戶端還是手機客戶端,給客戶端返回的內容統一為數據, 這樣后端程序員只需要提供一套代碼即可,從而大大提高了后端的開發效率

• 為什么前后端分離后使用異步請求?

  • 前后端分離后,瀏覽器發出兩次請求,第一次獲取靜態的html頁面, 頁面加載完之后通過局部刷新的方式把請求到的數據展示到頁面中, 使用局部刷新則只能使用異步請求

• 同步請求用的多還是異步請求用的多?

  • 由於以后工作中幾乎所有場景現在都是前后端分離的模式, 則以后工作中幾乎使用的都是異步請求.

 

 

JSON

• json是一個輕量級的數據交換格式(也叫數據封裝格式),作用類似xml,但是保存同樣數據時 數據量json更小,所以更節省資源.

• 應用場景:當客戶端和服務器之間進行復雜的數據交換時

• 客戶端發出請求 服務器如何響應的json字符串?

  • 當Controller中的方法返回值為集合或對象時,SpringMVC框架內部會自動將集合或對象轉成json字符串,然后將json字符串再轉成二進制數據傳輸給客戶端, 客戶端如果通過的是axios框架發出的請求,接收到json字符串數據時會自動將json字符串轉成對象或數組