App下載

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

猿友 2020-12-12 17:16:24 瀏覽數(shù) (23407)
反饋

  正如我們所知,一個(gè)完整的IT項(xiàng)目是由多個(gè)不同崗位共同完成的,包括UI設(shè)計(jì)、前端開(kāi)發(fā)、后端開(kāi)發(fā)、測(cè)試等。前端后端需要通過(guò)技術(shù)上交互實(shí)現(xiàn)聯(lián)通,那么web前后端交互技術(shù)都有哪些呢?

  前端開(kāi)發(fā)需要做的事情,只有兩個(gè):1. 創(chuàng)建界面結(jié)構(gòu) 2. 數(shù)據(jù)交互

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

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

  取:將數(shù)據(jù)渲染到dom文檔中  給:提交數(shù)據(jù)到后臺(tái)后,后臺(tái)會(huì)繼續(xù)返回我們一個(gè)數(shù)據(jù),拿到這個(gè)數(shù)據(jù),然后渲染頁(yè)面.


  1. 利用cookie

  例如:前臺(tái)通過(guò)登錄來(lái)存儲(chǔ)cookie

  后臺(tái)通過(guò)req.cookies()來(lái)獲取存儲(chǔ)的cookie信息


  2. 利用Ajax

  在學(xué)習(xí)NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已經(jīng)封裝好的$.ajax、$.post、$.getJSON 通過(guò)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象,來(lái)進(jìn)行前后端交互。

  在學(xué)NodeJS之后我們也利用依賴(lài)于$http服務(wù)自己搭建的_http來(lái)完成get、post和jsonp的方式來(lái)進(jìn)行前后端交互;


  3. jsonp

  jsonp是前后端結(jié)合跨域方式,因?yàn)榍岸握?qǐng)求到數(shù)據(jù)需要在回調(diào)函數(shù)中使用,所以后端得將數(shù)據(jù)放回到回調(diào)函數(shù)中

  jsonp屬于A(yíng)JAX嗎? ajax是指通過(guò)使用xmlhttpquest對(duì)象進(jìn)行異步數(shù)據(jù)交互的技術(shù),jsonp是依靠scriptsrc屬性來(lái)獲取的,不屬于ajax


  4. 服務(wù)端渲染

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

  在php中實(shí)現(xiàn)服務(wù)端渲染:

  在php語(yǔ)言文件中可以放入html代碼,訪(fǎng)問(wèn)php文件的時(shí)候就相當(dāng)于訪(fǎng)問(wèn)這個(gè)對(duì)應(yīng)的html文件,因?yàn)樵趐hp文件中,所以可以寫(xiě)一些php的代碼來(lái)渲染數(shù)據(jù)

  在Node中實(shí)現(xiàn)服務(wù)端渲染:

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

  注意:express里的路由是靠請(qǐng)求路徑劃分的,前一個(gè)自己搭的路由是根據(jù)請(qǐng)求類(lèi)型劃分的。


  5. webSocket 和 Socket.io

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

  通過(guò)建立socket雙向連接,就可以讓客戶(hù)端和服務(wù)端直接進(jìn)行雙向通信

  簡(jiǎn)單的小案例:socket.io聊天的思路

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

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

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

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

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

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


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



1 人點(diǎn)贊