How to use AJAX with node.js

Question

I am relatively new to server side programming, however I am building a framework in order to learn and as end outcome deliver it to the public after it is finished.

I want some parts of the web platform to be able to update only parts of the page on requests, however I do not know anything about AJAX yet.

It would be great if someone could suggest a sort of learning curve to what I am aiming for. Kinda SoundCloud like website, with the ability to update only those parts of the DOM which are requested.

Answer 1

Note: I'm kind of new at this as well, so a grain of salt is advised. I detail a technique that is working for me, but I make no guarantees that it is The Best Way!

AJAX is on the client side and is achieved through either standard javascript (a pain which I wouldn't recommend in most cases) or through a library like jQuery. There are a plethora of tutorials on using jQuery for ajax calls, but the gist is that you are requesting some resource on your server that, when it arrives, calls a callback which does something with the data (this behavior is asynchronous, just as node.js tends to be).

If you have no experience using AJAX for the client, I suggest you start off with a framework like Express, before rolling your own (this also gets into reinventing the wheel). An AJAX call is no different than a standard HTTP request: it can be POST, GET, etc.

You then get into the concept of routing: given a request for some information (AJAX or not!), what should I do and what should I return? A framework does the behind-the-scenes stuff for you, so that all you need to do is specify the resource to be requested, the method in which it is requested, and then the callback which does the server-side processing which returns some data. This data can be a web page, it can be a JSON object, and so on. The key point is that you want to structure it in a way that makes sense for the AJAX call.

Here is a simple example: say I have a web page that will display a bunch of information relevant to the server, such as uptime, load, memory usage, and so forth. First, I write the basic HTML page (say, index.html ) that structures this data, and I begin to write a script that makes an AJAX call for this information. I decide that the request (say, /json/stats ) will receive a JSON response. On the server-side, I whip up a simple Express script which starts the server and has two routes: the first route will take any request for my / page and serve the index.html . The second route will take any request for /json/stats and make a few calls to figure out the state of the server, construct an object holding this data, and return it as a response. Now, back in the script for my HTML page, I can act on the structure of this object through jQuery in order to build the page.

If you'd like to see some code for this, you can view it here . I suggest looking into the REST architecture (of which this code adheres to) as to gain more conceptual understanding of this topic.