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

小菜与小鸟 小菜与小鸟     2022-10-11     459

关键词:

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

前后端数据交互方法

 以下观点来源于知乎上的总结,个人感觉说的比较全面,总结如下作者:NimoTrue链接:https://www.zhihu.com/question/26532621/answer/33144979来源:知乎1.HTML赋值2.JS赋值3.script填充JSON4.AJAX获取JSON5.WebSocket实时传输数据6.总结1.HTML赋值输出... 查看详情

网页前后端交互示例

...互方式,此方法经过本人验证有效,并附有代码。首先要实现网页前后台程序的交互需要安装后台框架,本人安装的框架为wamp(windows+apache+mysql+php)。安装程序可以通过我在百度网盘上的分享链接下 查看详情

网页前后端交互示例

...互方式,此方法经过本人验证有效,并附有代码。首先要实现网页前后台程序的交互需要安装后台框架,本人安装的框架为wamp(windows+apache+mysql+php)。安装程序可以通过我在百度网盘上的分享链接下载http: 查看详情

基于tomcat服务器,通过jquery的ajax方法访问servlet实现前后端数据同步/异步交流(不必跳转或者刷新网页实现jsp前后端交互)(代码片段)

本文将一步步实现在tomcat服务器上实现使用JQuery的Ajax方法访问Servlet从而将前端的数据能够连接到后端,也能使得后端的数据返回到前端。首先我的环境要求:已配置好tomcat服务器,eclipse(使用别的也一样,... 查看详情

为什么要进行前后端分离?

...模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。二、为什么要进行前后端分离在以前传统... 查看详情

springboot+hibernate如何实现前后端交互的。如果前台提交一个表单进行保存

后台如何进行响应接收数据并存到数据库中,需要具体实现过程,有大神可以知道么?要代码吗?ajax返回后台后台用@ResponseBody接收保存到数据如果不用回传参数信息到前台就返回String如果有数据你可以用List<JavaBean>返回参... 查看详情

5_前后端分离

...属于软件架构的一种。其核心思想是把前端项目(Node.js实现的)和后端项目独立部署到不同的服务器上,前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备前端工程师... 查看详情

5_前后端分离

...属于软件架构的一种。其核心思想是把前端项目(Node.js实现的)和后端项目独立部署到不同的服务器上,前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备前端工程师... 查看详情

json前后台数据交互java后端怎么实现

参考技术A假设后台传递到前台数据的临时对象为json(你上面那一长串)。varjson=“……”;json=eval('('+json+')');json就对前台对象了,json.endPlncre可以拿出指定属性385 参考技术BHttpServletRequest.getInputStream()从request里面读inpu... 查看详情

关于前端和后端数据交互问题

...,非商业转载请注明出处。重新修改答案后整理了一份《前后端数据交互方法》在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。目录:1.HTML赋值2.JS赋值3.script填充JS 查看详情

前后端交互中出现的问题

检查后台传输的数据和方法 1》右键查看源代码 2》找到<scriptsrc="/api/AbpServiceProxies/GetAll?type=angular&amp;v=636191473125693932"></script>单击 3》寻找服务接口名,查看对应的增删改查方法<scriptsrc="/api/AbpServi 查看详情

微信小程序前后端分离怎么实现

微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开,前端负责展示和交互,后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤:1.前端代码开发:使用微信小程序开... 查看详情

springboot实现restfulservice前后端数据交互篇

参考技术A这篇文章其实很早就想写,但是最近事情比较多(lan),就一直搁置了,好的,直接正文吧。get请求一般通过url传参,如:http://localhost:4001/api/unit?code=111后端要获取code参数,可以使用@RequestParam注解如:http://localhost:4001... 查看详情

axios前后端交互工具学习(代码片段)

文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢?Axios前后端交互工具学习引言  Axios是一个异步请求技术,... 查看详情

axios前后端交互工具学习(代码片段)

文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢?Axios前后端交互工具学习引言  Axios是一个异步请求技术,... 查看详情

ssm框架前后端信息交互(代码片段)

一、从前端向后端传送数据常见的3种方式1、form表单的action:此方法可以提交form表单内的输入数据,也可同时提交某些隐藏但设置有默认值的<input>,如修改问题时,我们除了提交问题的相关信息,还需要将用户的编号提交... 查看详情

网站开发过程中,前后端是如何进行交互的?

前后端分离的前提下(前端编写HTML、CSS、JavaScript;后端编写Java处理database),等双方工作都完成后,前后端是如何交互的?方法可能有多种,请举例。通过对数据库的调用管理进行交互。前台一般是对数据库内容按照页面代码... 查看详情

vue-resource的使用,前后端数据交互(代码片段)

vue-resource的使用,前后端数据交互1:导入vue与vue-resource的js js下载:  https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUgFyQ 注意如果是springBoot项目需要在配置文件中排除静态文件的拦截:   post方法:newVue(el:"#app", 查看详情