ajax实时刷新处理

Julylovin 发布于2019-08-21 17:13 / 1063人阅读

摘要：作为一个老前端，本案例是基于来写的。前端渲染页面拿数据，无非就是，其他的暂时没有用过，但项目还是使用比较多。不管或都会执行代码就到这里了，

作为一个老前端，本案例是基于jquery来写的。

前端渲染页面拿数据，无非就是ajax、socket，其他的暂时没有用过，但项目还是使用ajax比较多。

下面来看一下一个简单基于ajax短轮询的请求

function req() {
    $.ajax({
        type: "get",
        url: "demo.php",
        dataType: "json",
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log("请求失败~");
        }
    });
}
req();
setInterval(req, 3000);

如果网速快而稳定的话，可以这样使用，但网速谁能确定呢，如果网速不稳定的话，请求一个接口需要5~10秒，这样就会造成ajax请求堆积，近而引发不可估量的问题，那么怎样去避免这个问题呢？

方式一：给请求赋上一个变量，然后每次轮询先abort掉上一个请求

var ajaxReq = null;
function req(isLoading) {
    if(ajaxReq !== null) {
        ajaxReq.abort();
        ajaxReq = null;
    }
    ajaxReq = $.ajax({
        type: "get",
        url: "demo.php",
        dataType: "json",
        beforeSend: function() {
            if(isLoading) {
                $(".zh-loading").show();
            }
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(isLoading) {
                $(".zh-loading").hide();
            }
        },
        error: function() {
            console.log("请求失败~");
        }
    });
}
req(true);
setInterval(function() {
    req(false);
}, 3000);

猛一看，感觉还行，差不多就OK了，但作为前端的我们要不断的去寻找更合适的方式，所以有个下面这个。

方式二：每一次轮询都判断上一次请求是否完成，完成了才会执行下一次的请求（推荐）

var isLoaded = false;
function req(opts) {
    $.ajax({
        type: "get",
        url: "demo.php",
        dataType: "json",
        beforeSend: function() {
            if(opts.init === 1) {
                $(".zh-loading").show();
            }
            isLoaded = false;
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(opts.init === 1) {
                $(".zh-loading").hide();
            }
            isLoaded = true;
        },
        error: function() {
            console.log("请求失败~");
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

上面的 isLoaded && req({"init": 0}); 表示前面一个条件正确，则执行&&后面的方法

正常的写法是

if(isLoaded) req({"init": 0});

另外注意一点：isLoaded=true 要在complete里加，如果只在success里加的话，请求失败了就不会轮询再请求了。complete不管success或error都会执行

代码就到这里了，thank you for attention~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89263.html

php+ajax实现在线刷新，即时通讯，无需mysql数据库！

摘要：显示实时刷新的内容页面。存储文本数据。更新插入数据。首先呢，要有发送请求并显示递归调用先执行一次然后通过和关联起来。是一个空文件，你只需要用记事本，新建一个，用来存放表单提交过去的数据，也就是说，其实就是一个数据库。也不多，就4个文件。ajax.html - 显示实时刷新的内容页面。chat.php - 处理数据。data.dat - 存储文本数据。update.php - 更新/插...

shleyZ 2019-08-20 17:18 评论0 收藏0
php+ajax实现在线刷新，即时通讯，无需mysql数据库！

摘要：显示实时刷新的内容页面。存储文本数据。更新插入数据。首先呢，要有发送请求并显示递归调用先执行一次然后通过和关联起来。是一个空文件，你只需要用记事本，新建一个，用来存放表单提交过去的数据，也就是说，其实就是一个数据库。也不多，就4个文件。ajax.html - 显示实时刷新的内容页面。chat.php - 处理数据。data.dat - 存储文本数据。update.php - 更新/插...

Crazy_Coder 2019-06-27 16:47 评论0 收藏0
php+ajax实现在线刷新，即时通讯，无需mysql数据库！

摘要：显示实时刷新的内容页面。存储文本数据。更新插入数据。首先呢，要有发送请求并显示递归调用先执行一次然后通过和关联起来。是一个空文件，你只需要用记事本，新建一个，用来存放表单提交过去的数据，也就是说，其实就是一个数据库。也不多，就4个文件。ajax.html - 显示实时刷新的内容页面。chat.php - 处理数据。data.dat - 存储文本数据。update.php - 更新/插...

BlackMass 2019-08-01 16:58 评论0 收藏0
ajax基础知识

摘要：各浏览器都有自己的关于最大长度的限制谷歌火狐超过限制长度的部分，浏览器会自动截取掉，导致传递给服务器的数据缺失。 AJAX基础知识及核心原理解读 AJAX基础知识什么是AJAX？async javascript and xml，异步的JS和XML xml：可扩展的标记语言作用是用来存储数据的（通过自己扩展的标记名称清晰的展示出数据结构）ajax之所以称为异步的js和xml，主要原因...

wangshijun 2019-08-22 15:47 评论0 收藏0
php+ajax开发手机在线传输文本到电脑

摘要：扫码进入表单页面，然后提交表单，接收页面就会立马刷新，不用刷新浏览器就会显示是不是发现省了很多事，不用登录微信就可以在线传输文本。我们知道，手机传输本文到电脑比较简单的方法是在电脑登录微信或者QQ，然后发过去就得了，但是有些人又很懒很懒，懒到连登录微信和QQ都不想登录，那么该怎么做呢？我开发这款小工具其实就可以解决问题，但是目前只支持传输文本，图片视频那些都还没开发。只需要在电脑打...

CrazyCodes 2019-08-01 17:45 评论0 收藏0