ajax實時刷新處理

Julylovin 發(fā)布于2019-08-21 17:13 / 1119人閱讀

摘要：作為一個老前端，本案例是基于來寫的。前端渲染頁面拿數據，無非就是，其他的暫時沒有用過，但項目還是使用比較多。不管或都會執(zhí)行代碼就到這里了，

作為一個老前端，本案例是基于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);

如果網速快而穩(wěn)定的話，可以這樣使用，但網速誰能確定呢，如果網速不穩(wěn)定的話，請求一個接口需要5~10秒，這樣就會造成ajax請求堆積，近而引發(fā)不可估量的問題，那么怎樣去避免這個問題呢？

方式一：給請求賦上一個變量，然后每次輪詢先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了，但作為前端的我們要不斷的去尋找更合適的方式，所以有個下面這個。

方式二：每一次輪詢都判斷上一次請求是否完成，完成了才會執(zhí)行下一次的請求（推薦）

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}); 表示前面一個條件正確，則執(zhí)行&&后面的方法

正常的寫法是

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

另外注意一點：isLoaded=true 要在complete里加，如果只在success里加的話，請求失敗了就不會輪詢再請求了。complete不管success或error都會執(zhí)行

代碼就到這里了，thank you for attention~

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89263.html

php+ajax實現在線刷新，即時通訊，無需mysql數據庫！

摘要：顯示實時刷新的內容頁面。存儲文本數據。更新插入數據。首先呢，要有發(fā)送請求并顯示遞歸調用先執(zhí)行一次然后通過和關聯(lián)起來。是一個空文件，你只需要用記事本，新建一個，用來存放表單提交過去的數據，也就是說，其實就是一個數據庫。也不多，就4個文件。ajax.html - 顯示實時刷新的內容頁面。chat.php - 處理數據。data.dat - 存儲文本數據。update.php - 更新/插...

shleyZ 2019-08-20 17:18 評論0 收藏0
php+ajax實現在線刷新，即時通訊，無需mysql數據庫！

摘要：顯示實時刷新的內容頁面。存儲文本數據。更新插入數據。首先呢，要有發(fā)送請求并顯示遞歸調用先執(zhí)行一次然后通過和關聯(lián)起來。是一個空文件，你只需要用記事本，新建一個，用來存放表單提交過去的數據，也就是說，其實就是一個數據庫。也不多，就4個文件。ajax.html - 顯示實時刷新的內容頁面。chat.php - 處理數據。data.dat - 存儲文本數據。update.php - 更新/插...

Crazy_Coder 2019-06-27 16:47 評論0 收藏0
php+ajax實現在線刷新，即時通訊，無需mysql數據庫！

摘要：顯示實時刷新的內容頁面。存儲文本數據。更新插入數據。首先呢，要有發(fā)送請求并顯示遞歸調用先執(zhí)行一次然后通過和關聯(lián)起來。是一個空文件，你只需要用記事本，新建一個，用來存放表單提交過去的數據，也就是說，其實就是一個數據庫。也不多，就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開發(fā)手機在線傳輸文本到電腦

摘要：掃碼進入表單頁面，然后提交表單，接收頁面就會立馬刷新，不用刷新瀏覽器就會顯示是不是發(fā)現省了很多事，不用登錄微信就可以在線傳輸文本。我們知道，手機傳輸本文到電腦比較簡單的方法是在電腦登錄微信或者QQ，然后發(fā)過去就得了，但是有些人又很懶很懶，懶到連登錄微信和QQ都不想登錄，那么該怎么做呢？我開發(fā)這款小工具其實就可以解決問題，但是目前只支持傳輸文本，圖片視頻那些都還沒開發(fā)。只需要在電腦打...

CrazyCodes 2019-08-01 17:45 評論0 收藏0