前端工程师的职责: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 – 客户端 ↔ 服务端 (未来趋势,双工通信)

python如何实现前后端交互_笔记 | 实现前后端交互的方法相关推荐

  1. 为什么ajax请求进不来后端路由_为什么要前后端分离?前后端分离的优点是什么?...

    随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占HTML5大前端人员日常工作的30%-50%,甚至会更高.接下来 ...

  2. springboot jwt token前后端分离_为什么要 前后端分离 ?

    作 者:互扯程序 来 源:互扯程序 广而告之:由于此订阅号换了个皮肤,系统自动取消了读者的公众号置顶.导致用户接受文章不及时.您可以打开订阅号,选择置顶(星标)公众号,重磅干货,第一时间送达! 本文知 ...

  3. shiro前后端分离_为什么要前后端分离?前后端分离的优点是什么?

    随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占HTML5大前端人员日常工作的30%-50%,甚至会更高.接下来 ...

  4. python开发前端后端区别_前端开发与后端开发有什么区别?

    有些人对前端开发和后端开发还存在着疑惑,其实顾名思义,前端开发就是用户看得见摸得着的东西,而后端更多的是与数据库进行交互以及处理相应的业务逻辑.其实主要区别体现在以下两个方面:知识结构与实现和工作职责 ...

  5. sketch如何做设计稿交互_设计干货 | Sketch 的交互插件强势更新,再也不用为跳转的事发愁了!...

    可能很多人对 InVision 是做什么的不太清楚,这里稍微科普一下,除去需要 VPN 来提速(不是被墙),这家公司应该是目前所有原型工具中最优秀的,没有之一.无论是对于产品的理解.体验的设计,还是对 ...

  6. python与cad交互_与命令行进行交互_Python数据分析实战应用_数据挖掘与分析视频-51CTO学院...

    为什么学Python: 重要:数据分析是职业技能必备,Python是大数据分析** 趋势:Python是目前非常火的编程语言,使用人多 好学:学习简单,容易上手,使用灵活,可扩展强 **:会Pytho ...

  7. python示例异常处理与程序调试_笔记:Python异常处理与程序调试

    Python异常处理与程序调试 Python提供了强大的异常处理机制,通过捕获异常可以提高程序的健壮性.异常处理还具有释放对象,中止循环的运行等作用.在程序运行的过程中,如果发生了错误,可以返回事先约 ...

  8. cs架构交互_架构,功能和交互

    cs架构交互 这是OpenStack的概述. 如果您不熟悉它,OpenStack是由众多行业领导者共同发起的开源技术项目的集合(请参阅参考资料 ). 它提供了用于大规模协调云的操作平台. 它的技术与虚 ...

  9. java 后端校验_如何实现Java后端数据校验?看这篇就足够!

    前言 每次我们在搭建一个开源项目的首要任务包括:项目的统一异常处理.统一结果封装以及做项目的数据校验,在前后端分离的情况下,不仅前端需要做数据校验,同样后端也要实现,前端主要使用一些类似与jQuery ...

最新文章

  1. 326. Power of Three
  2. 浅谈linux命令大全
  3. IOS UIViewController的生命周期
  4. mysql 表数据转储_在MySQL中仅将表结构转储到文件中
  5. 通过反射--操作运行时类中的指定的属性/方法
  6. Jeecg-Boot异常处理'jeecg-boot.QRTZ_LOCKS' doesn't exist
  7. 百度鹰眼html打开,BMap:WEB 服务API
  8. php 取得文件行数,PHP获取文件行数的方法
  9. vs运行html没有注册类,解决win10运行com提示“错误代码 80040154-没有注册类”的方法...
  10. MATLAB三阶导怎么输入,三阶样条插值(一阶导数边界条件) matlab程序
  11. coji 编程机器人_娃喜欢就行—“编程机器人”COJI
  12. Steam上传游戏包体的三种方法
  13. 什么是DOS操作系统
  14. 2022--SE-GAN骨架增强的基于gan的毛笔手写字体生成模型原理以及网络结构
  15. python实现活体人脸识别_手把手教你用Python实现人脸识别
  16. 2021-03-11 Android 异常情况下长按power按键10s关机或者重启
  17. php ci hooks,CodeIgniter框架钩子机制实现方法【hooks类】
  18. 基于猫眼票房数据的可视化分析
  19. 离岸外包二:离岸外包因素及软件度量 Metrics(IT咨询公司第三方)
  20. buuctf|pwn-jarvisoj_level2_x64-wp

热门文章

  1. projectwbs表_Microsoft Project制作WBS基本使用
  2. OpenCV皮肤检测方法
  3. Go语言拼接URL路径的三种方法
  4. 利用IPV6搭建一个家庭服务器
  5. 31. Linux内核 - Squashfs文件系统的制作与使用
  6. audio 临时总结
  7. 情感分析(挖掘观点、情感和情绪)阅读笔记(一)
  8. android 检测广告代码,Android – Admob显示测试广告,但不是真正的广告
  9. 解决Centos7下pip更新失败问题
  10. 支付宝小程序发送短信验证码完整实例