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无刷新的更多相关文章

  1. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  2. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  3. Ajax无刷新提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  5. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  6. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  7. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  8. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

随机推荐

  1. jdk,tomcat,mvn,android,php,linux等的初始化配置

    jdk配置:系统变量->新建->变量名:JAVA_HOME 变量值:c:\jdk1.6.0_21(jdk安装目录:C:\Program Files (x86)\Java\jdk1.7.0_ ...

  2. .ini配置CAN信息

    #include <iostream> #include <windows.h>//这个头文件一定要添加,否则GetPrivateProfileString(...)函数无法使 ...

  3. [ CodeVS冲杯之路 ] P1116

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1116/ 数据很小,DFS可A,每层枚举颜色,判断相邻的点是否有重复的颜色,记得回溯时把颜色染回0,即无颜色 这里我使用 ...

  4. [摸鱼] 配置的vim的使用攻略!

    vim使用攻略 <>=f 折叠与缩进 开:<>[^fuck]cc 关:<>cu 缩进一块使用V选中,按>> [Ctrl]V 以列为单位选 za,打开或关 ...

  5. source insight setting

    adjust source code font size Options -> File Type Options -> Screen Font -> Size adjust dis ...

  6. electron 安装使用

    1.安装 node.js 链接:http://pan.baidu.com/s/1o7W7BIy 密码:y6od 一路next 我安装在F:\Program Files\node.js下 2.检查nod ...

  7. zabbix 硬盘状态收集,制作表格

    将zabbix首页复制到a文件里,这里主要是用到首页里 最近出现的问题 的信息 # -*- coding:utf-8 -*- import time import os from openpyxl i ...

  8. python每日一类(3):os和sys

    os与sys模块的官方解释如下: os: This module provides a portable way of using operating system dependent functio ...

  9. JDK7集合框架源码阅读(一) ArrayList

    基于版本jdk1.7.0_80 java.util.ArrayList 代码如下 /* * Copyright (c) 1997, 2013, Oracle and/or its affiliates ...

  10. (5)C#工具箱-数据

    1.DataSet 2.DataGridView dataGridView是一个显示网络数据的控件 (1)绑定dataSet DataSet ds = new DataSet(); //执行数据库查询 ...