关于websocket和ajax无刷新
HTTP无状态：
Ajax只能实现用户和服务器单方面响应（单工机制）.
如果设置为长轮询（ajax设置多少秒进行一次请求，时间间隙可能会有延迟，且浪费资源）
如果设置为长连接（客户端请求一次，服务器保持持续链接，一旦有了新数据，就全部发送客户端）
webScoket：
webSocket是响应客户端和服务器端双响应（全双工机制）.
支持的浏览器有：Chrome4+、Firefox4+、IE10+（“+”包含本身）
支持的服务器有：Node0、Apache7.0.2、Nginx1.3
1. 采用webscoket - 节省资源
1 var websocket = null;
2 //判断当前浏览器是否支持WebSocket
3 if ('WebSocket' in window || window in WebSocket) {
4 //建立连接，这里的/websocket ，是ManagerServlet中开头注解中的那个值
5 websocket = new WebSocket("ws://localhost:8080");
6 }
7 else {
8 alert('当前浏览器 Not support websocket')
9 }
10 //连接发生错误的回调方法
11 websocket.onerror = function () {
12 setMessageInnerHTML("WebSocket连接发生错误");
13 };
14 //连接成功建立的回调方法
15 websocket.onopen = function () {
16 setMessageInnerHTML("WebSocket连接成功");
17 }
18 //接收到消息的回调方法
19 websocket.onmessage = function (event) {
20 setMessageInnerHTML(event.data);
21 if (event.data == "1") {
22 location.reload();
23 }
24 }
25 //连接关闭的回调方法
26 websocket.onclose = function () {
27 setMessageInnerHTML("WebSocket连接关闭");
28 }
29 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
30 window.onbeforeunload = function () {
31 closeWebSocket();
32 }
33 //将消息显示在网页上
34 function setMessageInnerHTML(innerHTML) {
35 document.getElementById('message').innerHTML += innerHTML + '<br/>';
36 }
37 //关闭WebSocket连接
38 function closeWebSocket() {
39 websocket.close();
40 }
2.ajax(长轮询) - 浪费服务器和客户端资源
1 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
2 <script>
3 //每500ms使用ajax取一次数据
4 setTimeout(function () {
5 var fun = arguments.callee;
6 // 重复调用 - 500ms.
7 setTimeout(fun, 500);
8
9 // 这里写ajax代码.
10 console.log(fun, 'ajax执行了!');
11
12 }, 500);
13 </script>
3.服务器长连接（具体由后台操作服务器执行.）
采用nodejs做的一个示例：
怎么使用（同一项目文件目录下）：
npm i socket.io
index.html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10
11 <body>
12 <input type="text" id="text" width="500">
13 <input type="button" value="发送消息" id="btn">
14
15 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
16 <script type="text/javascript">
17 var socket = io();
18 document.getElementById('btn').onclick = function () {
19 socket.emit('program', document.getElementById('text').value);
20 }
21 socket.on('reply', function (msg) {
22 console.log(msg);
23 });
24 </script>
25 </body>
26
27 </html>
node-server.js
1 const http = require('http');
2 const fs = require('fs');
3
4 const server = http.createServer(function (req, res) {
5 if (req.url == '/') {
6 fs.readFile('./index.html', function (err, data) {
7 res.end(data);
8 });
9 }
10 });
11
12 const io = require('socket.io')(server);
13 let number = 1;
14 io.on('connection', function (socket) {
15 console.log(number++ + '个客户已连接...');
16 socket.on('program', function (msg) {
17 console.log('接收的信息:' + msg);
18 socket.emit('reply', msg);
19 })
20 })
21
22 server.listen(8080, '127.0.0.1');
