Page 137 - DCAP312_WEB_TECHNOLOGIES_II

Unit 7: Advanced ASP.NET

7.1.2 Communicating with a Desktop Application from JavaScript Notes
Bookmark lets allow we to execute an arbitrary block of JavaScript code at the click of a button,
but how do we use this to communicate with a desktop application? The answer is to build a
web server into our desktop application and issue commands from our JavaScript code using
HTTP requests.
Now, before we baulk at the idea of building a web server into our application, it is actually
very simple. We do not need a complete web server implementation. We just need to be able
to process simple HTTP GET requests. A basic implementation is as follows.

1. Listen for a socket connection on a specific port (80 is the default for the HTTP protocol,
but we should use a different port for our application).

2. Accept a connection and read the HTTP GET request.
3. At the URL from the GET header and execute the associated command in our application.
4. Send an HTTP Response back to the browser.

5. Close the connection.
The .NET framework 2.0 has an HttpListener class and associated HttpListenerRequest and
HttpListenerResponse classes that allow us to implement the above in a few lines of code. On
the browser, we need a way of issuing HTTP requests from our JavaScript code. There are a
number of ways of issuing HTTP requests from JavaScript.
The simplest is to write a new URL into the document.location property. This will cause the
browser to navigate to the new location. However, this is not what we want. We do not want to
direct the user to a new page when they click one of our bookmark lets. Instead, we just want
to issue a command to our application while remaining on the same page.
This sounds like a job for AJAX and the HttpXml Request. AJAX provides a convenient means
of issuing requests to a web server in the background without affecting the current page.
However, there is one important restriction placed on the HttpXmlRequest called the same
domain origin policy. Browsers restrict HttpXmlRequests to the same domain as that used to
serve the current page. For example, if we are viewing a page from codeproject.com, we can
only issue HttpXmlRequests to codeproject.com. A request to another domain (e.g., google.com)
will be blocked by the browser. This is an important security measure that ensures malicious
scripts cannot send information to a completely different server behind the scenes without our
knowledge.
This restriction means that we cannot use an HttpXmlRequest to communicate with our
desktop application. Remember that JavaScript bookmark lets are executed in the context of
the current page. We need to be able to send a request from any domain (e.g. codeproject.com)
to our desktop application which will be in the local host domain. Google needs to be able to
do precisely this in order to gather analytics information for a site. If we are not familiar with
Google analytics, it can be used to gather a multitude of information about the visitors to our
web site, such as the number of visitors, where they came from, and the pages on our site they
visit. All this information is collected, transferred back to Google, and appears in various reports
in our analytics account.
To add tracking to our site, we simply add a call to the Google analytics JavaScript at the bottom
of every page of our site. Whenever a visitor lands on our page, the JavaScript runs and the
visitor details are sent back to our Google analytics account. The question is how does Google
do this? Surely, they cannot use an HttpXmlRequest as it would break the same domain origin
policy? They do not. Instead, they use what can only be described as a very clever technique.

LOVELY PROFESSIONAL UNIVERSITY 131