Javascript Concepts

Google Maps API Tutorial

Javascript Concepts: Asynchronous I/O

In most computer languages, when you tell the program to read or write some data, the processing pauses until that action completes. The results of the read operation are available for use by the next statement in the program.

Most read and write operations in Javascript don’t work like that. Javascript makes a request to the I/O system for the data to be read or written and then continues to execute the following statements without waiting for the action to complete. When the action is completed, a corresponding completion event will be triggered.

If you want to be informed of the I/O completion, e.g. if you want to process the data that’s been read, you have to supply a callback function which will be called when the I/O completes. Or, in some cases, listen for an event that indicates that the operation is complete.

This makes sense when you consider that I/O operations which involve exchanging packets of data with Internet servers in distant parts of the world may take thousands of times longer to complete than I/O operations on your local peripherals. If the browser waited for one image to load before requesting the next, then it would take an awful lot longer for all the images to be displayed.

Images

Most of the time when you load an image, you’re not interested in knowing when the I/O has completed. In those cases when you do care, you can add an “onload” attribute to the <img> specifying the action to be performed when the image fetch is completed.

Alert

One example of an operation which is not asynchronous is “alert”. when you call alert(), all processing is paused until the user clicks the alert window’s “OK” button.

GDownloadUrl, GClientGeocoder and GDirections

GDownloadUrl, GClientGeocoder and GDirections calls are always asynchronous. There’s nothing you can do to make them synchronous.

The results of the I/O are not available immediately after the GDownloadUrl() call, but only within its callback function.

The results of a GDirections call are only available wne its “load” event has been triggered.

GXmlHttp

The method of using GXmlHttp() described in the documentation uses asynchronous processing.

If you really want to, you can use GXmlHttp() in synchronous mode. This is achieved by setting the third parameter of request.send() to false

     var request = GXmlHttp.create();
      request.open("GET", "example.xml", false);
      request.send(null);
      var xmlDoc = request.responseXML;

When used in this way, the “request.send()” will cause the processing to pause until the file has been fetched.

This works in standards-compliant browsers which don’t support ActiveX, and in MSIE6. There’s no guarantee that it will work in any other browsers that support ActiveX.

[The way the code works is that if the browser supports ActiveXObject, then GXmlHttp() calls ActiveXObject(“Microsoft.XMLHTTP”), if not, then if the browser supports window.XMLHttpRequest, then GXmlHttp() calls that. MSIE7 supports both technologies. The API is currently coded to use ActiveX if both are available. I’ve not tested synchronous GXmlHttp in MSIE7.]

onload functions

Another common situation where an asynchronous operation happens is when you use an onload function, either by writing <body onload=”load()”> in the HTML, or equivalently by writing window.onload=load;in the Javascript.

Code that’s placed outside any such function is executed as soon as the browser reads it, then the browser fetches any asyncronous resources that the page requires, in particular the images. After all the image fetches complete, the browser calls the onload function.

Advertisements