实现前后端数据交互的方法

1、服务端渲染(SSR:server side render

  谈起服务端渲染,对于动态服务而言,这个世界上跑的大多数页面都经过服务端的数据渲染,接口->前端赋值->模板渲染。

这些都是在服务器完成,在我们查看源码的时候,可以看到完整的html代码,包括每个数据值。

SSR 实际上并没有限定语言和框架: 1.传统的 PHP,jsp,asp 的模板渲染   2. Node JS 领域,包含了 React 或者 Vue 这种模式   3. 也 包含了 Express / Koa / Egg 等基于模板渲染的模式

2、Ajax ( axios )

  服务端渲染随着单页面应用以及Restful接口的兴起,Ajax逐渐成为目前前后端交流最为频繁的方式。

  Ajax的核心是XmlHttpRequest。我们通过对该对象的操作来进行异步的数据请求。

    实际上我们接触到最多jQuey就有很好的封装,比如$.ajax,$.post等,如果用Angular的话我们可以用$http服务,

除了这些之外,我们可以使用第三方的Ajax库axios等

axios :Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

3、JSONP

   JSONP,算作json的一种使用模式,可以解决主流浏览器的 跨域 数据访问的问题。
 
  $.ajax({
    url:"",
    dataType:"jsonp",
    jsonpCallback:function(){}
  })

4、comet

  聊Comet我们还得说下短轮询,由于某些特定的业务需求,比如通知,我们需要有及时的数据更新,

  我们能够想到的就是使用setInterval每隔一定时间比如10s去获取一次请求,从而做到一些通知更新,但是这并不一种高效的做法,这会增加服务器的请求数量。

  这个时候有了另外一种概念,“反向Ajax”,由服务器进行数据推送, Comet能够让信息近乎实时的被推送到页面上,非常适合要求实时性的获取的数据的页面。

5、SSE(Server-Sent Events)

          开发简单,和传统的http开发几乎无任何差别,客户端开发简单,有标准支持,和 WebSocket  相比,只能单工通信,建立连接后,只能由服务端发往客户端,且占用一个连接,如需客户端向服务端通信,需额外打开一个连接  

6、Web Socket

  HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术,使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。

  浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

  也就是我们可以使用web技术构建实时性的程序比如聊天游戏等应用。

7、CROS 跨源资源共享

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(预检请求)(not-so-simple request)

客户端与服务端谁先主动,是否强调数据的实时性。
  •   AJAX – 请求 → 响应 (频繁使用)
  •   Comet – 请求 → 挂起 → 响应 (模拟服务端推送)  
  •   Server-Sent Events – 客户单 ← 服务端 (服务端推送)  
  •   WebSockets – 客户端 ↔ 服务端  (双工通信)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值