MSc-IT Study Material
June 2010 Edition

Computer Science Department, University of Cape Town

Synchronous example

This simple example will show you to use XMLHttpRequest objects to request a file using JavaScript. In the same directory, create two files: one called sync-file.html, and the other called text.txt. The text.txt can contain any small amount of text that you like; we suggest using, Hello, world! This is the file that you will be requesting using the XMLHttpRequest object. Make sure that the files are in the same directory, as most browsers have security restrictions that will stop XMLHttpRequest objects from being able to access files outside of the directory that the HTML file making the request is in.

Add the following HTML to sync-file.html:

<html>
  <head>
    <title>This is a title</title>

  </head>
  <body>
    <script type="text/javascript">

      function create_request() {
         var httpRequest;
         if (window.XMLHttpRequest) {
            httpRequest = new XMLHttpRequest();
         }
         else if (window.ActiveXObject) { 
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }
         else
         {
            document.write("Unable to create XMLHttpRequest object.");
         }

         return httpRequest;
      }

      var httpRequest = create_request();

      httpRequest.open("GET", "file://<directory>/text.txt", false);
      httpRequest.send(null);
      if (httpRequest.status == 0) // For non http requests.
      {
         document.write(httpRequest.responseText);
      }
      else
      {
         document.write("There has been a problem opening the file.");
      }

    </script>
    
  </body>
</html>
    

There are a few things that you should note about this example. First, the code to create the XMLHttpRequest object has been hidden in a function called create_request(). Note that this is not a constructor function. We will continue to use this function throughout this chapter. Second, since this code is synchronous, the request to read the document (described in detail below) returns before the page continues to be displayed by the browser. This lets us make use of document.write(), which we will not be able to use so easily after the page has finished being loaded.

Now look closely at the following lines:

httpRequest.open("GET", "file://<directory>/text.txt", false);
httpRequest.send(null);
    

<directory> should be replaced with the directory that the files have been saved in.

The open method does several things. Firstly, it does not actually open the file or Web resource requested by the method. Rather, it sets up a request for a file. The send method sends this request, along with any other information the programmer specifies. Only when send is called will any data transfer take place.

The first argument to open specifies the HTTP request method, as described in the previous chapter on Web application development.

The second argument is the resource that should be accessed. In this case it is a file on the hard drive, but it will usually be a resource on the Web. Note that browser security will generally stop an HTML page or JavaScript file retrieved over the Internet from accessing files on your hard drive – only html files that you saved onto your drive can generally do this. The third argument specifies whether the data should be transferred asynchronously (with the value true), or synchronously (false). The difference to the programmer is that data transferred synchronously will be available immediately for use as soon as the send method is called. In fact, the send method will not return until all the data has been sent and received, which can cause the send method to take a fair amount of time to return. In turn, this can cause the JavaScript script to completely freeze while waiting for data from the server. On the other hand, if asynchronous communication is requested, the send method will return immediately, and all the communication will occur in the background. Unlike with synchronous communication, the data will not be ready when the send method returns.