在Ajax调用中连续获取PHP循环数据

Question

I have this codes in process.php :

$users = $_POST['users']; // Sample: "user1, user2, user5"
$users = explode(', ', $users);
$step = 0;
foreach ($users as $r) {
   $user_email = get_user_email($r); // Get email of each user
   if (!empty($user_email)) {
      send_w_mail(); // Send email to each user
      $step++;
      echo json_encode(
             ['step' => $step, 'all' => count($users)]
           ); // echo output
        }
    }

And this is my ajax call in index.php :

$("#send-message").click(function () {
    $.ajax({
        url: global_base_url + 'process.php', // global_base_url defined.
        async : true,
        type: 'POST',
        data: {'users': input_users}, // input_users is val() of a input.
        encoding: 'UTF-8',
        success: function (data) {
            data = $.trim(data);
            if (data){
                data = $.parseJSON(data);
                var p_value = parseInt(data.step*100)/data.all;
                set_progressbar_value(p_value); // set progressbar value. sample: 23%
            }
        }
    });
});

This codes don't have any problem for execute and showing result.

But I want to Continuously get output json data from process.php in order to show process of each $step in Percent unit in a bootstrap process-bar;

I found some function like ignore_user_abort() , ob_clean() and ob_flush() but don't know how can I solve my problem with them.

How Can I do this? Please help me to solve the problem. Thanks a lot.

Answer 1

There are two ways of approaching this problem

1. Websocket
2. Long polling

I will be describing the long polling method here:

$users = $_POST['users']; // Sample: "user1, user2, user5"
$users = explode(', ', $users);
$step = 0;
foreach ($users as $r) {
    $user_email = get_user_email($r); // Get email of each user
    if (!empty($user_email)) {
        send_w_mail(); // Send email to each user
        $step++;
        echo json_encode(
            ['step' => $step, 'all' => count($users)]
        ); // echo output
        //Flush the output to browser
        flush();
        ob_flush();
    }

Jquery does not provide api for XMLHttpRequest.readyState == 3 (Loading docs here ) so we need to use raw XMLHttpRequest object

$("#send-message").click(function () {
    var prev_response = "";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", global_base_url + 'process.php', true);

    //Send the proper header information along with the request
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {//Call a function when the state changes.
        if(xhr.readyState == 3) {
            // Partial content loaded. remove the previous response   
            var partial_response = xhr.responseText.replace(prev_response,"");
            prev_response = xhr.responseText;
            //parse the data and do your stuff
            var data = $.parseJSON(partial_response);
            var p_value = parseInt(data.step*100)/data.all;        
            set_progressbar_value(p_value); 
        }
        else if(xhr.readyState == 4 && xhr.status == 200){
            set_progressbar_value(100);
            console.log("Completed");
        }

    }
    xhr.send("users="+ input_users); 

});