前后台数据交互（Ajax、WebSocket）

前后台数据交互（Ajax、WebSocket）

1、Ajax单方向请求后台数据

本质：
由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。

用法：

$.ajax({
		url: "http://localhost:8080/target",
		type: "get",
		async: true,
		header: {
		},
		success: function(response) { //访问接口成功
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) { //访问失败
		},
		complete: function(XMLHttpRequest, status) { //无论成功过还是失败都会执行的函数
		}
})

缺点：
浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源

2、WebSocket实时数据交互

本质：
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

用法：
创建WebSocket对象：

var Socket = new WebSocket(url, [protocol] );  //第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议

WebSocket属性：Socket.readyState（连接状态）可取0,1,2,3

• 0：连接尚未建立
• 1：连接已经建立，可以进行通信
• 2：连接正在进行关闭
• 3：连接已经关闭或者连接不能打开

WebSocket事件：

• Socket.onopen：连接建立时触发
• Socket.onmessage：客户端接收服务端数据时触发
• Socket.onerror：通信发生错误时触发
• Socket.onclose：连接关闭时触发

WebSocket方法：

• Socket.send()：使用连接发送数据
• Socket.close()：关闭连接

示例：

var web_socket=new WebSocket("ws://localhost:8080/iot-steel/socketServer");
web_socket.onopen = function(e) {  //连接
	console.log("onopen");
};
web_socket.onmessage = function(e) { //成功接收
	console.log("onmessage");
	console.table(JSON.parse(e.data));  //将接收到的数据以表格的形式展示
};
web_socket.onerror = function(e) { //失败接收
	console.log("onerror");
};
web_socket.onclose = function(e) { //关闭
	console.log("onclose");
}