Remote Scripting
The situation: You want to change part(s) of a Web page using data from the server in response to user actions. The user experience needs to be similar to using a local application. It has to be responsive: the page cannot be reloaded with each user action. And, the data cannot be included with the initial page download.
This article introduces tutorials on two different ways to implement remote scripting. Another name is remote procedure calls (RPC). This is may be a better term because it evokes the idea of a procedure being run remotely. These methods fit into the AJAX pardigm. Slightly misnamed because XML isn't required. AJAX RPCs expand the utility of DHTML and Web applications.
Why remote scripting?
With traditional Web methods, the page is reloaded to show new content. DHTML adds the ability to display hidden content dynamical, but the content needs to be in the initial page download. This provides a more responsive user experience than reloading the page in response to each user action, and can be a good trade off to any increase in the initial page loading time. However, when the data required is large; for example, a database of zipcodes, or validation that requires a database lookup this is not practical. The increase in the initial page load would be unacceptable—not to mention the demands on client RAM.
Remote procedure calls communicate with the server adding data to a page when needed. They are responsive because less data than a full page is transfered between the client and the server and the browser does not have to render the page again. Since most browsers will keep the connection open for a short while, RPCs can be as responsive as a traditional client server application.
What Do We Need to Know
A Web RPC consists of an HTTP request to a server URL, the server procedure, a callback function that waits to process the data returned from the server, and a mechanism that communicates with the server in the background and ties the parts together. To impliment RPCs, an understanding of DHTML, Javascript, and server-sided scripting is needed. You can use any server-side scripting language to generate the return data. This site primarily use PHP, but ASP, JSP and Perl are commonly used.
The Tutorials
One tutorial shows how to perform RPCs using a hidden iframe and the other uses the newer xmlHttpRequest Object. Each tutorial comes with simple, cross-browser friendly client-side code. The combination of the code snippets in the explanation for each method and the code for download at the end of the explanation and examples provides an easily accessible introduction to the techniques. The downloadable code is free for you to use without restriction. There is, however, no guarantee or warrantee with this or any other code on this site. It is free, and you must assume all responsibility for ensuring it works in your project.
Goal
The same high level design is used for both techniques and all examples.
- Design a site that works with traditional techniques to support browsers lacking features for remote scripting.
- Create objects required for the remote scripting when the page loads.
- Attach a function to an event—typically onclick or onsubmit—to setup the RPC when the page loads.
- When the event is triggered, call the RPC.
- Finally, a response handler, callback function, processes and displays the data received from the server.
At this time, there are tutorials for two techniques.
The code has been tested and worked on:
IE5.0, 5.5 and 6.0, Netscape 6.x and 7.x,
Konqueror 3.2.3, Mozilla 1.7.x, FireFox, Opera 7.x, Safari 3.0.3 Windows, Safari 3.0.4 Mac.
None of the methods work with Opera versions prior to 7.x,
and AJAX did not work with Konqueror 3.2.3.
