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

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

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

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

一、服务端渲染

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

　　这些都是在服务器完成，在咱们查看源码的时候，能够看到完整的html代码，包括每一个数据值。

　　经常使用的php模板：Smarty，Blade，Mustache。

　　若是使用Node.js做为服务端的话: ejs，doT，jade等。

二、Ajax

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

　　Ajax的核心是XmlHttpRequest。咱们经过对该对象的操做来进行异步的数据请求。

　　实际上咱们接触到最多jQuey就有很好的封装，好比$.ajax，$.post等，若是用Angular的话咱们能够用$http服务，

　　除了这些以外，咱们可使用第三方的Ajax库qwest等。

三、JSONP

　　JSONP，算做json的一种使用模式，能够解决主流浏览器的跨域数据访问的问题。

　　$.ajax({

　　　　url:"",

　　　　dataType:"jsonp",

　　　　jsonpCallback:function(){}

　　})

四、comet

　　聊Comet咱们还得说下短轮询，因为某些特定的业务需求，好比通知，咱们须要有及时的数据更新,

　　咱们可以想到的就是使用setInterval每隔必定时间好比10s去获取一次请求，从而作到一些通知更新，可是这并不一种高效的作法，这会增长服务器的请求数量。

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

五、SSE

六、Web Socket

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

　　浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求，链接创建之后，客户端和服务器端就能够经过 TCP 链接直接交换数据。

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

　　注意：SSE和 Web Sockets 都是新的api，须要你们考虑兼容性。

七、小结

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

　　

　　AJAX – 请求 → 响应 （频繁使用）

 

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

 

　　Server-Sent Events – 客户单 ← 服务端 （服务端推送） 　

　

　　WebSockets – 客户端 ↔ 服务端 (将来趋势,双工通讯)