實現先後端數據交互的方法

前端工程師的職責：一、UI重構  二、在正確的區域渲染出服務端的數據。

畢竟，咱們要構建一個大的web應用，必然不是普普統統的靜態頁面構成。

下文將羅列前端工程師應該必備的同後端打交道的經常使用技能。

一、服務端渲染

　　談起服務端渲染，對於動態服務而言，這個世界上跑的大多數頁面都通過服務端的數據渲染，接口->前端賦值->模板渲染。

　　這些都是在服務器完成，在咱們查看源碼的時候，能夠看到完整的html代碼，包括每一個數據值。

　　經常使用的php模板：Smarty，Blade，Mustache。

　　若是使用Node.js做爲服務端的話: ejs，doT，jade等。

二、Ajax

　　服務端渲染隨着單頁面應用以及Restful接口的興起，Ajax逐漸成爲目前先後端交流最爲頻繁的方式。

　　Ajax的核心是XmlHttpRequest。咱們經過對該對象的操做來進行異步的數據請求。

　　實際上咱們接觸到最多jQuey就有很好的封裝，好比$.ajax，$.post等，若是用Angular的話咱們能夠用$http服務，

　　除了這些以外，咱們可使用第三方的Ajax庫qwest等。

三、JSONP

　　JSONP，算做json的一種使用模式，能夠解決主流瀏覽器的跨域數據訪問的問題。

　　$.ajax({

　　　　url:"",

　　　　dataType:"jsonp",

　　　　jsonpCallback:function(){}

　　})

四、comet

　　聊Comet咱們還得說下短輪詢，因爲某些特定的業務需求，好比通知，咱們須要有及時的數據更新,

　　咱們可以想到的就是使用setInterval每隔必定時間好比10s去獲取一次請求，從而作到一些通知更新，可是這並不一種高效的作法，這會增長服務器的請求數量。

　　這個時候有了另一種概念，「反向Ajax」，由服務器進行數據推送， Comet可以讓信息近乎實時的被推送到頁面上，很是適合要求實時性的獲取的數據的頁面。

五、SSE

六、Web Socket

　　HTML5 WebSocket 設計出來的目的就是要取代輪詢和 Comet 技術，使客戶端瀏覽器具有像 C/S 架構下桌面系統的實時通信能力。

　　瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。

　　也就是咱們可使用web技術構建實時性的程序好比聊天遊戲等應用。

　　注意：SSE和 Web Sockets 都是新的api，須要你們考慮兼容性。

七、小結

　　說了那麼多簡單總結下，你們想明白幾點就好了，客戶端與服務端誰先主動，是否強調數據的實時性。

　　

　　AJAX – 請求 → 響應 （頻繁使用）

 

　　Comet – 請求 → 掛起 → 響應 （模擬服務端推送） 　

 

　　Server-Sent Events – 客戶單 ← 服務端 （服務端推送） 　

　

　　WebSockets – 客戶端 ↔ 服務端 (將來趨勢,雙工通訊)