Before you start

Learn what to expect from this tutorial, and how to get the most out of it.

About this tutorial

With the AJAX techniques in this tutorial, you will give users the power to add stickies to your Web site. Users can add these stickies to any Web page with a bookmarklet created just for your site. You don't have to use any particular technology generating your site, and you don't have to change your existing pages. The only additional, required configuration is a back-end Perl script that stores the annotations.

AJAX techniques can be complex and involve a combination of HTML, JavaScript code, and server-side code -- in other words, every kind of basic Web technology. This tutorial touches on the role of each of these technologies and demonstrates techniques that make this kind of programming easy and reliable.

You'll cover the steps to set up the Stickies system. You'll also gain insight into AJAX's structure and how it integrates with traditional Web page technology.

Back to top

Objectives

In this tutorial, you learn how to create a Stickies application in the JavaScript programming language, including how to create a bookmarklet that invokes the system and install a back end to store the data.

In particular, this tutorial covers the following topics:

• Create and load the stand-alone JavaScript code for the Stickies system
• Run the JavaScript code from a bookmarklet
• Bootstrap the code for the Stickies system
• Create the Stickies code
• Interact with the Document Object Model (DOM) for your Web pages
• Make stickies that can be edited
• Create a class that allows stickies to interact with your server
• Save and load stickies data

The best way to use this tutorial is to read through it, and then download and install the source code (see Download). You can modify the source to try new things, or use parts of it in your own programs.

Back to top

Prerequisites

To use this tutorial, you should have a basic familiarity with JavaScript code and DOM. Although the end is written in Perl, its implementation isn't the focus of the tutorial, so knowledge of Perl isn't required.

Back to top

System requirements

You'll need the following:

• A Web server that can run any kind of Web site, and that can run a simple Common Gateway Interface (CGI) script written in Perl. This server can be the same one as the content Web server, or a different server entirely.
• The stickies require JavaScript to run. JavaScript is, as always, a moving target, so I cannot guarantee that the code in this tutorial will run in any browser. That said, I know the code works in recent versions Firefox and Mozilla.
• The source code for the Stickies system, which is in the stickies-src.zip file under Download.

Back to top

Configuring Firefox to use the sample code

Firefox by default will not allow cross-domain XMLHttp requests. To get the sample code to work with the Firefox (Windows) client and the Apache (Linux) server, you need to:

1. Change a setting in about:config from false to true:

   signed.applets.codebase_principal_support

   
   
2. In your JavaScript code, request the right to bypass security. Add this code to the top of the xmlRequest function:

   try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } catch (e) { alert("Permission UniversalBrowserRead denied."); }

   
   
3. Finally, of course, set up Apache to allow the execution of the persistence.cgi script. (See Resources for information about the ExecCGI options flag in the Apache documentation and on how to use about:config to configure Firefox to use the Stickies software.)

Acknowledgement: Thanks to reader Lars Kermode who provided the above information on using Stickies software in Firefox.

1 of 15 | Next

Comments

Back to top

Table of contents

• Before you start
• What is AJAX?
• Create and run the stand-alone JavaScript code
• Working with bookmarklets
• Overview of the Stickies system
• Bootstrapping the Stickies code
• The Sticky class
• Interacting with the DOM tree
• Editable text nodes
• Server interaction
• Server-side storage
• Summary
• Download
• Resources
• About the author

---

1 of 15 | Next

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

Dig deeper into Web development on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.