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

Posted 小菜与小鸟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现前后端数据交互的方法相关的知识,希望对你有一定的参考价值。

前端工程师的职责:1、UI重构  2、在正确的区域渲染出服务端的数据。

毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成。

下文将罗列前端工程师应该必备的同后端打交道的常用技能。

1、服务端渲染

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

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

  常用的php模板:Smarty,Blade,Mustache。

  如果使用Node.js作为服务端的话: ejs,doT,jade等。

2、Ajax

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

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

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

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

3、JSONP

  JSONP,算作json的一种使用模式,可以解决主流浏览器的跨域数据访问的问题。

  $.ajax({

    url:"",

    dataType:"jsonp",

    jsonpCallback:function(){}

  })

4、comet

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

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

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

5、SSE

6、Web Socket

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

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

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

  注意:SSE和 Web Sockets 都是新的api,需要大家考虑兼容性。

7、小结

  说了那么多简单总结下,大家想明白几点就行了,客户端与服务端谁先主动,是否强调数据的实时性。

  

  AJAX – 请求 → 响应 (频繁使用)

 

  Comet – 请求 → 挂起 → 响应 (模拟服务端推送)  

 

  Server-Sent Events – 客户单 ← 服务端 (服务端推送)  

 

  WebSockets – 客户端 ? 服务端 (未来趋势,双工通信)

以上是关于实现前后端数据交互的方法的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序前后端分离怎么实现

前端与后端有哪几种ajax交互方法

基于Tomcat服务器,通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流(不必跳转或者刷新网页实现JSP前后端交互)

基于Tomcat服务器,通过JQuery的Ajax方法访问Servlet实现前后端数据同步/异步交流(不必跳转或者刷新网页实现JSP前后端交互)

网页前后端交互示例

网页前后端交互示例