使用AJAX POST到PHP并在更改时刷新

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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>