Get Date Header Asyncronously

Question

As the title says, I want to get the Response Header Date value, but I keep getting the following warning :

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

My code :

function getxmlhttp () {
    // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
    alert ("Your browser doesn't support XML handling!");
    return null;
};

function srvTime(){
    xmlHttp = getxmlhttp();
    //xmlHttp.open('HEAD',window.location.href.toString(),false);
    //need to send this to a non-volitile page
    xmlHttp.open('GET',"blank.php",false);
    xmlHttp.setRequestHeader("Content-Type", "text/html");
    xmlHttp.send(null);
    console.log("raw " + xmlHttp.getResponseHeader("Date"));
    return xmlHttp.getResponseHeader("Date");
};

When I switch this line:

xmlHttp.open('GET',"blank.php",true);

To be true, the value returns NULL.

So can this be done, or do I have to just live with the warning in the console?

Thank you

is jquery an option? if yes, then see this answer. http://stackoverflow.com/a/1457708/1437261 — Gogol, Feb 24 '16 at 12:32
Are you returning any script from blank.php enclosed in script tag to client ? — dreamweiver, Feb 24 '16 at 12:37
You need to use a onreadystatechange/load handler with an async request, only then is data/headers available. See https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date — Alex K., Feb 24 '16 at 12:40
@dreamweiver blank.php is a blank file. Its just so I can grab the header information from the request. — KeeganS, Feb 24 '16 at 17:37

Jack A. · Accepted Answer · 2016-02-24T19:13:25.010

0

As your title states, you must make the request asynchronously. That means you have to issue the request and wait for it to complete to get the information. Something like this should work:

function srvTime(callback) {
    xmlHttp = getxmlhttp();
    //xmlHttp.open('HEAD',window.location.href.toString(),false);
    //need to send this to a non-volitile page
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) { // The operation is complete
            console.log("raw " + xmlHttp.getResponseHeader("Date"));
            callback(xmlHttp.getResponseHeader("Date"));
            xmlHttp = null;
        }
    };
    xmlHttp.open('GET', "blank.php", true);
    xmlHttp.setRequestHeader("Content-Type", "text/html");
    xmlHttp.send(null);
};

Note that you must change the signature of your srvTime method. You can't return the data from it, the caller must supply a callback function that receives the date once the request completes.

An example of how you would use this function with the new signature is as follows:

srvTime(function (serverDate) {
    document.getElementById("clock").innerHTML = "Game Time: " + serverDate;
});

edited Feb 24 '16 at 19:13

answered Feb 24 '16 at 12:44

Jack A.

4,245
1
20
34

He only wants a header so HEAD is probably a better verb. – Alex K. Feb 24 '16 at 12:46
@AlexK. Yes, that's true. To clarify, my intent was to modify his existing code just enough to work. Now that you mention it, though, you should be able to get the header at `readyState == 2` (headers received), so that would be another optimization. – Jack A. Feb 24 '16 at 12:59
@JackA. OK so the one thing I dont understand is the "callback". Can you explain or direct me somewhere that explains how to get the information from there? Thank you for the help so far! – KeeganS Feb 24 '16 at 17:53
Rest of my code: `var updateClock = function() { function pad(n) { return (n < 10) ? '0' + n : n; } var st = srvTime(); var now = new Date(st); var s = pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds()); document.getElementById("clock").innerHTML = "Game Time: " + s; var delay = 1000; setTimeout(updateClock, delay); console.log("Time Updated: " + st); now = ""; };` – KeeganS Feb 24 '16 at 17:57
A "callback" is a reference to a function that will be called when an asynchronous process completes. This is a very fundamental concept for working with JavaScript, so if you are not familiar with this, you'll need to do some study. I'll add an example to the answer. – Jack A. Feb 24 '16 at 19:08
@JackA. I will very much not disagree with you on that. I know I need to study up on this. Thank you again for all your input! – KeeganS Feb 24 '16 at 22:50

Get Date Header Asyncronously

1 Answers1