开发者社区> 橘子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

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

 

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

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

服务端渲染

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

常用的php模版有,Smarty,Blade,Mustache,如果你们团队使用Smarty,我们可以看到一些view的文件里会前套Smarty的模版语言;

<div> 
{<span class="hljs-keyword">foreach $list <span class="hljs-keyword">as $item}
    <h3>{$item[<span class="hljs-string">'name']}</h3>
    <p>{$item[<span class="hljs-string">'desc']}</p>
{/<span class="hljs-keyword">foreach}
</div></span></span></span></span></span>

如果Node,js作为服务端的话,这个时候我们可以使用前端模版渲染的模块,比如ejs,doT,jade等等。

注意不同的模版可能存在不同模版语法,需要自己学习使用

AJAX

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

<span class="hljs-comment">// 一般流程
<span class="hljs-keyword">var oReq = <span class="hljs-keyword">new XMLHttpRequest(); 
oReq.addEventListener(<span class="hljs-string">"load", <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(res) { 
    <span class="hljs-comment">// your code to do something
});
oReq.open(<span class="hljs-string">"GET", <span class="hljs-string">"http://www.example.org/example.txt"); 
oReq.send();</span></span></span></span></span></span></span></span></span></span>

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

如果使用Ajax的话,我们不得不面临一些问题,由于同源限制的问题,我们不得不去克服这个问题,这个时候我们可以要求服务端,设置header头,header('Access-Control-Allow-Origin: *');或者叫设置nginx配置

<span class="hljs-attribute">add_header <span class="hljs-string">'Access-Control-Allow-Origin' <span class="hljs-string">'http://yourweb.com'
<span class="hljs-attribute">add_header <span class="hljs-string">'Access-Control-Allow-Credentials' <span class="hljs-string">'true'
<span class="hljs-attribute">add_header <span class="hljs-string">'Access-Control-Allow-Methods' <span class="hljs-string">'GET';</span></span></span></span></span></span></span></span></span>

当然这不是最好的做法,实际现在我们也可以这么做:

<span class="hljs-attribute">ajax -> 代理 -> API</span>

我们可以用php的curl或者通过服务器的配置来实现反向代理。从而达到同源的效果。

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

JSONP

JSONP算作JSON的一种”使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于CORS的支持,我们可以简单的将数据封装成一个js脚本请求,当然我们在jquery中会用到。

<span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">logResults(<span class="hljs-params">json){ 
  <span class="hljs-built_in">console.log(json);
}
$.ajax({
  url: <span class="hljs-string">"https://yourapi.com/api",
  dataType: <span class="hljs-string">"jsonp",
  jsonpCallback: <span class="hljs-string">"logResults"
});</span></span></span></span></span></span></span></span>

comet

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

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

这样相对来说可以减少一定数量的请求,以及数据的及时响应,从而一定意义的实现所谓推送。

一个简单的PHP Demo代码,就是我们需要这端代码一直运行着…

<span class="hljs-keyword">while(<span class="hljs-literal">true) { 
    <span class="hljs-built_in">set_time_<span class="hljs-built_in">limit(0);
    <span class="hljs-built_in">echo <span class="hljs-string">'data';
    flush();
    b_flush();
    sleep(3);
}</span></span></span></span></span></span>

JavaScript:

<span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">createStreamingClient<span class="hljs-params">(url,progress,finished){
    <span class="hljs-keyword">var xhr=<span class="hljs-keyword">new XMLHttpRequest(),received=<span class="hljs-number">0;
    xhr.open(<span class="hljs-string">"get",url,<span class="hljs-keyword">true);
    xhr.onreadystatechange=<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
        <span class="hljs-keyword">var result;
        <span class="hljs-keyword">if(xhr.readyState==<span class="hljs-number">3){
            result=xhr.responseText.substring(received);
            received+=result.length;
            progress(result);
        }<span class="hljs-keyword">else <span class="hljs-keyword">if(xhr.readyState==<span class="hljs-number">4){
             finished(xhr.responseText);
        }
    };
    xhr.send(<span class="hljs-keyword">null);
    <span class="hljs-keyword">return xhr;
}
 
