XMLHttpRequest

JSON data is retrieved from the server by XMLHttpRequest (XHR). An XMLHttpRequest allows JavaScript code, running in a browser, to fire a request off to the server to a specific URL. It is also possible to define a function call once the server response to the request. There are a few steps to this.

First, create a new XMLHttpRequest with the keyword new. Second, call the open method which takes the following parameters. Firstly, specified which Http method to use (it is pretty much always "GET"). Secondly, specify the URL to call out to (in the case of a JSON file , specify the file name) and finally specify a boolean value that is set to true if the call should be asynchronous (it should pretty much always be asynchronous). Next specify the onload method which is a function to be defined that gets called once the server responds to the request. Finally call the send method that actually kicks-off the request.

  1. Create a new XMLHttpRequest() Object
  2. xhr.open("GET", "URL", async);
  3. xhr.onload = function(){...};
  4. xhr.send();

The following code creates new XMLHttpRequest object, then use its open methoh to define the request will be sent. Te parameters to 'open' are:

  1. HTTP method to us (here "GET")
  2. Resource to request
  3. Boolean indicating whether or not the request to be asynchronous or not

After that the 'onload' method is defined to be the parsing method at the top. It need to be considered that:

  1. The function can not take parameters
  2. 'responseText' member need to be parsed here
  3. The 'request' object can be accessed inside the 'onload' function by using 'this' keyword.
<html>
    <body>
    </body>
    <script>
        parseJSON = function (weaponJSON) {
            parseJSON = JSON.parse(weaponJSON);

            return parsedJSON['frames']['chaingun_impact.png']['spriteSourceSize']['x'];
         };

         var weaponXHR = new XMLHttpRequest();

         var setup = function() {
             weaponXHR.open("GET", "/media/js/standalone/libs/gamedev_assets/weapon.json", true);
             weaponXHR.onload = function(){
             return parseJSON(this.responseText);
             };
             weaponXHR.send();
         };
         setup();
    </script>
</html>
xhr.png/
Edit tutorial

Comment on This Data Unit