WebFund 2013W: Express and AJAX

In this tutorial you will create an express application based around an AJAX demo page.

The Local Demo

First, download demo-ajax-dom.zip and unzip it. Look at the index.html in it using Firefox. Note how the page attempts to post comments to the originating server in the background but fails (because, of course, there is no server). Compare this page with the jQuery-UI demo from the last tutorial.

Initializing Express

Next, create a new express application called demo-express-ajax. If express is already installed, you just have to run:

 express -c stylus demo-express-ajax

And it will create a new express application in a new directory.

Running Express on Windows (no admin access)

If you need to get express running on your Windows system and you do not have administrative access (i.e., you are in the lab), then do the following:

• Download node-express.zip. This archive has the node executable, npm, and express all included.
• Add this directory to your path. Assuming you downloaded and unzipped node-express.zip on your desktop, then from a command shell:

 set Path=%USERPROFILE%\Desktop\node-express;%Path%

Creating the Application

Next, port demo-ajax-dom.zip to express-ajax-demo following the procedure covered in Lecture 10. Remember this boils down to:

• Copy the static resources (JavaScript libraries, CSS, and hand-coded client side JavaScript) to the public directory.
• Translate the index.html file Jade-encoded views.
• Edit app.js to add the correct routes for the new URLs (particularly those for POSTing).
• Implement the routes in the routes module (directory) for actually implementing the POSTs.

You may want to refer to jquery-ui-express.zip and contrast this with demo-jquery-ui.zip.

Your app should work just like the standalone client demo, except that changes to the page are persistent for as long as the server is running (i.e., just store the data in memory using simple arrays and objects) - and, of course, you shouldn't get errors about posting to the server.

The key insight you should have is that from the server's perspective, an AJAX app is just like any web page, except perhaps that it makes more frequent requests involving smaller amounts of data in each GET and POST.

Good luck!