羊蹓狼 发表于 2024-10-31 13:50:52

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

 正如我们所知,一个完备的IT项目是由多个不同岗位共同完成的,包括UI设计、前端开辟、后端开辟、测试等。前端后端需要通过技能上交互实现联通,那么web前后端交互技能都有哪些呢?
  前端开辟需要做的事变,只有两个:1. 创建界面结构 2. 数据交互
  数据交互其实又可以分为两种:1. 给背景技能 2. 从背景那数据
  数据交互的目的是什么?
  取:将数据渲染到dom文档中  给:提交数据到背景后,背景会继续返回我们一个数据,拿到这个数据,然后渲染页面.

  1. 利用cookie
  例如:前台通过登录来存储cookie
  背景通过req.cookies()来获取存储的cookie信息

  2. 利用Ajax
  在学习NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已经封装好的$.ajax、$.post、$.getJSON 通过创建一个XMLHttpRequest对象,来进行前后端交互。
  在学NodeJS之后我们也利用依靠于$http服务本身搭建的_http来完成get、post和jsonp的方式来进行前后端交互;

  3. jsonp
  jsonp是前后端联合跨域方式,由于前段哀求到数据需要在回调函数中使用,所以后端得将数据放回到回调函数中
  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){})

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: web前后端交互方式有哪些?