关于websocket和ajax无刷新
HTTP无状态：
Ajax只能实现用户和服务器单方面响应（单工机制）.
如果设置为长轮询（ajax设置多少秒进行一次请求，时间间隙可能会有延迟，且浪费资源）
如果设置为长连接（客户端请求一次，服务器保持持续链接，一旦有了新数据，就全部发送客户端）
webScoket：
webSocket是响应客户端和服务器端双响应（全双工机制）.
支持的浏览器有：Chrome4+、Firefox4+、IE10+（“+”包含本身）
支持的服务器有：Node0、Apache7.0.2、Nginx1.3
1. 采用webscoket - 节省资源
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window || window in WebSocket) {
//建立连接，这里的/websocket ，是ManagerServlet中开头注解中的那个值
websocket = new WebSocket("ws://localhost:8080");
}
else {
alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket连接成功");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
if (event.data == "") {
location.reload();
}
}
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket连接关闭");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
2.ajax(长轮询) - 浪费服务器和客户端资源
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script>
//每500ms使用ajax取一次数据
setTimeout(function () {
var fun = arguments.callee;
// 重复调用 - 500ms.
setTimeout(fun, 500); // 这里写ajax代码.
console.log(fun, 'ajax执行了!'); }, 500);
</script>
3.服务器长连接（具体由后台操作服务器执行.）
采用nodejs做的一个示例：
怎么使用（同一项目文件目录下）：
npm i socket.io
index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<input type="text" id="text" width="500">
<input type="button" value="发送消息" id="btn"> <script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
document.getElementById('btn').onclick = function () {
socket.emit('program', document.getElementById('text').value);
}
socket.on('reply', function (msg) {
console.log(msg);
});
</script>
</body> </html>
node-server.js
const http = require('http');
const fs = require('fs');
const server = http.createServer(function (req, res) {
if (req.url == '/') {
fs.readFile('./index.html', function (err, data) {
res.end(data);
});
}
});
const io = require('socket.io')(server);
let number = 1;
io.on('connection', function (socket) {
console.log(number++ + '个客户已连接...');
socket.on('program', function (msg) {
console.log('接收的信息:' + msg);
socket.emit('reply', msg);
})
})
server.listen(8080, '127.0.0.1');
关于websocket和ajax无刷新的更多相关文章
- Ajax.BeginForm()实现ajax无刷新提交
1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- Ajax无刷新提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- Thinkphp框架 -- ajax无刷新上传图片
用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...
- Ajax无刷新提交表单和显示
ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- ajax无刷新方式收集表单并提交表单
ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...
随机推荐
- Flash Builder 4.7 完美破解
1. 准备安装文件和序列号生成器1Adobe Flash Builder 4.7 的安装文件可以从以下两个连接下载到:•32bit:http://trials3.adobe.com/AdobeProd ...
- 经典 Javascript 正则表达式
正则表达式用于字符串处理,表单验证等场合,实用高效,但用到时总是不太把握,以致往往要上网查一番.我将一些常用的表达式收藏在这里,作备忘之用.匹配中文字符的正则表达式: }
- 水（NOIP模拟赛Round #10）
题目描述: 小Z有一个长度为的数列.他有次令人窒息的操作,每次操作可以使某个数字或.他当然是希望这些数字的乘积尽量小了.为了简化题目,你只需输出操作完成后的数列即可. ———————————————— ...
- 强联通分量（tarjan算法+算法简介）
题目描述 对于一个有向图顶点的子集S,如果在S内任取两个顶点u和v,都能找到一条从u到v的路径,那么就称S是强连通的.如果在强连通的顶点集合S中加入其他任意顶点集合后,它都不再是强连通的,那么就称S ...
- 【Cocos2D研究院之游戏开发】
http://www.xuanyusong.com/archives/category/ios/cocos2d_game 分类目录归档:[Cocos2D研究院之游戏开发] 201211-19 Co ...
- Linux Oracle DB log 清理
sid_list=`/bin/ps -ef |/bin/grep smon |/bin/grep -v grep | /bin/cut -f3 -d_` host_name=`hostname` cd ...
- vue.js 2的表单控件
静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...
- 计蒜客 18492.Upside down primes-米勒拉宾判大素数 (German Collegiate Programming Contest 2015 ACM-ICPC Asia Training League 暑假第一阶段第三场 K)
K. Upside down primes 传送门 这个题就是把大数按字符串输进去,判断一下是不是素数,然后反转180度,先判断反转之后的东西是不是一个数,如果是的话,再把这个数判一下是不是素数,如果 ...
- Codeforces 954I Yet Another String Matching Problem（并查集 + FFT）
题目链接 Educational Codeforces Round 40 Problem I 题意 定义两个长度相等的字符串之间的距离为: 把两个字符串中所有同一种字符变成另外一种,使得两个 ...
- luogu P1146 硬币翻转
题目描述 在桌面上有一排硬币,共N枚,每一枚硬币均为正面朝上.现在要把所有的硬币翻转成反面朝上,规则是每次可翻转任意N-1枚硬币(正面向上的被翻转为反面向上,反之亦然).求一个最短的操作序列(将每次翻 ...