Come and see ajax real-time refresh processing-JS Tutorial-php.cn

Come and see ajax real-time refresh processing

coldplay.xixi

Release： 2020-12-10 17:48:30

forward

3273 people have browsed it

ajax tutorialColumn introduction to real-time refresh processing

Come and see ajax real-time refresh processing

Recommended (free) ：ajax tutorial(Video)

As an old front-end, this case is written based on jquery.

The front-end rendering page uses nothing more than ajax and socket to get data. The others have not been used for the time being, but the project still uses ajax more.

Let’s take a look at a simple request based on ajax short polling

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

Copy after login

If the network speed is fast and stable, you can use it like this, but who can determine the network speed? If the network speed is not If it is stable, it will take 5 to 10 seconds to request an interface. This will cause ajax requests to accumulate, which will soon cause immeasurable problems. So how to avoid this problem?

Method 1: Assign a variable to the request, and then abort the previous request each time it is polled

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);

Copy after login

At first glance, it feels okay, almost OK, but as a front-end We have to keep looking for more suitable ways, so here is the one below.

Method 2: Each polling will determine whether the previous request is completed, and the next request will be executed only after it is completed (recommended)

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);

Copy after login

## above #isLoaded && req({"init": 0}); means that the previous condition is correct, then the method after && will be executed.

The normal writing method is

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

Copy after login

Another note:

isLoaded=true It needs to be added in complete. If it is only added in success, if the request fails, it will not be polled and requested again. complete will execute regardless of success or error.

The code is here, thank you for attention~

Related free learning recommendations:
javascript(Video)

The above is the detailed content of Come and see ajax real-time refresh processing. For more information, please follow other related articles on the PHP Chinese website!