前后端数据交互

前后端数据交互

前后端数据交互方式有三种：
1、form表单
2、ajax
3、websocket

form表单

<form action="/form.html" method="post/get">
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <input type="submit">
form>

点击“提交”按钮，以 post 或 get 的方式提交到 form 表单 action 中的地址。此时就会向服务器发送一个请求，服务器会接受并处理提交过来的 form 表单，最后返回一个新的网页。

get & post

1、get 将 header 和 data 一起发送，服务器返回 200，只发送一次 TCP 请求；post 则先发送 header，服务器返回 100，再发送 data，服务器返回 200，会发送两次 TCP 请求。
2、get 参数通过 url 传递，因此不安全；post 放在 request body 中，将参数直接发送给后台。
3、get 请求只能进行 url 编码；而 post 支持多种编码方式。
4、get 请求参数会被完整保留在浏览历史记录里；而 post 的参数不会被保留。
5、get 请求类似于查找的过程，用户获取数据，不用每次都与数据库连接，所以可以使用缓存；而 post 一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。

缺点

1、在提交时，页面会发生跳转或刷新，用户体验不好。
2、提交后页面发生跳转，不能知道此时服务器端返回的状态是什么，操作是成功还是失败。
3、浪费宽带。每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，导致用户界面的响应很慢。

AJax

概念

Ajax 代表异步 JavaScript 和 XML，它是一组用于异步显示数据的相关技术，能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术。

优点

1、页面无需刷新，在页面内与服务器通信
2、使用异步的方式与服务器通信，不需要中断操作
3、在从服务器检索数据之前，不会阻止用户
4、允许只将重要数据发送到服务器
5、使应用程序具有交互性和更快速

缺点

1、在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。
2、安全问题，对企业数据建立了一个直接通道，允许黑客从远端服务器上建立新的攻击。

使用

1、创建 Ajax 对象：var xhr = new XMLHttpRequest();
2、向服务器发送请求，使用 xmlHttpRequest 对象的 open 和 send 方法；
3、监听状态变化，执行相应回调函数；
4、发送请求。

var xhr = new XMLHttpRequest(); 
xhr.open("get", url); 
xhr.onreadystatechange = function (){ 
	if(xhr.status == 200 && xhr.readyState == 4){ 
		var result = xhr.responseText; 
		document.getElementById("time").innerHTML = result; 
   } 
}
xhr.send();

readyState状态

0 —— （未初始化）还没有调用 send()方法
1 —— （载入）已调用 send() 方法，正在发送请求
2 —— （载入完成）send() 方法执行完成，已经接收到全部响应内容
3 —— （交互）正在解析响应内容
4 —— （完成）响应内容解析完成，可以在客户端调用了

返回数据类型

1、xml： 返回 XML 文档，可用 jQuery 处理。
2、html： 返回纯文本 HTML 信息；
3、script： 返回纯文本 JavaScript 代码，不会自动缓存结果。
4、json： json 方式和 html 方式在请求和服务器中完全是一样，请求的返回值实际上都是String对象。

不同
1、html方式的时候并没有限制返回的字符串格式，而json方式的时候，必须符合json协议的规范。
2、html方式请求完成之后没有做任何的操作直接回调sucuess，而json多了一步eval，执行返回的字符串，在响应体中响应成json字符串格式。

5、jsonp： jsonp 方式的交互方式和 js 是一样的，本身 xmlHttpRequest 对象并不能跨域访问，但是 script 标签的 src 可以跨域访问。
6、text： 返回纯文本字符串。

websocket

概念

WebSocket是一种在单个TCP连接上进行全双工通信的协议，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

应用场景

服务器更新，前端页面也进行局部刷新，更新服务器端返回的信息。

与 Ajax 区别

1、Ajax即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术；WebSocket是HTML5一种新的协议，实现了浏览器与服务器双向通信。
2、Ajax是短连接，数据发送和接受完成后就会断开连接；WebSocket是长连接，在一个会话中一直保持连接。
3、Ajax用于前后端非实时数据交互；WebSocket一般用于前后端实时数据交互。
4、Ajax需要客户端发起请求；WebSocket服务器和客户端可以相互推送信息。

参考文章：https://blog.csdn.net/qq_41244651/article/details/79949472、https://blog.csdn.net/qq_36140085/article/details/81567592