Soma at 20:02, 8 February 2013

2013-02-08T20:02:58Z

← Older revision		Revision as of 20:02, 8 February 2013
Line 1:		Line 1:
	In this tutorial you will create an express application based around an AJAX demo page.		In this tutorial you will create an express application based around an AJAX demo page.

			==The Local Demo==

	First, download [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom.zip 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 [[WebFund_2013W:_jQuery_UI\|the last tutorial]].		First, download [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom.zip 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 [[WebFund_2013W:_jQuery_UI\|the last tutorial]].

			==Initializing Express==

	Next, create a new express application called <tt>demo-express-ajax</tt>. If express is already installed, you just have to run:		Next, create a new express application called <tt>demo-express-ajax</tt>. If express is already installed, you just have to run:
Line 8:		Line 12:

	And it will create a new express application in a new directory.		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:		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:
Line 13:		Line 19:
	* Add this directory to your path. Assuming you downloaded and unzipped <tt>node-express.zip</tt> on your desktop, then from a command shell:		* Add this directory to your path. Assuming you downloaded and unzipped <tt>node-express.zip</tt> on your desktop, then from a command shell:
	set Path=%USERPROFILE%\Desktop\node-express;%Path%		set Path=%USERPROFILE%\Desktop\node-express;%Path%

			==Creating the Application==

	Next, port [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom.zip demo-ajax-dom.zip] to <tt>express-ajax-demo</tt> following the procedure covered in [[WebFund_2013W_Lecture_10\|Lecture 10]]. Remember this boils down to:		Next, port [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom.zip demo-ajax-dom.zip] to <tt>express-ajax-demo</tt> following the procedure covered in [[WebFund_2013W_Lecture_10\|Lecture 10]]. Remember this boils down to:

Soma: Created page with "In this tutorial you will create an express application based around an AJAX demo page. First, download [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom...."

2013-02-08T17:57:03Z

Created page with "In this tutorial you will create an express application based around an AJAX demo page. First, download [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom...."

New page

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

First, download [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom.zip 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 [[WebFund_2013W:_jQuery_UI|the last tutorial]].

Next, create a new express application called <tt>demo-express-ajax</tt>. 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.

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 [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/node-express.zip 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 <tt>node-express.zip</tt> on your desktop, then from a command shell:
set Path=%USERPROFILE%\Desktop\node-express;%Path%

Next, port [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom.zip demo-ajax-dom.zip] to <tt>express-ajax-demo</tt> following the procedure covered in [[WebFund_2013W_Lecture_10|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 <tt>index.html</tt> file Jade-encoded views.
* Edit <tt>app.js</tt> 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 [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/jquery-ui-express.zip jquery-ui-express.zip] and contrast this with [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-jquery-ui.zip 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!

WebFund 2013W: Express and AJAX - Revision history

Soma at 20:02, 8 February 2013

Soma: Created page with "In this tutorial you will create an express application based around an AJAX demo page. First, download [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-ajax-dom...."