UserPreferences

AjaxProgramming

  1. Ways to see the difference between AJAX and non-AJAX apps
  2. Different AJAX libraries
  3. YUI
  4. How to learn YUI
  5. Good references
    1. on Safari

Roughly speaking, AJAX is aimed at making web apps more like desktop apps. What do we mean by this?

Ways to see the difference between AJAX and non-AJAX apps

Different AJAX libraries

YUI

<html>
<head>
<script src = "../yui/treeview/examples/js/YAHOO.js" ></script>
<script src = "../yui/treeview/examples/js/treeview.js" ></script> 
<link rel="stylesheet" type="text/css" href="../yui/treeview/examples/css/screen.css">
<link rel="stylesheet" type="text/css" href="../yui/treeview/examples/css/default/tree.css">
</head>
<body onload="treeInit()">
<div id='treeDiv1'></div>
<script>
//var outline = eval({"text":"testing", "o":[{"text":"say \"hi\".  I\'m here."}, {"text":"json"}]});
var outline = eval({"text":"YUI", "o":[{"text":"documentation and background", "o":[{"text":"[http://developer.yahoo.net/yui/#download Yahoo! UI Library]"}, "text":"[http://simon.incutio.com/archive/2006/02/14/ui Simon Willison: Yahoo! UI JavaScript treats]"}, {"text":"file:///d:/document/lib/yui/"}, {"text":"[http://yuiblog.com/blog/?s=dojo Yahoo! User Interface Blog]"}]}, {"text":"alt ernatives to YUI", "o":[{"text":"[http://dojotoolkit.org/ Dojo - DojoToolkit.org]"}, {"text":"[http://script.aculo.us/ script.aculo.us - web 2.0 javascript]"}]}, {"text":"programming exercise", "o":[{"text":"making an outline with the treeview and JSON"}, {"text":"user", "o":[{"text":"latest photos"}, {"text":"popular tag"}]}, {"text":"e.g.,", "o":[{"text":"D:\\Document\\Interactive_University\\Docs\\2006\\01\\outline_embedding_1\\index.html"}]}]}]});
var tree

function OutlineToTree (a, parent) {
//  make an outline represented by a and attach it to the parent


    var label = a.text;
    //var url = a[1];

    var node = new YAHOO.widget.TextNode(label, parent, false);
    //var node = new YAHOO.widget.HTMLNode(label, parent, false,true);

    if (a.o) {
        for(var i = 0; i < a.o.length; i++) {
            OutlineToTree(a.o[i],node);
        }
    }

}


function treeInit() {
   tree = new YAHOO.widget.TreeView("treeDiv1");
   var root = tree.getRoot();
   OutlineToTree(outline, root);
   tree.draw();
   //var tmpNode3 = new YAHOO.widget.HTMLNode("<a href='http://sims.berkeley.edu'>I School</a>",tmpNode,false,true);
}
</script>
</body>
</html>

How to learn YUI

Good references

on Safari

ajax tutorials and frameworks: