前后端数据交互原理

这是我参与更文挑战的第23天，活动详情查看： 更文挑战

作为后端开发也可以适当了解一点前端知识，毕竟是平时开发中接触最多，了解一些前后端数据交互的知识，可以帮助后端在处理业务逻辑时考虑到更多。

在开始介绍前端数据交互原理前，先问大家一个问题，在网站上输入地址，打开网页这一过程具体做了什么呢？

输入 www.baidu.com —>域名解析（dns） —> 与服务器建立连接 —> 发起HTTP请求 —> 服务器响应HTTP请求，浏览器得到html代码 —> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片） —> 浏览器对页面进行渲染呈现给用户。

前后端不分离的开发模式：

前端代码（Html、js、css）写在JSP中，甚至JSP中嵌入Java代码。当用户访问网站时，页面数据也就是Html文档，由Servlet容器将jsp编译成Servlet，然后将jsp中的html，css，js代码输出到浏览器。

在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高

劣势和不足：

开发出的软件响应速度慢，质量差，用户体现差。前后端严重耦合，代码混乱，可维护性差。研发人员前后端兼顾，开发效率低下，研发周期变长。

前后端分离模式：

前端需要的就是后端返回正确的数据格式，拿到数据后渲染HTML页面，并展示数据，而后端仅返回前端所需的数据。用户看到什么样的效果，都由前端来控制，并且前端还可以自由的做一些特殊的设计，不需要考虑后端的逻辑。

优势：

增强代码的可维护性，分离后降低服务器负载，系统性能得到提升。通过API衔接，简单明了易维护。

这就引出了前后端的数据交互方式。

前后端数据交互方式

1、通过cookie

前端将登陆信息、账号信息存在cookie中，后端通过req.cookies()获取信息。

2、通过Ajax

利用ajax和JQuery中已经封装好的$.ajax、$.post、$.getJSON通过创建一个XMLHttpRequest对象，来进行前后端交互。

常用参数：

1、url 请求地址

2、type 请求方式，默认是’GET’，常用的还有’POST’

3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’

4、data 设置发送给服务器的数据

5、success 设置请求成功后的回调函数

6、error 设置请求失败后的回调函数

7、async 设置是否异步，默认值是’true’，表示异步

3、通过jsonp

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

$.ajax({

url:"",

dataType:"jsonp",

jsonp:'callback',

success(function(res){

console.log(res)

   })

})
复制代码

4、服务端渲染

后端加工数据，将数据直接渲染，再给浏览器就可以。

在Node中实现服务端渲染：

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

5、webSocket 和 Socket.io

通过一个双向的通信连接实现数据的交换，这个连接的一端成为一个scoket，通过建立socket双向连接，就可以让客户端和服务端直接进行双向通信。

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

前端传参数方式

1、cookie

2、URL

get请求的时候把参数值附在url后面传递到其他页面，参数名称和值。

优点:传递参数较少时,操作方便,简单明了

缺点:参数会暴露,不利于保密,不适合多数据传输

3、Form表单

form表单把所有属于表单中的内容提交给后台，例如输入框，单选框，多选框，文本域，文件域等。

在后台可通过对应的name属性获取相应的值。

form表单中的action属性标识提交数据的地址。

method属性指明表单提交的方式。

4、JQuery中的ajax提交

数据多时构建json对象,转换成json格式的string后传递给后台。

5、H5 web storage

localStroage 和 sessionStorage

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);