web前后端交互方式有哪些?

正如我们所知,一个完整的IT项目是由多个不同岗位共同完成的,包括UI设计、前端开发、后端开发、测试等。前端后端需要通过技术上交互实现联通,那么web前后端交互技术都有哪些呢?

前端开发需要做的事情,只有两个:1. 创建界面结构 2. 数据交互

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

数据交互的目的是什么?

取:将数据渲染到dom文档中 给:提交数据到后台后,后台会继续返回我们一个数据,拿到这个数据,然后渲染页面.

** 1. 利用cookie**

例如:前台通过登录来存储cookie

后台通过req.cookies()来获取存储的cookie信息

2. 利用Ajax

在学习NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已经封装好的.ajax、.post、$.getJSON 通过创建一个XMLHttpRequest对象,来进行前后端交互。

在学NodeJS之后我们也利用依赖于$http服务自己搭建的_http来完成get、post和jsonp的方式来进行前后端交互;

3. jsonp

jsonp是前后端结合跨域方式,因为前段请求到数据需要在回调函数中使用,所以后端得将数据放回到回调函数中

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){})

相关推荐
PleaSure乐事16 分钟前
Ant-Dseign-Pro如何去国际化及删除oneapi.json后出现程序直接结束问题的解决方案
前端·javascript·react.js·前端框架·json·oneapi·antdesignpro
榴莲千丞35 分钟前
第七章利用CSS和多媒体美化页面
前端·css·1024程序员节
奶糖 肥晨1 小时前
vue的路由的两种模式 hash与history 详细讲解
前端·vue.js·哈希算法
奶糖 肥晨1 小时前
react基础之reactHooks
前端·javascript·react.js
放逐者-保持本心,方可放逐1 小时前
vue3-ref 和 reactive
前端·javascript·vue.js
星河路漫漫1 小时前
ES6面试题:(第二天)
开发语言·前端·javascript
喝旺仔la2 小时前
Django+Vue全栈开发旅游网项目景点详情
前端·javascript·vue.js
snakeshe10102 小时前
深入理解 Web Workers:提升 Web 应用性能的利器
前端
每天都要喝奶茶2 小时前
vue3uniapp实现自定义拱形底部导航栏,解决首次闪烁问题
前端·vue.js·uni-app
May_Xu_2 小时前
vue3+less使用主题定制(多主题定制)可切换主题
前端·javascript·vue.js·vue·less·css3