For each php loop get results added via AJAX

Question

I have a working AJAX request call, that calls to a PHP file(which has some looping) and depending on some parameters in can take several minutes for the request to be ready. But waiting several minutes is not really user friendly.

How should i modify my code in order to have results outputed in HTML after after each for loop is over?

I understand this streaming effect could be accomplished with API's like web-sockets or socket.io, but I hope I can manage to accomplish this without needing to implement the use of these API's .

Live example witch the effect i am going for:

http://www.brokenlinkcheck.com/

I have made a demo of my code with the core of my logic in it:

PHP File :

<?php

$html = file_get_html($url);

function check_url($a)
{

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $a);
    curl_setopt($ch, CURLOPT_HEADER, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $data    = curl_exec($ch);
    $headers = curl_getinfo($ch);
    curl_close($ch);

    return $headers['http_code'];
}
$good_array = array();
$number = 1;
foreach ($html->find('a') as $element) { // this one should return results first

    $a = $element->href;
    $check_url_status = check_url($a);
    if (!preg_match('/404/', $check_url_status)) {
        echo "<p style='color:green'>" . $number . '. ' . $a . " - Works (Response: $check_url_status) </p>";
        $good_array[] = $a;
    } else {
        echo "<p style='color:red'>" . $number . '. ' . $a . " - Broken (Response : $check_url_status) </p>";
    }
    $number++;
}
array_unique($good_array);

for ($x = 0; count($good_array) > $x; $x++) { // from then on for every ending of this loop - it should add new html output via ajax.

    $html = file_get_html($good_array[$x]);
    foreach ($html->find('a') as $element) {

        $a = $element->href;

        $check_url_status = check_url($a);
        if (!preg_match('/404/', $check_url_status)) {
            echo "<p>" . $number . '. ' . $a . " -  Works (Response : $check_url_status) | src: $good_array[$x] </p>";
        } else {
            echo "<p>" . $number . '. ' . $a . " - Broken (Response : $check_url_status) | src: $good_array[$x]  </p>";
        }
        $number++;
    }
}
?>

jQuery AJAX:

 $(document).ready(function () {

     $("#ajax-btn").click(function () {
         $.ajax({
             url: "../broken_links",
             type: "get",


             success: function (result) {
                 $("#div1").load('http://website.dev/php');
                 //  alert('works');
             },
             error: function (jqXHR, textStatus, errorThrown) {
                 console.log(textStatus, errorThrown);
             }

         });
     });
});

(Would be perfect if the solution involved jQuery AJAX, but vanilla JS would also do)

HTML:

<div class="panel panel-default">
    <div class="panel-body">
        <h2 id='div1'>test</h2>
        <button id='ajax-btn'> Change Content</button>
    </div>
</div>

Between I'm using Laravel 5.3 Framework so any solutions that involves built in framework features are also welcome!

Answer 1

You won't be able to send partial AJAX updates using PHP. Why don't you get all of the URLs from JavaScript and test them one by one.

$('a').each(function(){
    var $anchor = $(this);

    // Do Ajax call to check for this URL, directly to that page or your own PHP

    $.ajax({
         url: "../broken_links",
         type: "get",
         data: { url: $anchor.attr('href') },
         success: function (result) {
             $("#div1").load('http://website.dev/php');
             //  alert('works');
         },
         error: function (jqXHR, textStatus, errorThrown) {
             console.log(textStatus, errorThrown);
         }

     });

});

PHP

<?php

$url = $_GET['url'];


    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $data    = curl_exec($ch);
    $headers = curl_getinfo($ch);
    curl_close($ch);

    if (!preg_match('/404/', headers['http_code'])) {
        echo "<p style='color:green'>" . $number . '. ' . $url . " - Works (Response: $check_url_status) </p>";
        $good_array[] = $a;
    } else {
        echo "<p style='color:red'>" . $number . '. ' . $url . " - Broken (Response : $check_url_status) </p>";
    }

?>