Refreshing my php page with AJAX every 5 seconds

Question

I'm creating a link-sharing website and on my index.php page (the page I want to refresh every 5 seconds) there are posts/links that must appear automatically (AJAX refreshing) without the user to refresh by him/herself or pressing F5 the whole time.

How would this work, precisely?

Take a look at this thread - a similar solution which uses jQuery. http://stackoverflow.com/questions/1406580/jquery-ajax-polling-for-json-response-handling-based-on-ajax-result-or-json-cont — Steve, Oct 12 '11 at 13:47

score 4 · Accepted Answer · answered Oct 12 '11 at 13:42

You should use the setInterval javascript function to deal with this issue.

setInterval(callServer, REFRESH_PERIOD_MILLIS);

See:

some info on ajax Periodic Refresh
javascript setInterval documentation
[edit] some good refresh examples, especially without js framework (depending wether you want to use jquery, mototools, another or no framework...)

Mark · Answer 2 · 2012-10-16T21:01:30.603

1

Is there a need to use AJAX? Unless I'm missing something; you could use the meta refresh tag:

<meta http-equiv="refresh" content="5">

I would recommend increasing the time between refreshes as this will put a heavier load on the server and may cause to freeze, or slow down the site.

edited Oct 16 '12 at 21:01

answered Oct 12 '11 at 13:47

Mark

502
4
10

1

I second this, although obsolete still is fully supported across all tested browsers ;) – dExIT Aug 25 '17 at 12:12

score 1 · Answer 3 · answered Oct 12 '11 at 13:51

you have to user the setInterval method to call your ajax function to inject new content into your div:

  <HTML>
    <HEAD>
    <TITLE>Hello World Page</TITLE>
    <script language="JavaScript">

        function xmlhttpPost(strURL) {
            var xmlHttpReq = false;
            // Mozilla/Safari
            if (window.XMLHttpRequest) {
                xmlHttpReq = new XMLHttpRequest();
                if (xmlHttpReq.overrideMimeType) {
                    xmlHttpReq.overrideMimeType('text/xml');
                    // See note below about this line
                }
            // IE
            } else if (window.ActiveXObject) { // IE
                try {
                    xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
                }
            }
            if (!xmlHttpReq) {
                alert('ERROR AJAX:( Cannot create an XMLHTTP instance');
                return false;
            }   
            xmlHttpReq.open('GET', strURL, true);
            xmlHttpReq.setRequestHeader('Content-Type', 
                'application/x-www-form-urlencoded');        
            xmlHttpReq.onreadystatechange = function() { 
                callBackFunction(xmlHttpReq); 
            };
            xmlHttpReq.send("");
        }

        function callBackFunction(http_request) {
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    var responceString = http_request.responseText;
                    //TODO implement your function e.g.
                   document.getElementById("myDiv").InnerHTML+ = (responceString);
                } else {
                    alert('ERROR: AJAX request status = ' + http_request.status);
                }
            }
        }
      setInterval("xmlhttpPost('test.php')", 5000);
    </script>
    </HEAD>
    <BODY>
    Hello World

    <div id="myDiv"></div>
    </BODY>
    </HTML>

score 0 · Answer 4 · answered Oct 12 '11 at 13:46

0

Use setInterval(myAjaxCallbackfunction,[time in ms]). Callback uses property of js that function are first class members(can be assigned to variables), and can be passed as argument to function for later use.

answered Oct 12 '11 at 13:46

deepinit

1
1

Refreshing my php page with AJAX every 5 seconds

4 Answers4