?

前端開發需要做的事情，只有兩個：1. 創建界面結構 2. 數據交互

?

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

?

數據交互的目的是什么？ 取：將數據渲染到dom文檔中? 給：提交數據到后臺后，后臺會繼續返回我們一個數據，拿到這個數據，然后渲染頁面

1. 利用cookie

eg：前臺通過登錄來存儲cookie
后臺通過req.cookies（）來獲取存儲的cookie信息

2. 利用Ajax

在學習NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已經封裝好的$.ajax、$.post、$.getJSON 通過創建一個XMLHttpRequest對象，來進行前后端交互。 在學NodeJS之后我們也利用依賴于$http服務自己搭建的_http來完成get、post和jsonp的方式來進行前后端交互；

3. jsonp

jsonp是前后端結合跨域方式，因為前段請求到數據需要在回調函數中使用，所以后端得將數據放回到回調函數中 $.ajax({url:"",dataType:"jsonp",jsonp:'callback',success(function(res){console.log(res)}) }) jsonp屬于AJAX嗎？ ajax是指通過使用xmlhttpquest對象進行異步數據交互的技術，jsonp是依靠scriptsrc屬性來獲取的，不屬于ajax

4. 服務端渲染

瀏覽器請求到的內容其實可以通過后端加工一下,將一會數據直接渲染好，再給瀏覽器就可以了
在php中實現服務端渲染：
在php文件中可以放入html代碼，訪問php文件的時候就相當于訪問這個對應的html文件，因為在php文件中，所以可以寫一些php的代碼來渲染數據
在Node中實現服務端渲染：
利用模板引擎，node在渲染模板的時候給模板傳入數據，在模板中就可以使用特定的語法來渲染dom了 例如：ejs,jade
注意：express里的路由是靠請求路徑劃分的，前一個自己搭的路由是根據請求類型劃分的。

　

5. webSocket 和 Socket.io

網上的兩個程序通過一個雙向的通信連接實現數據的交換，這個連接的一端成為一個scoket
通過建立socket雙向連接，就可以讓客戶端和服務端直接進行雙向通信
簡單的小案例：socket.io聊天的思路
1. 服務器端建立好服務端， var wss=require(“socket.io”)(server) 2. 創建客戶端的連接socket var wsc = io.connect(‘ws://’) 3. 客戶端連接 wsc.on(“connect”,function(e){}) 4. 服務器端接收到客戶端連接的消息 wss.on(“connection”,function(socket){}) 5. 客戶端發送消息的時候觸發?wsc.on(“meaasge”,function(msg){}) 6. 客戶端接收到服務器端發送消息 wsc.on(“message”,function(e){})

　

總結是一個循序漸進的過程，慢慢的了解和掌握才是總結的目的。當然總結也不一定是非常的完美，初來乍到，請大家多多指教

轉載于:https://www.cnblogs.com/naniandongzhi/p/7953790.html

總結

以上是生活随笔為你收集整理的前后端数据交互的几个方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。