Page 138 - DCAP312_WEB_TECHNOLOGIES_II

Web Technologies-II

Notes 7.1.3 Using the JavaScript Image Class to Make Asynchronous Cross-Do-
main Requests
The JavaScript Image class is a very simple class that can be used to asynchronously load an
image. To request an image, we simply set the source property to the URL of the image. If the
image loads successfully, the unload() method is called. If an error occurs, the onerror() method
is called. Unlike the HttpXmlRequest, there is no same domain origin policy. The source image
can be located on any server. It does not need to be hosted on the same site as the current page.

We can use this behaviour to send arbitrary requests to our desktop application (or any domain
for that matter) if we realize the source URL can contain any information, including a query
string. The only requirement is that it returns an image. Here is an example URL:
<a herf= “http://localhost:60024/speaktext/dummy.gif?text=Hello“>
http://localhost:60024/speaktext/dummy.gif?text=Hello%20world</a>
We can easily map this URL to the following command in our application.
Public void speak text(string text);
In order to ensure the request completes without error, a 1×1 pixel GIF image is returned. This
image is never actually shown to the user. A tiny image is used to minimize the number of
bytes being transmitted. The most important point to realize is all communication is one way,
from the browser to the desktop application. There is no way of sending information from the
desktop application back to the browser. However, for many applications, this is not a problem.
Google uses the JavaScript Image technique to send visitor information to our pages (hosted on
our domain.com) back to our Google analytics account (hosted on google.com).
Maximum URL Length
We need to be aware that URLs have a maximum length that varies from browser to browser
(around 2K - check). This restricts the amount of information we can send in a single request. If
we need to send a large amount of information, we will need to break it up into smaller chunks
and send multiple requests. The sample application, Browser Speak, uses this technique to speak
arbitrarily large blocks of text.
Text Encoding
JavaScript will automatically encode a URL we pass to Image.src as UTF-8. However, when
passing arbitrary text as part of a URL, we will need to escape the ‘’ and ‘=’ characters. These
characters are used to delimit the name/value pairs (or arguments) that are passed in the query
string portion of the URL. This can be done using the JavaScript escape() function.
Avoiding the Cache

Web browsers will cache images (as well as many other resources) locally to avoid making
multiple requests back to the server for the same resource. This behaviour is disastrous for our
application. The first command will make it through to our desktop application, and the browser
will cache dummy.gif locally. Subsequent requests will never reach our desktop application as
they can be satisfied from the local cache.
There are a couple of solutions to this problem. One answer is to set the cache expiry directives
in the HTTP response to instruct the browser never to cache the result.
The Uniform Resource Locator was created in 1994 by Tim Berners-Lee and
the URI working group of the Internet Engineering Task Force (IETF) as an
outcome of collaboration started at the IETF Living Documents “Birds of a
Feather” session in 1992.

132 LOVELY PROFESSIONAL UNIVERSITY