Differences

This shows you the differences between two versions of the page.

--- examples:example3 [2009/10/26 16:09]
aspectscript
+++ examples:example3 [2009/11/06 16:41] (current)
aspectscript
@@ Line 2: / Line 2: @@
 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.
-The implementation follows:
 <html>
 <link href="/aspectscript/external/aspectscript/paperExamples/style.css" rel="stylesheet" type="text/css"/>
   <script type="text/javascript" language="javascript" src="/aspectscript/external/aspectscript/paperExamples/lib.js"> </script>
    <iframe id="example" src="/aspectscript/external/aspectscript/paperExamples/example3" width="810" height="270"></iframe>
-    <iframe id="code" style="display:none" src="/aspectscript/external/aspectscript/paperExamples/example2-1/script.js" width="810" height="470"></iframe>
+    <iframe id="code" style="display:none" src="/aspectscript/external/aspectscript/paperExamples/example3/script.js" width="810" height="270"></iframe>
-   <a id="button" class="button" onclick="toggle('code','example')"> <span>See the code or example </span></a>
+   <a id="button" class="button" onclick="toggle('code','example')"> <span>Toggle between the code and example </span></a>
 </html>
+\\ 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.
+<code java>
+var msgs = new ReactiveValue( "lastMsgs.php? id =..." , 3000);
+newMessages.innerHTML = msgs;
+</code>