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. MFC/C++/C中字符类型CString, int, string, char*之间的转换

    1 CString,int,string,char*之间的转换 string 转 CString CString.format("%s", string.c_str()); cha ...

  2. linux内核分析之缺页中断【转】

    转自:http://blog.csdn.net/bullbat/article/details/7108402 linux缺页异常程序必须能够区分由编程引起的异常以及由引用属于进程地址空间但还尚未分配 ...

  3. Resin4 自定义端口

    1. Resin4配置文件发生了较大变化,分为: app-default.xml  web应用配置 cluster-default.xml  集群配置 health.xml -- 非pro版不支持 r ...

  4. android的百度地图开发（二） 定位

    参考:http://blog.csdn.net/mr_wzc/article/details/51590485 第一步,初始化LocationClient类 //获取地图控件引用 mMapView = ...

  5. Fiddler抓包1-抓firefox上https请求【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/p/6538021.html 前言 fiddler是一个很好的抓包工具,默认是抓http请求的, ...

  6. python 实现经典算法

    import time start_time = time.clock() list_ = [9, 2, 7, 4, 5, 6, 3, 8, 1] """ # 堆排序(通 ...

  7. django rest framework如何实现nest field显示，如何保存有外键的字段更新

    一步一步深入了. 相关设置技巧如下: 直接nest field显示: class VersionPoolSerializer(serializers.ModelSerializer): site_na ...

  8. 程序员利用javascript代码开发捕鱼游戏

    面试这么成功,全靠这个捕鱼游戏来完成,看的就是里面javascript代码,所以说前端最重要的还是javascript这一关,不管是现在HTML5时代还是以后如何,javascript永远不会落后,大 ...

  9. Flask的上下文管理机制

    前引 在了解flask上下文管理机制之前,先来一波必知必会的知识点. 面向对象双下方法 首先,先来聊一聊面向对象中的一些特殊的双下划线方法,比如__call__.__getattr__系列.__get ...

  10. (13)oracle导出、导入

        导出 导出分三种 导出表.导出方案(用户).导出数据库 导入导出不需要进入sqlplus,都需要从cmd进到所安装的oracle目录的bin文件夹下 例如:D:\app\Administrat ...