The primary reason is that the round trip time required to submit a form and
then download the response is often inconvenient. The user experience is much
improved if, instead of clicking a Submit button and watching the screen go
blank and then be replaced by the response of a server-side program, a user can
click a button and have the page be updated without a visible form submission.
To the user, the page would behave more like an application than a Web page.
There are other advantages as well. If communication with a server
can be done behind the scenes instead of using form submissions or clicking on
links, the developer can carry out more complicated tasks requiring multiple
server requests at once. The ability to use remote JavaScript also means that
tasks that previously required an ActiveX object or Java applet can be
implemented with script. This is a tremendous timesaver for the developer and
also reduces the complexity of debugging significantly.
The abstraction that remote JavaScript brings to life is the
remote procedure call. A remote procedure call (RPC) is a function that executes on a remote machine, in this
case a Web server. The client, in this case our browser using JavaScript, passes
arguments to the “function” it wishes to call via an HTTP request; the server
executes the specified function, often implemented as a CGI program or
server-side script in PHP or a similar language, and returns the results as the
body of the HTTP response. It’s important to remember that while JavaScript is
used to make the function call and often to handle the return value, the
function itself executes on the server, and therefore can be implemented as a
CGI, PHP script, Java servlet, or using any other technology a Web server might
have available.
By far the most common vehicle used for one-way
communication is images. You don’t even have to use <<img>>s embedded in the page; in fact, it’s preferable not
to. Since you don’t intend to actually download or display an image, you can
create an Image object, use it, and then throw it away.
Consider the following document fragment:
<<script type="text/javascript">>
var commandURL = "http://demos.javascriptref.com/setrating.php?";
function sendURL(url)
{
var img = new Image();
img.src = url;
}
function sendRating(productid, rating, user)
{
var params = "productid=" + productid;
params += "&rating=" + rating;
params += "&user=" + user;
sendURL(commandURL + params);
return false;
}
<</script>>
<<!-- ... -->>
Rate this item:
<<form action="#" method="get">>
<<input type="button" value="Horrible!" onclick="return sendRating(2158, 1,
'Bob');" />>
<<input type="button" value="OK" onclick="return sendRating(2158, 2,
'Bob');" />>
<<input type="button" value="Great!" onclick="return sendRating(2158, 3,
'Bob');" />>
<</form>>
| Note |
Don’t think that because we are using form
buttons here that this is a traditional style communication. In fact, we could
have used just about any object we could click by attaching an onclick, including links
(<<a>>) or even structural elements like <<div>> or <<p>>, but we used
form buttons since the user would feel they were clickable!
|