写给刚入门的前端工程师的先后端交互指南

转自原文 写给刚入门的前端工程师的先后端交互指南

 

做为刚接触前端的不久的童鞋，你们都会兴奋于CSS和JS所带来漂亮界面，然而，前端工程师除了UI重构外，还有很是重要的职责在正确的区域渲染出服务端的数据。毕竟，咱们要构建一个大的web应用，必然不是普普统统的静态页面构成。

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

服务端渲染

谈起服务端渲染，对于动态服务而言，这个世界上跑的大多数页面都经历过服务端的数据渲染，接口->前端赋值->模版渲染 。这一切都在服务器完成，咱们查看源码时候，能够看到完整的html代码，包括每一个数据值。

经常使用的php模版有，Smarty,Blade,Mustache,若是大家团队使用Smarty，咱们能够看到一些view的文件里会前套Smarty的模版语言;

<div>  
{foreach $list as $item} <h3>{$item['name']}</h3> <p>{$item['desc']}</p> {/foreach} </div>

若是Node,js做为服务端的话，这个时候咱们可使用前端模版渲染的模块，好比ejs,doT,jade等等。

注意不一样的模版可能存在不一样模版语法，须要本身学习使用

AJAX

固然服务端渲染随着单页应用以及Restful接口的兴起，Ajax逐渐成为目前先后端交流最为频繁的方式。Ajax实际核心是XmlHttpRequest,咱们经过对该对象的操做来进行异步的数据请求。

// 通常流程
var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function(res) { // your code to do something }); oReq.open("GET", "http://www.example.org/example.txt"); oReq.send();

实际上咱们接触到最多jQuey就有很好的封装，好比$.ajax，$.post等，若是用Angular的话咱们能够用$http服务，除了这些以外，咱们可使用第三方的Ajax库qwest等。

若是使用Ajax的话，咱们不得不面临一些问题，因为同源限制的问题，咱们不得不去克服这个问题，这个时候咱们能够要求服务端，设置header头，header('Access-Control-Allow-Origin: *');或者叫设置nginx配置

add_header 'Access-Control-Allow-Origin' 'http://yourweb.com'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET';

固然这不是最好的作法，实际如今咱们也能够这么作:

ajax -> 代理 -> API

咱们能够用php的curl或者经过服务器的配置来实现反向代理。从而达到同源的效果。

前端工程师必定要要求每次请求的数据接口一严格遵循基础的数据结构要求，尽管js是弱变量类型语言，可是咱们仍是应该严格要求，是数组，就不该该是对象，是数字就不该该是字符串，这样作有利于下降隐藏bug而且提高先后端工做效率。

JSONP

JSONP算做JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。因为CORS的支持，咱们能够简单的将数据封装成一个js脚本请求，固然咱们在jquery中会用到。

function logResults(json){ console.log(json); } $.ajax({ url: "https://yourapi.com/api", dataType: "jsonp", jsonpCallback: "logResults" });

comet

聊Comet咱们还得说下短轮询，因为某些特定的业务需求，好比通知，咱们须要有及时的数据更新,咱们可以想到的就是使用setInterval每隔必定时间好比10s去获取一次请求，从而作到一些通知更新，可是这并不一种高效的作法，这会增长服务器的请求数量。这个时候有了另一种概念，“反向Ajax”，由服务器进行数据推送， Comet可以让信息近乎实时的被推送到页面上，很是适合要求实时性的获取的数据的页面。

如图所示，就是一个简单的Comet模型，就是数据请求后挂起，直到有数据响应推送到客户端，这个时候客户端再发起一个新的链接。

这样相对来讲能够减小必定数量的请求，以及数据的及时响应，从而必定意义的实现所谓推送。

一个简单的PHP Demo代码，就是咱们须要这端代码一直运行着…

while(true) { set_time_limit(0); echo 'data'; flush(); b_flush(); sleep(3); }

JavaScript：

function createStreamingClient(url,progress,finished){ var xhr=new XMLHttpRequest(),received=0; xhr.open("get",url,true); xhr.onreadystatechange=function(){ var result; if(xhr.readyState==3){ result=xhr.responseText.substring(received); received+=result.length; progress(result); }else if(xhr.readyState==4){ finished(xhr.responseText); } }; xhr.send(null); return xhr; } // var client = createStreamingClient(url,fuc1,func2)

SSE Server-Sent Events

SSE是围绕只读Comet交互推出的API或者模式。SSE API用于建立到服务器的单向链接，服务器经过这个链接能够发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream，并且是浏览器中的Javascript API能解析的格式输出。

现对于Comet，咱们能够看出咱们只进行了一次链接，而后服务端会去控制数据的响应，从而发送给客户端。这样相对来讲，可是如同定义的描述，这种只适合只读数据的情形。好比一些通知和状态码这样的。SEE的使用很是简单，只须要掌握这几个api就行：

var es = new EventSource('http://your.api.com' function listener(event) { console.log(event.data); } // 建立一个SSE链接 es.addEventListener("open", listener); // 响应获取消息的事件 es.addEventListener("message", listener); // 发生错误 es.addEventListener("error", listener);

注意：若是在回话过程当中碰见错误后，默认程序会从新发起一次新的链接，从而防止挂掉就再也不响应了

服务端（node,php）的代码，能够参考：https://github.com/Yaffle/EventSource

Web Sockets

HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具有像 C/S 架构下桌面系统的实时通信能力。 浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求，链接创建之后，客户端和服务器端就能够经过 TCP 链接直接交换数据。也就是咱们可使用web技术构建实时性的程序好比聊天游戏等应用。

其实Web Sockets 的API不多，就下面这些

websocket = new WebSocket("ws://your.socket.com:9001"); // 大开 websocket.onopen = function(evt) { /* do stuff */ }; //on open event // 当web socket关闭 websocket.onclose = function(evt) { /* do stuff */ }; // 进行通讯时 websocket.onmessage = function(evt) { /* do stuff */ }; // 发生错误时 websocket.onerror = function(evt) { /* do stuff */ }; // 向服务器发发送消息 websocket.send(message); //send method websocket.close(); //close method

对于服务端的话，PHP支持了不少socket 相关api，可是咱们可使用更加成熟的框架（实用）好比phpsocket.io，Ratchet.固然node.js写 socket也很是驾轻就熟，node.js对高并发支持相对较好，可使用http://socket.io/。

服务端大概会作下面的事情: + 建立一个socket + 绑定地址和端口 + 监听进入的链接 + 接收新的链接 + web socket 握手 + 解码数据

Demo教程

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

小结

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

• AJAX – 请求 → 响应 （频繁使用）
• Comet – 请求 → 挂起 → 响应 （模拟服务端推送）
• Server-Sent Events – 客户单 ← 服务端 （服务端推送）
• WebSockets – 客户端 ↔ 服务端 (将来趋势,双工通讯)