小編給大家分享一下ajax如何實時刷新處理，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、潮陽ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的潮陽網(wǎng)站制作公司

前端渲染頁面拿數(shù)據(jù)，無非就是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ǎng)速快而穩(wěn)定的話，可以這樣使用，但網(wǎng)速誰能確定呢，如果網(wǎng)速不穩(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~

以上是“ajax如何實時刷新處理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：ajax如何實時刷新處理-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://vcdvsql.cn/article14/diccde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、手機(jī)網(wǎng)站建設(shè)、ChatGPT、移動網(wǎng)站建設(shè)、網(wǎng)站排名、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)