web前后端交互方式是什么

这篇文章主要讲解了“web前后端交互方式是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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){})

感谢各位的阅读，以上就是“web前后端交互方式是什么”的内容了，经过本文的学习后，相信大家对web前后端交互方式是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！