Any already written function to asynchronously call javascript function after onload completes?

Question

I'd like to convert a working javascript function that uses XMLHttpRequest() (or ActiveXObject, if necessary) to perform a synchronous data fetch from the server into an asynchronous one, if it can be done without undue pain. This function today "caches" the data so received, so it only needs to be fetched once. When I do the "simple" thing of merely selecting the asynchronous option of XMLHttpRequest() to perform the fetch asynchronously using the provided-for call-back feature, callers to my function don't get their data because it typically hasn't been returned yet from the server, and so the moment is lost. After the data has returned, of course there's no problem, but since many calls must come from onload, they aren't easily repeated. (Is there a way to "fire" all the functions in an inload list after the load as completed? This might be an alternative way around the issue.)

When, instead, it's done synchronously, the system works fine. There's a slight delay for some things until the data returns, but it's not enough, typically, to be an issue (so far). However, this usage is deprecated. Firefox's developer's console, for example, reports:

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

Since I don't really know any other mechanism (which is what this question is all about), I was thinking that I'd have to make my function that calls XMLHttpRequest() somehow track the calls it receives from other functions and take on the responsibility of performing whatever they need done after data has been received. Calling functions could, perhaps, be broken into two parts, one that requests the data, another that gets done whatever is needed when the data has shown up. The function using XMLHttpRequest() could implement this, for example, by adding a number of arguments to its function signature, such as what function to later call and so forth. ... I think it could be done but it's an unweildy mess. There must be a better way, I'm just trying to come up with one.

To be clear, the code works as synchronous right now. I'm looking for an easier way to make it asynchronous. It doesn't seem that easy!

Here's a snippet of the code that does it synchronously:

    var xmlhttp;
    var dn = window.location.hostname;
    var srcURL = "http://"+dn+"/unpublished/latest/this.txt";
    if (window.XMLHttpRequest)
    {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST", srcURL, false);
    xmlhttp.setRequestHeader("Content-type",
     "application/x-www-form-urlencoded");
    xmlhttp.send("fname=Who&lname=Cares");
    if (xmlhttp.readyState == 4 && xmlhttp.status==200)
    {
      var siteData = xmlhttp.responseText;
      . . . 

The asynchronous version - that works fine in fetching the data, but too late for some callers - is rather similar. Here's a snippet of it:

if (window.XMLHttpRequest)
{
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//the callback function to be called when AJAX request comes back
xmlhttp.onreadystatechange = function()
{
  if (xmlhttp.readyState == 4 && xmlhttp.status==200)
  {
    var siteData = xmlhttp.responseText;
... etc ...

Here's an example of what the callers to look like. Note that getSiteData() is the function that contains the snippets above. To wit:

  <script type = "text/javascript">
    function setLinkToContact(objId)
    {
      document.getElementById(objId).setAttribute('href',
       getSiteData('contact'));
    }
  </script>

There are MANY such callers for one "getSiteData()" function.

Answer 1

I read your question multiple times trying to understand it. Multiple pages require data from an async function call. Each page has unique data requirements that is dependent upon the async callback.

If that’s correct, here’s an approach you can try.

At the top of each page and before the async request kicks off, declare an empty global function on each page.

window.myAsyncCallback = function(){}

Have each page declare a function to handle the async callback.

page1 
var handleCallback1 = function(data){
    // unique handler 1
}

page2 
var handleCallback2 = function(data){
// unique handler 2
}

Assign that handlerCallback1 and handlerCallback1 to myAsyncCallback.

window.myAsyncCallback = handleCallback1;
window.myAsyncCallback = handleCallback2;

Then inside your onreadystatechange function. Execute the window.myAsyncCallback(data) with data. Each concrete implementation will trigger when data is available. Then you can use it how ever you want now that it’s available.

**********UPDATE UPDATE********

Are you able to update calls to “getSiteData(‘contact’)?” If so, maybe consider calling getSiteData.call() function and passing it reference to the dom element that needs the network data. Then inside getSiteData, set the element’s dataset value. Store the element in an array so you can retrieve it after the net request is complete. Then loop through the elements list, look for it’s value, and update as needed since you’ll have reference to the dom element.

If you are unable to modify the caller function, then try messing around with Function prototyping. Refactoring might be a lot of work but seems like the best option to avoid introducing race conditions. If you refactor for asynch, function callbacks should work for you without having to get into Promises and EventListeners; both of which are still great options but callbacks are lean for your needs.

I’m curious to know how you solve it. Keep me posted if possible.

<title></title>
    <script>
        var elements = [];

        var getSiteData = function(elem, value){
            // set element data
            elem.dataset = value;

            // store
            elements.push(elem);

            // mimic async request
            setTimeout(function(){

                var xmlHttpData = {
                    "contact":"http://www.yahoo.com",
                    "contacttwo":"http://www.google.com"
                }

                linklist.forEach(function(element, index, arr){
                    // match dataset value in element to xmlHttpData. 
                    //element.dataset.value 
                })

            },3000);

        }

        function setLinkToContact(objId){
            document.getElementById(objId).setAttribute('href', 
            getSiteData.call(document.getElementById(objId),'contact'));
        }

    </script>

<body>
    <a id="link" href="">my link</a>
    <div id="linktwo">my link</a>
    <script>
        setLinkToContact('link');
        setLinkToContact('linktwo');
    </script>
</body>