Loading files using standard JavaScript

The standard way to load data into a Web page is using asynchronous JavaScript and XML, or Ajax. It uses the standard built-in XMLHttpRequest object, supported by all modern browsers.

To load a file using XMLHttpRequest, you need to create the XMLHttpRequest object, choose an HTTP method, use the object to open an HTTP connection to the file's URL, and send the request. You must also create a callback function that listens to the object's 'readystatechange' event and test the object's readystate property.

When this property contains XMLHttpRequest.DONE, the request is done and you can extract the data. But it's not finished yet! If the request finished successfully (the object status property equals 200), you need to extract the data from the object. In a CSV file, the data will be in the responseText property (it's in a different place if it's XML). Only then can you finally parse its contents and create your data array. This is shown in the following code (Examples/example-9-ajax.html):

 const httpRequest = new XMLHttpRequest();
 httpRequest.open('GET', 'Data/sample.csv');
 httpRequest.send();
  
    httpRequest.onreadystatechange = function(){
       if (httpRequest.readyState === XMLHttpRequest.DONE) {
           if (httpRequest.status === 200) {
               const text = httpRequest.responseText;
               parse(text);
           }
       }
    }
function parse(text) {
     // parse the CSV text and transform it into a JavaScript object
 }