How can I poll a PHP page using javascript?

Question

Hello, I am sure there is a simple answer to this, but I am drawing a blank at the moment, any suggestions pointers would be great.

I have a php page [ lets say counter.php] which when called [loaded/viewed] it connects to a db and increments a counter. I also have another page that has a selects box, I want to add a .js function on the onchange event that will call/poll the counter.php file thus incrementing the counter.

Is there a way to call or poll and file/page from .js, i know that this can be done via a HttpRequest but this seems like overkill as i don't want to return anything or change anything on the page.

thanks in advance

.k

Answer 1

I think you mean you want to implement ajax:

http://en.wikipedia.org/wiki/Ajax_(programming)

The quickest route I can think of to achieving something like that:

<?php   
echo '1';
?>

Download jQuery

And in the head of your document do something like:

<script>
$(document).ready(function() {
    $('#idOfaDiv').load('counter.php');//'1' will be injected into div id="idOfaDiv"
});
</script>

See Ajax/load

Also, there's plenty of discussion about AJAX on this website. I would suggest trying a few searches on AJAX. And, there are many, many ways to achieve what you are trying to do - it is important to consider that what I have suggested is just one.

Answer 2

XMLHttpRequest is really not that hard, but another thing you can do a form submit using an iframe as the target.

<form action="increment_counter.php" target="my-iframe"...

Just keep the iframe hidden and you should be fine. Technically, the target attribute is deprecated, but its in HTML5 so I wouldn't be too worried.

Of course, XMLHttpRequest really isn't that bad, especially if you're using a js lib.

UPDATE just to clarify, the purpose of the iframe is not to get or use the return, the purpose is so that the page does not refresh by using the target attribute.

Answer 3

You can also create a script tag via the DOM, and append the HTML

addScript = function(src) {
     var head = document.getElementsByTagName('head')[0];
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = src;
     head.appendChild(script);
    }

addScript('counter.php');

In your PHP return the instruction as Javascript.

eg:

<?php 

header('content-type: text/javascript');

?>

document.getElementById('mydiv_id').innerHTML = '1';

Answer 4

Thanks for your answers, but maybe I wasn't clear, I don't want to return anything or change anything on the page, I just want to poll the page. I am looking for a simpler way to do so without resorting to ajax/iframe.

here is an example of what i have

counter.php

< ? php

//connect to db

// increment counter val

// DOES NOT RETURN ANYTHING

? >

index.html

< snip >

< script >

increment() {

// I Just need to poll the page [counter.php] here, thus incrementing the counter, ie no change on this page ! };

< /script >

....

< select onchange="increment();"> ... < /select >

< /snip >

Answer 5

PrototypeJS provides the very handy Ajax and PeriodicalExecuter objects which do exactly what you want.

In this example, the Ajax request is executed every 10 seconds. You could also easily make the Ajax call from the onchange of your <select> element.

function increment() {
  new Ajax.Request( '/content.php', {
        method:  'get',
        parameters:  {},
        onSuccess:  function(response, jsonHeader) {
            //If you need to do something with a response, doe it here
        },
        onFailure:  function() {
            alert('Request failed because an error ocurred.');
        }
    });
}

new PeridodicalExecuter(function(pe) {
    //Call pe.stop() to stop the timer;
     increment();    
}, 10);

Answer 6

You have to communicate with the server, and if you are in a browser, that would be through an HTTP request. Call it Ajax, HTTPRequest, page reload, whatever, the server can't tell the different. Use Ajax/HttpRequest to load a URL and just don't return anything.