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

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

原文地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/8324020.html

时间: 2024-08-26 00:37:46

实现前后端数据交互的方法的相关文章

前后端数据交互方法

在此介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率. 此文章适合前后端协同开发经验不足的新手阅读. 目录: HTML赋值 JS赋值 script填充JSON AJAX获取JSON WebSocket实时传输数据 总结 HTML赋值 输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> &

web前后端数据交互

前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个list.js来说明后端是如何将数据传到前端,前端是如何获取数据,并进行数据展示的. /** * 列表方法 * 1.列表页面显示列表内容的div容器ID为list_container * 2.列表页面模板区域textarea的ID为list_template * 3.列表页面显示列表页码下拉框的div容

前后端数据交互处理基于原生JS模板引擎开发

json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那里断点,观察是否有错误. <!DOCTYPE html> <html> <head> <title>前后端数据交互处理原生JS模板引擎开发</title> <meta charset ='utf-8'> <script type=&

前后端数据交互

前后端数据交互以及连接数据库流程: 首先需要在后台建立数据库,并且连接数据库,打开apache服务器确保所有文件代码在服务器中运行 这里是封装好的连接数据库通用模式(一定要确保数据库是否连接成功) 1:前端jsp页面设置form表单或是可以让用户提交用户信息的格式,确定需要传递的参数name让用户输入,通过点击按钮后submit()提交到后台: (这里是引用了bootsrap的模态框) 通过ajax传递参数(引用已经封装好的ajax) 自己封装好的ajax: function ajax(opti

Spring MVC前后端数据交互总结

控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是servlet的替代品. - append Spring MVC在Web应用中扮演V的角色,负责处理HTTP请求并返回相应的资源,它在用的时候要配置一个核心的Dispatcher负责检查资源,请求过来的时候会查找是否有相应的Handler,有就会把请求交给Controller,一般使用注解来配置暴露给用户

前后端数据交互,跳转

概述 作为一枚菜鸟,前后端交互可是大问题,经常数据交互失败,不知道怎么跳转.在这分享一下交互的小心得. 我们不妨先大概了解一下整个访问流程: 用户从输入网址按下回车,交互就已经开始了. 浏览器会将请求按照http协议(或者其他https,ftp等)将请求数据封装包从电脑的端口发出 -> 路由器 -> 运营商(域名解析之类的)-> 目标服务器(可能会有代理,负载均衡等等) 最终从服务器开放的端口,进入到服务器(TCP三次握手和四次挥手,Tomcat之类的,会根据协议的内容进行解析)->

vue 前后端数据交互问题解决

先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 第三  解决跨域问题 处理数据交互 这样前端就拿到了数据 原文地址:https://www.cnblogs.com/tangda/p/10987082.html

spring mvc 前后端数据交互笔记(解决httprequest400,415问题)

1:前端发送数据,后端返回界面 A:浏览器 $.ajax({     url: "/rest/userController/login",     type: "post",     data: {"username": "chenhao", "password": "123456"} }); B:服务端 @RequestMapping("/login") publi

spring mvc 前后端数据交互笔记(解决415,400问题)

1:前端发送数据,后端返回界面 A:浏览器 $.ajax({ url: "/rest/userController/login", type: "post", data: {"username": "chenhao", "password": "123456"} }); B:服务端 @RequestMapping("/login") public String log