4

I am trying to build a web application that needs to refresh the entire page when there is a change in the database. I would like to achieve this using AJAX and PHP. I would like to POST a single piece of information to the PHP script every 5 seconds and if the returned value from the PHP script is different from a predefined variable, I would like to refresh the entire page.

For example, I have a predefined value in javascript of 200. If the PHP script returns a different value, I would like to refresh the entire page.

I know how to write the PHP, it is just the XJAX I am having issues with. I would also not like to use jquery if possible.

Thanks in advance for any guidance!

EDIT : I would not like to use jquery or any other framework, just raw javascript. I also need to refresh the entire page upon change and run the AJAX every 5 seconds.

Brandon
  • 43
  • 4
  • Possible duplicate? http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery – Sandeep Bansal Jun 07 '15 at 14:18
  • This will help: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php – Himanshu gupta Jun 07 '15 at 14:20
  • @SandeepBansal Nope, I am asking about POSTing information and refreshing upon change. – Brandon Jun 07 '15 at 14:20
  • @Himanshugupta I would not like to use jQuery and I would like to refresh upon changes and trigger it to run every 5 seconds. – Brandon Jun 07 '15 at 14:22
  • The links they provided have how to ajax without jQuery, what else you need? – oscargilfc Jun 07 '15 at 14:28
  • There is no way to send something from PHP to the browser, that is, the server can't initiate an ajax call, the browser has to. If you use websockets or server-sent events it's different, but for ajax you have to do long polling, or send an ajax request to the server every 5 seconds to see if anything changed. – adeneo Jun 07 '15 at 14:28
  • And it's just a basic XMLHttpRequest inside a recursive function with a timeout. – adeneo Jun 07 '15 at 14:29
  • Maybe he wants to do that from raw javascript, that he means by saying no jquery if possible.., for that this link will surely help http://www.javascriptkit.com/dhtmltutors/ajaxgetpost2.shtml and after that as andeneo said, just make ajax requests every 5 seconds, and if the result is success, just reload the page... – Himanshu gupta Jun 07 '15 at 14:33
  • How do want to keep track of the previous and new DB return value across page refreshes? Will you echo some PHP variable in your client page? If so, please show is what it is. – Drakes Jun 07 '15 at 14:33
  • @oscargilfc I need to know how to know how to POST information within AJAX and refresh the page upon a change. – Brandon Jun 07 '15 at 14:33
  • @Drakes I will use PHP to echo the value to compare the AJAX value from when the page loads. – Brandon Jun 07 '15 at 14:35
  • Then you have to be more specific like: "How can I POST using ajax" or "how do I refresh the entire page?" As some of the answers below says, you only have to use `xhr.open('POST', url, true);` – oscargilfc Jun 07 '15 at 14:41
  • @Brandon Perfect. A solution is awaiting you using this method – Drakes Jun 07 '15 at 14:47

3 Answers3

2

Good question. You can do if(xmlhttp.responseText !== "<?php echo $currentValue; ?>") { to check if the PHP-side value has changed. This watchdog method is called very 5 seconds through setInterval. If there is a change, then the page is refreshed via document.location.reload(true) (ref) to prevent reusing the cache.

function watchdog() {
  var xmlhttp;
  if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5 - whatever, it doesn't hurt
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      // This is how you can discover a server-side change
      if(xmlhttp.responseText !== "<?php echo $currentValue; ?>") {
        document.location.reload(true); // Don't reuse cache
      }
    }
  };
  xmlhttp.open("POST","page.php",true);
  xmlhttp.send();
}

// Call watchdog() every 5 seconds
setInterval(function(){ watchdog(); }, 5000);

Note: I chose setInterval over setTimeout because if the connection to the server fails (500-error, timeout, etc.), then the response logic may otherwise fail to trigger another setTimeout. setInterval ensures the server is polled consistently regardless of connection failures.

Drakes
  • 23,254
  • 3
  • 51
  • 94
0

Your AJAX can be executed every 5 seconds using the setInterval() function. And you can call to refresh the page from AJAX request completion callback.

Sheikh Uzair Hussain
  • 121
  • 1
  • 6
0

Please try below code. I have used javascript setInterval function which will make ajax call every 5 seconds. Now please make efforts to make changes in code as per your requirements and take it further.

<script type="text/javascript" >
    var predefined_val = 'test';// your predefined value.
    $.document(ready(function(){
        setInterval(function(){
            $.ajax({
                type:"POST",
                url:"test/test_script.php", //put relative url here, script which will return php
                data:{}, // if any you would like to post any data
                success:function(response){
                    var data = response; // response data from your php script
                    if(predefined_val !== data){
                        // action you want to perform on value changes.
                    }
                }
            });                     
        },5000);// function will run every 5 seconds
    }));
</script>
Sashant Pardeshi
  • 1,075
  • 7
  • 21