<span class="hljs-comment">//  var client = createStreamingClient(url,fuc1,func2)</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

SSE Server-Sent Events

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

现对于Comet,我们可以看出我们只进行了一次连接,然后服务端会去控制数据的响应,从而发送给客户端。这样相对来说,但是如同定义的描述,这种只适合只读数据的情形。比如一些通知和状态码这样的。SEE的使用非常简单,只需要掌握这几个api就行:

<span class="hljs-keyword">var es = <span class="hljs-keyword">new EventSource(<span class="hljs-string">'http://your.api.com' 
<span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">listener(<span class="hljs-params">event) { 
    <span class="hljs-built_in">console.log(event.data);
}
<span class="hljs-comment">// 创建一个SSE连接
es.addEventListener(<span class="hljs-string">"open", listener); 
<span class="hljs-comment">// 响应获取消息的事件
es.addEventListener(<span class="hljs-string">"message", listener); 
<span class="hljs-comment">// 发生错误
es.addEventListener(<span class="hljs-string">"error", listener);</span></span></span></span></span></span></span></span></span></span></span></span></span></span>

注意:如果在回话过程中遇见错误后,默认程序会重新发起一次新的连接,从而防止挂掉就不再响应了

服务端(node,php)的代码,可以参考:https://github.com/Yaffle/EventSource

Web Sockets

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

其实Web Sockets 的API很少,就下面这些

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

对于服务端的话,PHP支持了很多socket 相关api,但是我们可以使用更加成熟的框架(实用)比如phpsocket.ioRatchet.当然node.js写 socket也非常得心应手,node.js对高并发支持相对较好,可以使用http://socket.io/

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

Demo教程

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

小结

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

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

 

没有整理与归纳的知识,一文不值!高度概括与梳理的知识,才是自己真正的知识与技能。 永远不要让自己的自由、好奇、充满创造力的想法被现实的框架所束缚,让创造力自由成长吧! 多花时间,关心他(她)人,正如别人所关心你的。理想的腾飞与实现,没有别人的支持与帮助,是万万不能的。






    本文转自wenglabs博客园博客,原文链接:http://www.cnblogs.com/arxive/p/7192286.html,如需转载请自行联系原作者


    本文转自wenglabs博客园博客,原文链接:http://www.cnblogs.com/arxive/p/7192286.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端-vue基础53-组件化开发思想
前端-vue基础53-组件化开发思想
18 0
手摸手一起学习Typescript第三天 - 函数Function
手摸手一起学习Typescript第三天 - 函数Function
30 0
Vuex进阶篇——Module模块化学习(前端必会)
我之前发布了一篇vuex的基础,如果你巧妙的将它遗忘,这是个传送门,点击复习。 我也是一直在看vuex,里边需要了解的知识其实不少,但是因为项目并不常用,所以也总是忘记,今天整理下来,和大家谈谈vueX的模块化开发。
5061 0
零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术
原文:零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术 本章所介绍的是便利且快速的内建工具Clone ? 本章所介绍的是便利且快速的内建工具Clone ? ? 为什麽会说像是影分身之术呢? ? 请参照火影忍者(NARUTO): 《分身术》会分身术者,能以一身分出几身,几十身,乃至千百身。
1060 0
《Git学习指南》——2.2 第一个Git项目
在开始摆弄这个玩具项目之前,我们建议你最好先做一个备份!尽管在Git中,想要造成永久性的删除或破坏也不是件容易的事情,而且每当你要做某些“危险”动作的时候,Git通常也会发出相应的警告消息。但是,有备无患总是好的。
1408 0
《Git学习指南》——2.4 本章小结
版本提交:一次版本提交通常定义了版本库中所有文件的一个版本,它详细说明了该版本是由何人在何时何地创建的。当然,我们需要用add命令来确定哪些文件将被纳入下一次提交,然后再用commit命令创建新的版本提交。
1542 0
3402
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载