0

Here is the code:

var clickCounter = 0;

function clickme()
{   
    console.log("1value of clickCounter="+clickCounter);
    var ourRequest = new XMLHttpRequest();//we are just defining the request over here
    console.log("1.1value of clickCounter="+clickCounter);
    ourRequest.open('GET', 'http://localhost/ajaxTutorials/js/data'+clickCounter+'.json');
    console.log("1.2value of clickCounter="+clickCounter);
    ourRequest.onload = function()
    {
        //console.log(ourRequest.responseText);//just output the data as text
        console.log("2value of clickCounter="+clickCounter);
        var ourData = JSON.parse(ourRequest.responseText);
        //console.log(ourData[0].name);
        renderHTML(ourData);
    }
    ourRequest.send();//now we are actually sending the request
    console.log("1.3value of clickCounter="+clickCounter);
    clickCounter++;
    console.log("1.4value of clickCounter="+clickCounter);
}

And here is my console log:

main.js:6 1value of clickCounter=0
main.js:8 1.1value of clickCounter=0
main.js:10 1.2value of clickCounter=0
main.js:20 1.3value of clickCounter=0
main.js:22 1.4value of clickCounter=1
main.js:19 GET http://localhost/ajaxTutorials/js/data0.json 404 (Not Found)
clickme @ main.js:19
onclick @ (index):6
main.js:14 2value of clickCounter=1
VM76:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.ourRequest.onload (main.js:15)
ourRequest.onload @ main.js:15
XMLHttpRequest.send (async)
clickme @ main.js:19
onclick @ (index):6

According to me its execution should be such, so that it prints console logs in the order

1

1.1

1.2

2

1.3

1.4

since the onload function should be called when ourRequest.send() is reached.

  • `onload` is called when the response was **received**, not when the request was sent. There are quite a few questions about how async stuff works in JavaScript. E.g. [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086/218196) – Felix Kling Oct 23 '17 at 19:19
  • 1
    `send` is async, meaning all the sync code first finishes running, then any async callbacks get called – nem035 Oct 23 '17 at 19:20
  • @FelixKling thank you. it will take me some time to get a hold of this. till then I will either delete this question or change the title to a more general one –  Oct 23 '17 at 19:26
  • You are only *defining* the function ourRequest.onload in a certain order, but the *execution* of that function happens when the server (finally) responds to the ajax request, ie, later on. – James Oct 23 '17 at 19:26
  • @James exactly when later on? (if you can tell me very briefly) –  Oct 23 '17 at 19:27
  • Unknown! It depends entirely on the http(s) transaction, latency, server response, etc. (Usually it takes less than a second) – James Oct 23 '17 at 19:29
  • @James the `clickCounter++` doesn't update on the video tutorial I am following as it does on mine(It remains 0 for the first . So does it depend machine to machine? –  Oct 23 '17 at 20:00

0 Answers0