Calling a php script at regular intervals with javascript

Question

I'm working on generating output on a section of a page at regular intervals with php and javascript. I'm brand new to js, so please forgive any obtuse questions.

The original php code is;

<?php

$data = file_get_contents("http://" . $phoneControlUsername .":" . $phoneControlPassword . "@" . $ip . "/CGI/Screenshot");
$filename = "tempFiles/phoneScreenshot$dev";
file_put_contents($filename, $data);
echo "<img src=" . $filename . " style='width:100%;'>"

?>

This used to be part of my main page, but I moved it over to its own file called screenGen.php. My main page can call on it with no problem at all;

require('screenGen.php');

I need this particular code to be generated every five seconds. So, in reading how javascript and php can be used together, I came up with;

<script>

window.setInterval(function() 
        {
        screenGen = '<?php require('screenGen.php'); ?>';
        document.write(screenGen);
        }, 5000);

</script>

Of course, this does not work. I can't find the right directions on how to do something like this because, being new to the subject, I don't know how to look for it. How can I generate screenGen.php at regular intervals?

score 1 · Answer 1 · edited May 23 '17 at 12:08

One of the solution to your need would be to use requests as they'll make your server re-generate screenGen's output.

In your javascript source code, you can:

Replace the require in the screenGen variable declaration by performing a GET request to your screenGen.php file. You'll store the response to the request in your screenGen variable and then write it as you are already doing.

To summarize:

Perform a GET request on screenGen.php
Retrieve the result of the get request (which is the execution of echo "<img src=" . $filename . " style='width:100%;'>")
Use document.write to update the actual page

Code example:

HTTP Get request auxiliary function (taken from SO):

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

The JAVASCRIPT which will call the the script:

window.setInterval(function() 
        {
        screenGen = httpGet('<domain>/<script_folder>/screenGen.php');
        document.write(screenGen);
        }, 5000);

This is a very high-level description of a possible solution. To make it a great answer, embedd some more code examples. — Zim84, Dec 29 '15 at 15:36
@Answers_Seeker - thanks for the reply. I think this code is failing on the httpGet step. The screenGen.php file is located in the root of the web folder, does this main that the parameter should be `httpGet('/screenGen.php')` ? — Kimomaru, Dec 29 '15 at 16:05
Give to httpGet the URL you type in your browser to access your PHP file and it should work IMHO. — Answers_Seeker, Dec 29 '15 at 16:12

A1rPun · Answer 2 · 2015-12-29T15:55:34.420

You can GET your php result with AJAX and then append the result to the body of the page like this:

function getImage(url){
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        //check the state of the XMLHttpRequest
        if (xhttp.readyState !== xhttp.DONE && xhttp.status !== 200) return;
        //append php page to the document body
        document.body.innerHTML += xhttp.responseText; 
        //call itself after 5 seconds
        setTimeout(getImage, 5000); 
    };
    xhttp.open("GET", url);
    xhttp.send();
}

Usage:

getImage("screenGen.php");

I used a setTimeout instead of a setInterval because the AJAX is asynchronous and this way you can assure the next call is made 5 seconds after the previous request was returned.

I also use document.body.innerHTML += instead of document.write because the latter rewrites the whole body of the page (unless this is intended) after the HTML document is fully loaded.

score 0 · Answer 3 · answered Dec 29 '15 at 16:31

You can use JQuery to load dynamic content inside container. So append child into root container and load content generated from PHP

<div id="images"></div>
<script>
window.setInterval(function() 
        {
        var el = $('<div></div>');
        $('#images').append(el);
        el.load("/screenGen.php");
        }, 5000);
</script>

score 0 · Accepted Answer · answered Dec 30 '15 at 16:36

I found an answer that's simpler than the ones posted.

1) Install jquery on your server. If you're using Debian, you can install with sudo apt-get install libjs-jquery

2) In your PHP;

<div id="auto"></div>

<script language="javascript" type="text/javascript" src="/javascript/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function()
        {
        $('#auto').load('screenGen.php');
        refresh();
        });

function refresh()
        {
        setTimeout( function()
                {
                $('#auto').load('screenGen.php');
                refresh();
                }, 5000);
        }
</script>

Calling a php script at regular intervals with javascript

4 Answers4