当前位置: 首页 > news >正文

前后端数据交互的方式有哪些?

数据交互其实又可以分为两种:1. 给后台技术 2. 从后台那数据

 

数据交互的目的是什么?
取:将数据渲染到dom文档中  给:提交数据到后台后,后台会继续返回我们一个数据,拿到这个数据,然后渲染页面
 
1. 利用cookie

eg:前台通过登录来存储cookie

后台通过req.cookies()来获取存储的cookie信息
2. 利用Ajax
在学习NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已经封装好的$.ajax、$.post、$.getJSON 通过创建一个XMLHttpRequest对象,来进行前后端交互。
 
在学NodeJS之后我们也利用依赖于$http服务自己搭建的_http来完成get、post和jsonp的方式来进行前后端交互;
3. jsonp
jsonp是前后端结合跨域方式,因为前段请求到数据需要在回调函数中使用,所以后端得将数据放回到回调函数中
复制代码
$.ajax({
    url:"",
    dataType:"jsonp",
    jsonp:'callback',
    success(function(res){
      console.log(res)
    })
})
复制代码
jsonp属于AJAX吗? ajax是指通过使用xmlhttpquest对象进行异步数据交互的技术,jsonp是依靠scriptsrc属性来获取的,不属于ajax
 
4. 服务端渲染
浏览器请求到的内容其实可以通过后端加工一下,将一会数据直接渲染好,再给浏览器就可以了

在php中实现服务端渲染:

在php文件中可以放入html代码,访问php文件的时候就相当于访问这个对应的html文件,因为在php文件中,所以可以写一些php的代码来渲染数据

在Node中实现服务端渲染:

利用模板引擎,node在渲染模板的时候给模板传入数据,在模板中就可以使用特定的语法来渲染dom了 例如:ejs,jade

注意:express里的路由是靠请求路径划分的,前一个自己搭的路由是根据请求类型划分的。

 

5. webSocket 和 Socket.io

网上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端成为一个scoket

通过建立socket双向连接,就可以让客户端和服务端直接进行双向通信

简单的小案例:socket.io聊天的思路

1. 服务器端建立好服务端, var wss=require(“socket.io”)(server)
2. 创建客户端的连接socket var wsc = io.connect(‘ws://’)
3. 客户端连接 wsc.on(“connect”,function(e){})
4. 服务器端接收到客户端连接的消息 wss.on(“connection”,function(socket){})
5. 客户端发送消息的时候触发 wsc.on(“meaasge”,function(msg){})
6. 客户端接收到服务器端发送消息 wsc.on(“message”,function(e){})

 转发

转载于:https://www.cnblogs.com/qing-xrr/p/11228654.html

相关文章:

  • MongoDB.Mastering_Find()
  • windows7编程-任务栏进度条
  • CRC8算法DELPHI源码
  • NHibernate 快速入门(四)使用 HQL 查询数据
  • HashMap底层实现原理
  • Location Aware DNS Server-----项目部署说明
  • pyqt 调用QT设计师创建的对话框
  • 艾伟_转载:下载文件时根据MIME类型自动判断保存文件的扩展名
  • Oracle学习手札
  • 艾伟_转载:把委托说透(1):开始委托之旅 委托与接口
  • centos7常见问题(更新。。。)
  • 洛谷 P3388 【模板】割点(割顶)题解
  • 大型网站的监控、报警与故障转移
  • mjpg-streamer译文
  • 一起谈.NET技术,.NET Framework源码研究系列之---Delegate
  • #Java异常处理
  • 【node学习】协程
  • 10个最佳ES6特性 ES7与ES8的特性
  • 4月23日世界读书日 网络营销论坛推荐《正在爆发的营销革命》
  • Docker 1.12实践:Docker Service、Stack与分布式应用捆绑包
  • JAVA并发编程--1.基础概念
  • Logstash 参考指南(目录)
  • python docx文档转html页面
  • text-decoration与color属性
  • 大快搜索数据爬虫技术实例安装教学篇
  • 多线程 start 和 run 方法到底有什么区别?
  • 搞机器学习要哪些技能
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 技术:超级实用的电脑小技巧
  • 聊一聊前端的监控
  • 排序(1):冒泡排序
  • 世界上最简单的无等待算法(getAndIncrement)
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • #AngularJS#$sce.trustAsResourceUrl
  • (八)Spring源码解析:Spring MVC
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (一)Neo4j下载安装以及初次使用
  • (译)2019年前端性能优化清单 — 下篇
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • .h头文件 .lib动态链接库文件 .dll 动态链接库
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .Net 知识杂记
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明
  • .net开发引用程序集提示没有强名称的解决办法
  • .NET中GET与SET的用法
  • /proc/interrupts 和 /proc/stat 查看中断的情况
  • /var/spool/postfix/maildrop 下有大量文件
  • @SuppressWarnings注解
  • [ C++ ] STL---string类的模拟实现
  • [ 第一章] JavaScript 简史
  • [2016.7.Test1] T1 三进制异或
  • [AIGC] Spring Interceptor 拦截器详解
  • [Android Pro] android 混淆文件project.properties和proguard-project.txt
  • [AutoSar NVM] 存储架构