先後端數據交互的幾個方法

 

前端開發須要作的事情，只有兩個：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){})

　

總結是一個按部就班的過程，慢慢的瞭解和掌握纔是總結的目的。固然總結也不必定是很是的完美，初來乍到，請你們多多指教