web前后端交互方式有哪些?

　　正如我們所知，一個完整的IT項目是由多個不同崗位共同完成的，包括UI設計、前端開發(fā)、后端開發(fā)、測試等。前端后端需要通過技術上交互實現(xiàn)聯(lián)通，那么web前后端交互技術都有哪些呢？

　　前端開發(fā)需要做的事情，只有兩個：1. 創(chuàng)建界面結構 2. 數(shù)據(jù)交互

　　數(shù)據(jù)交互其實又可以分為兩種：1. 給后臺技術 2. 從后臺那數(shù)據(jù)

　　數(shù)據(jù)交互的目的是什么？

　　?。簩?shù)據(jù)渲染到dom文檔中  給：提交數(shù)據(jù)到后臺后，后臺會繼續(xù)返回我們一個數(shù)據(jù)，拿到這個數(shù)據(jù)，然后渲染頁面.

　　1. 利用cookie

　　例如：前臺通過登錄來存儲cookie

　　后臺通過req.cookies（）來獲取存儲的cookie信息

　　2. 利用Ajax

　　在學習NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已經(jīng)封裝好的$.ajax、$.post、$.getJSON 通過創(chuàng)建一個XMLHttpRequest對象，來進行前后端交互。

　　在學NodeJS之后我們也利用依賴于$http服務自己搭建的_http來完成get、post和jsonp的方式來進行前后端交互；

　　3. jsonp

　　jsonp是前后端結合跨域方式，因為前段請求到數(shù)據(jù)需要在回調(diào)函數(shù)中使用，所以后端得將數(shù)據(jù)放回到回調(diào)函數(shù)中

　　jsonp屬于AJAX嗎？ ajax是指通過使用xmlhttpquest對象進行異步數(shù)據(jù)交互的技術，jsonp是依靠scriptsrc屬性來獲取的，不屬于ajax

　　4. 服務端渲染

　　瀏覽器請求到的內(nèi)容其實可以通過后端加工一下,將一會數(shù)據(jù)直接渲染好，再給瀏覽器就可以了

　　在php中實現(xiàn)服務端渲染：

　　在php語言文件中可以放入html代碼，訪問php文件的時候就相當于訪問這個對應的html文件，因為在php文件中，所以可以寫一些php的代碼來渲染數(shù)據(jù)

　　在Node中實現(xiàn)服務端渲染：

　　利用模板引擎，node在渲染模板的時候給模板傳入數(shù)據(jù)，在模板中就可以使用特定的語法來渲染dom了 例如：ejs,jade

　　注意：express里的路由是靠請求路徑劃分的，前一個自己搭的路由是根據(jù)請求類型劃分的。

　　5. webSocket 和 Socket.io

　　網(wǎng)上的兩個程序通過一個雙向的通信連接實現(xiàn)數(shù)據(jù)的交換，這個連接的一端成為一個scoket

　　通過建立socket雙向連接，就可以讓客戶端和服務端直接進行雙向通信

　　簡單的小案例：socket.io聊天的思路

　　1. 服務器端建立好服務端， var wss=require(“socket.io”)(server)

　　2. 創(chuàng)建客戶端的連接socket var wsc = io.connect(‘ws://’)

　　3. 客戶端連接 wsc.on(“connect”,function(e){})

　　4. 服務器端接收到客戶端連接的消息 wss.on(“connection”,function(socket){})

　　5. 客戶端發(fā)送消息的時候觸發(fā) wsc.on(“meaasge”,function(msg){})

　　6. 客戶端接收到服務器端發(fā)送消息 wsc.on(“message”,function(e){})

　　一個合格的前端人才，不僅要把握本職專業(yè)技能，還要了解必定的后端開發(fā)技能，這樣才能更好的工作交流。推薦相關閱讀==》網(wǎng)站后端開發(fā)具體做什么