examples:example3

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
Last revision Both sides next revision
examples:example3 [2009/10/26 16:08]
aspectscript 		examples:example3 [2009/11/06 16:40]
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. 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> <html>
 <link href="/aspectscript/external/aspectscript/paperExamples/style.css" rel="stylesheet" type="text/css"/> <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>   <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="470"></iframe>     + 
-    <iframe id="code" style="display:none" src="/aspectscript/external/aspectscript/paperExamples/example2-1/script.js" width="810" height="470"></iframe> +   <iframe id="example" src="/aspectscript/external/aspectscript/paperExamples/example3" width="810" height="270"></iframe>     
-   <a id="button" class="button" onclick="toggle('code','example')"> <span>See the code or example </span></a>+    <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>Toggle between the code and example </span></a> 
 </html> </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, 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>
 +
  • examples/example3.txt
  • Last modified: 2009/11/06 16:41
  • by aspectscript