POST to PHP using AJAX and update on change
I am trying to create a web application that needs to refresh the whole page when the database changes. I would like to achieve this using AJAX and PHP. I would like to POST one piece of information to the PHP script every 5 seconds, and if the return value from the PHP script is different from the 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 PHP, this is just an XJAX problem I am facing. I also would not like to use jquery if possible.
Thanks in advance for any guidance!
EDIT: I wouldn't like to use jquery or any other framework, just raw javascript. I also need to refresh the whole page on change and run AJAX every 5 seconds.
source to share
if(xmlhttp.responseText !== "<?php echo $currentValue; ?>") {
to check if the PHP side value has changed. This method
watchdog
is called after 5 seconds after
setInterval
. If there is a change, the page is refreshed with
document.location.reload(true)
( ref ) to prevent cache reuse.
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 might otherwise not trigger another setTimeout
. setInterval
ensures that the server is polled consistently regardless of connection failures.
source to share
Please try entering the code below. I used the javascript setInterval function which will make an ajax call every 5 seconds. Now please make an effort to make changes to the code according to your requirements and continue.
<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
if(predefined_val !== data){
// action you want to perform on value changes.
}
}
});
},5000);// function will run every 5 seconds
}));
</script>
source to share