Giving Life to Javascript Values

In Facebook, user pages are updated with the last messages from friends without the need to reload the page. To achieve this, Facebook uses Ajax: a set of Web development techniques for asynchronous client-to-server communication. However, when page elements (e.g. the last messages) depend on Ajax responses, they must be updated after every communication with the server to show up-to-date information. The complexity of Ajax updates can be alleviated by introducing basic support for reactive values: when a value originating from an Ajax response changes, all page elements depending on it are updated accordingly. Using AspectScript, we introduce a library for basic reactive values.

Toggle between the code and example

In the previous window, the number of messages is updated every 3 seconds. The following piece of code achieves the required behavior. Using the small library for reactive values, it is possible to create a ReactiveValue object, which is assigned to a HTML element in this case.

var msgs = new ReactiveValue( "lastMsgs.php? id =..." , 3000);
newMessages.innerHTML = msgs;