|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Remote Scripting with IFRAMEby Eric Costello and Apple Developer Connection
What is Remote Scripting?
Remote Scripting is the process by which a client-side application running in the browser and a server-side application can exchange data without reloading the page. Remote scripting allows you to create complex DHTML interfaces which interact seamlessly with your server.
Remote scripting is a form of RPC (Remote Procedure Call), which is a general term used to describe the exchange of data between remote computer systems. Remote scripting opens up a great number of opportunities for the developer. Imagine a news article that can load side bars and graphical information related to the article directly into the web page when the site's visitors request it. Imagine a gallery of photo thumbnails that turn into full-sized images when clicked. Imagine a full-featured, browser-based content management system interface that allows a site administrator to edit web site copy in situ. The possibilities are limited only by the creativity of the developer.
Setting up Remote Scripting
The client-side component is a part of the web page that you want to enable with remote scripting capabilities. It needs to be able to make a call back to the server, usually done via HTTP, and to then be able to receive and deal with the server response, if any. The server component must be ready to receive requests from the client, process the request, and then respond, returning data to the client if needed. The server component can be a script served up by your web server, such as a .php, .asp, or .cgi file, or it can be a dedicated software package that handles only RPC calls, or it can even be a simple database comprised of static files.
As you can see, the requirements for each of these components will vary greatly depending on how you choose to implement your remote scripting system.
Remote Scripting Technology Options
Remote scripting is actually a fairly broad term, and does not necessarily imply the use of any particular technology. Several remote scripting options are available to the web developer:
XML-RPC is in many ways the superior choice for remote scripting. It uses XML for encapsulating data, HTTP for its transport mechanism, and can be implemented in a wide variety of platform and software environments. XML-RPS is an open, standards-based technology that is quickly becoming the de-facto method for RPC of all kinds. The down side is that it takes a bit more know-how and work to get it up and running, requiring the installation of XML-RPC libraries on your server and in your client-side code. It also does not work with IE5 on the Macintosh.
Simple HTTP via a hidden IFRAME Using an IFRAME in conjunction with a script on your web server or a database of static HTML files, is by far the easiest of the remote scripting options available. The IFRAME has been part of the HTML specification since version 4 and is supported in nearly all modern browsers. On the server, you can use your scripting language of choice to process page requests made to the IFRAME. In the remainder of this article you'll see how to implement these components.
Using an IFRAME for Remote Scripting
Enough already with the talk! Let's get to the code. I'm going to show you everything you need to know to set up a remote scripting system with an IFRAME. I'll start with the basic set up, and describe some common browser problems and their solutions.
For starters, you'll need two web pages. The
first should be called
As you can see, in it's simplest form IFRAME
remote scripting simply points the
And change the
You should now get an alert message containing information returned from your server, the results of your first remote procedure call!
Should you want to pass data to
Just like the link, you specify the IFRAME
as the target of your form, use
Problems and Solutions
You may have already realized that there are some
serious problems with this simplest of remote scripting scenarios.
Perhaps most seriously, this method renders the "back" and "reload"
buttons in most browsers useless. Because the loading of
NOTE: You may or not experience this problem, depending on a combination of factors including your browser version, server platform, HTTP headers, and browser settings. Trust me, if you simply target a link at an IFRAME, some users will have problems with their reload and back buttons.
A new function called
Sadly, referencing the IFRAME's
With that function added to
<a onclick="return callToServer();" href="blank.html">make RPC call</a>
You can see this more complete code in action here.
Using a Form to Pass Data to the Server
Now that you've got the basic
framework in place, it would be nice to add a form to send data to
the server and receive back a useful response. You can't simply
target the IFRAME with a form anymore, as you've learned, and you
are limited to passing data to
Next, create a form like so:
Now we have a form that, when submitted,
sends its data to the server through a hidden IFRAME. Your server
can act on that data however you wish, interacting with client.html
Looking at the code, you'll see that I
A Final Example
To help you see the possibilities that Remote Scripting affords you the developer, I've worked up one final example that loads data from a database of static HTML files. You can view that example here.
That should give you a taste for what can be
done with RPC. Once you start playing around with it on your server,
you'll really get a feel for the power in your hands. Try making
calls to your server to retrieve data from a database, passing the
data back to your client page with a call to the
Further Reading and Outside Resources
If you'd like to explore Remote Scripting further, let me recommend these sites to you:
Eric Costello is a contract developer for hire, working out of his mysterious company Schwa. He maintains a personal site at glish.com, where he links to articles on Web standards, DHTML, CSS, XML, and other topics of interest to web developers.