The Dojo Javascript Toolkit Ajax Support: System Consultant
The Dojo Javascript Toolkit Ajax Support: System Consultant
Ajax Support
System Consultant
Topics in This Section
Overview of Dojo
Installation and documentation
• Core
Utilities for Ajax, CSS querying, DOM manipulation,
cross-browser event handling, and general JavaScript
programming
7 Very similar to jQuery
• Dijit
• DojoX
Charts, graphs, vector graphics, fancy widgets
Similar to the jQuery Plugins
8
Core Utilities
• dojo.query("css selector")
– Returns a NodeList of matching DOM elements.
• Almost identical to $("css selector") in jQuery.
• dojo.xhrGet({options})
– Makes an Ajax GET request. Also dojo.xhrPost, etc.
• Moderately similar to $.ajax({options}) in jQuery
– Example
• dojo.xhrGet({ url: "address", load: responseHandler });
• dojo.addOnLoad(function)
– Calls function after DOM loaded.
• Almost identical to $(function) jQuery
• dojo.require("dojo.libraryName")
– Loads Dojo libraries on the fly
Downloading and Installation
• Download
– http://download.dojotoolkit.org/
– Choose “Download latest Stable Release”, then
dojo release x.y.z.zip dojo release x.y.z.tar.gzdojo-release-x.y.z.zip or
dojo-release-x.y.z.tar.gz
• Installation
– http://dojotoolkit.org/docs
• Online documentation
Browser Compatibility
• Firefox
• Internet Explorer
– 6.0 or later (same as jQuery)
• Safari
– 3.1 or later (vs. 3.0 for jQuery)
• Opera
• Chrome
– 1.0 or later
– Core: 1.5 or later (vs 2.0 for jQuery)
– Dijit: 2.0 or later (same as jQuery)
– Core: 9.6 or later (vs. 9.0 for jQuery)
– Dijit: not supported!
dojo.query & Selectors
11
Basics
Selecting DOM Elements
• Idea
– Use dojo.query("css selector") to get a set of DOM elements
• Examples
– dojo.query("#some-id")
• Return 1-element set (or empty set) of element with id
• Simplest use and most common for Ajax (note the “#”!)
• Can also use dojo.byId("some-id") to get single element
13 – dojo.query(".blah")
• Return all elements that have class="blah"
– dojo.query("p")
– dojo.query("li b span.blah")
– dojo.query("selector").forEach(function)
• Calls function on each element. “this” set to element.
– dojo.query("selector").addClass("name")
• Adds CSS class name to each. Also removeClass toggleClass
– dojo.query("selector").wipeOut().play()
• Makes invisible. Also wipeIn, fadeOut, fadeIn, etc.
– dojo.query("selector").onclick(function)
• Adds onclick handler. Also onchange, onmouseover, etc.
– dojo.query("selector").html("<tag>some html</tag>") 14
– dojo.byId("some-id").value
• Returns value of input element. Notice no “#”.#.
• Chaining
– dojo.query("a").onclick(f1).addClass("name").forEach(f2)
Example: Randomizing
Background Colors (JavaScript)
dojo.require("dojo.NodeList-fx");
dojo.addOnLoad(function() {
dojo.query("#button1").onclick(randomizeHeadings);
dojo.query("#button2").onclick(revertHeadings);
});
16
Example: Randomizing Colors
(JavaScript Continued)
function randomizeHeadings() {
dojo.query("h3").forEach(setRandomStyle);
dojo.query("h3.green").wipeOut().play();
Slowly hide every h3 that has CSS style “green”.
}
Note difference from jQuery approach: wipeOut
returns an Animation, which you then call play on.
function setRandomStyle(heading) {
dojo.query(heading).addClass(randomStyle());
}
function randomStyle() {
var styles = ["red", "yellow", "green"];
return(randomElement(styles));
}
function randomElement(array) {
var index = Math.floor(Math.random()*array.length);
return(array[index]);
}
17
function revertHeadings() {
dojo.query("h3.green").wipeIn().play();
dojo.query("h3").removeClass("red")
.removeClass("yellow")
.removeClass("green");
}
18
Example: Randomizing Colors
(HTML)
…
<head><title>Dojo Basics</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
<script src="./scripts/dojo/dojo.js"
type="text/javascript"></script>
<script src="./scripts/dojo-basics.js"
type="text/javascript"></script>
</head>
20
Example: Randomizing Colors
…
(HTML Continued)
<h3>Foo, bar,<h3>Foo bar baz</h3>
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<h3>Foo, bar,<h3>Foo bar baz</h3>
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<h3>Foo, b<h3>Fbar, b </h3>baz</h3> The ids to which onclick
handlers were attached.
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<form action="#">#
<input type="button" id="button1"
21
value="Randomize Headings"/>
<input type="button" id="button2"
value="Revert Headings"/>
</form> …
• Instead of this
function randomizeHeadings() {
dojo.query("h3").forEach(setRandomStyle);
dojo.query("h3.green").wipeOut().play();
}
function setRandomStyle(heading) {
23 dojo.query(heading).addClass(randomStyle());
}
function randomizeHeadings() {
dojo.query("h3").addClass(randomStyle());
dojo.query("h3.green").wipeOut().play();
}
dojo.xhrGet: Basic Syntax
• dojo.xhrGet(optionsObject)
25
– Handler function gets response text. Response text is
considered a string unless you use handleAs option.
• url, load
– Almost-always used
26
Data-Centric Ajax with and
without Toolkits
$.ajax({url: "address",
success: handlerFunct});
new Ajax.Request("address",
{onSuccess: handlerFunct});
Ext.Ajax.request({url: "address",
success: handlerFunct});
function showTime1() {
The preventCache option is not required, but is a
dojo.xhrGet({ convenient option when the same URL (including query
data) yields different responses. This way, you don’t
url: "show-time.jsp", have to send Cache-Control and Pragma headers from
server.
load: showAlert,
preventCache: true
});
}
This is the response text, but you can declare a
second argument (ioArgs) if you want the response
object (XmlHttpRequest) and other information. Also
note that the latest Firefox does not let you pass
function showAlert(text) { native functions here, so you cannot use alert instead, y
of showAlert for the success parameter.
alert(text);
}
28
dojo.xhrGet Example Code:
HTML
…
<head><title>Dojo and Ajax</title>Ajax</title>...
<script src="./scripts/dojo/dojo.js"
type="text/javascript"></script>
<script src="./scripts/dojo-ajax.js"src=" /scripts/dojo ajax
js"
type="text/javascript"></script>
</head>
29 <body>...
<fieldset>
<legend>dojo.xhrGet: Basics (Using explicit
onclick handler in HTML)</legend>) /
<form action="#">
<input type="button" value="Show Time"
onclick="showTime1()"/>
</form>
</fieldset>…
30
dojo.xhrGet : Results
Registering Event Handlers in
JavaScript
• Basic approach
– Previous example set the onclick handler in the HTML.
Although this is common with other Ajax libraries, Dojo
(and jQuery) advocate setting it in the JavaScript instead
• Function runs after the DOM is loaded, but does not wait,
for images, as with window.onload
• Use this approach to set up all event handlers
– dojo.query("#some-id").onclick(someHandler);
• Assigns onclick handler. Handler is passed a DOMEvent
• Dojo support
– dojo.addOnLoad(function() {…});
Redoing Time Alert: JavaScript
dojo.addOnLoad(function() {
dojo.query("#time-button-1").onclick(showTime1);
});
function showTime1() {
dojo.xhrGet({
url: "show-time.jsp",
33 load: showAlert, These two functions
are unchanged from
preventCache: true previous example.
});
}
function showAlert(text) {
alert(text);
}
34
Redoing Time Alert: HTML
<fieldset>
<legend>dojo.xhrGet: Basics (Registering onclick handler
in JavaScript)</legend>
<form action="#">
<input type="button" value="Show Time"
id="time-button-1"/>
</form></f>
</fieldset>
Redoing Time Alert: Results
35
dojo.xhrGet
Sending Data
Ajax Functions
• dojo.xhrGet({options})
• dojo.xhrPost({options})
37
– Makes a POST request
• dojo.xhrPut, dojo.xhrDelete
• dojo.rawXhrPost, dojo.rawXhrPut
• Examples
– dojo.xhrGet({… content: { param1: "foo bar!“,
param2: "baz"}});
Content Example: JavaScript
dojo.addOnLoad(function() {
dojo.query("#params-button-1").onclick(showParams1);
…
});
function showAlert(text) {
alert(text);
39 } Same function used in earlier examples.
function showParams1() {
dojo.xhrGet({
url: "show-params.jsp",
content: { param1: "foo",
param2: "bar" },
load: showAlert
});
} The preventCache option is not used since the same
data always results in the same response.
40
Content Example: HTML
…
<fieldset>
<legend>dojo.xhrGet: The 'content' Option</legend>
<form action="#">
<input type="button" value="Show Params"
id="params-button-1"/>
</form>
</fieldset>
…
param1 is ${param.param1},
param2 is ${param param2}
41
42
Content Example: JSP
Overview
• load is not strictly required; you might want to just fire off
some data to the server and not display any thing
• Options apply equally to dojo.xhrPost and others
content Data tD t to send t server, in the form on an object with param namesd toi th fbj t ith EmptyE t
and raw (non-escaped) param values. The object property names
become request param names and property values get URL-
encoded and become request param values. & and = inserted
automatically. Sent in the appropriate place depending ontti ll S t i thi t lddi
whether it is GET or POST.
The format in which to pass the response to the handler function. "text"
handleAs
Legal values are text, json, xml, json-comment-optional, json-
comment-filtered, and javascript.
46
Options (Continued)
url Timeout in milliseconds. If request takes longer, the error handler Infinity
will be called instead of the load handler.
None
The address to req est Sho ld be a relati e URLrequest. Shouldrelative
URL.
Inserting Results into HTML:
The “html” Function
• Prototype
function ajaxResult(address, resultRegion) {
new Ajax.Updater(resultRegion, address);
}
• Dojo
– N explicit support for content-centric Ajax. Response
handler uses “html” to do the insert.
• Ext-JS
function ajaxResult(address, resultRegion) {
Ext.get(resultRegion).load({ url: address});
}
48
Reading Textfield Values
1. Use dojo.byId("some-id").value
– Note that there is no # before the ID, since you are not
doing a CSS match, but rather using a shortcut for
document.getElementById
– Also note that Dojo has no way of looking up values
directly from a NodeList resulting from a Dojo query.
I.e., nothing equivalent to jQuery’s $("#some-id").val().
• Shortcut
– See upcoming section on “form” property
49
50
Ajax with HTML Insertion:
JavaScript (Setup)
dojo.require("dojo.NodeList-html");
dojo.addOnLoad(function() {
dojo.query("#params-button-2")
.onclick(showParams2);
…
});
Ajax with HTML Insertion:
JavaScript (Main Code)
function showParams2() {
dojo.xhrGet({
url: "show-params.jsp",
content: { param1: dojo.byId("field1").value,
param2: dojo byId("field2") value},
load: function(text) {
insertText(text, "#result1");
51 }
});
}
52
HTML Insertion: HTML Page
…
<fieldset>
<legend>dojo.xhrGet: HTML Insertion</legend>
<form action="#">
param1:
<input type="text" id="field1"/>
<br/>
param2:
<input type="text" id="field2"/>
<br/>
<input type="button" value="Show Params"
id="params-button-2"/>
<h2 id="result1"></h2>
</form>/
</fieldset>
…
HTML Insertion: JSP
param1 is ${param.param1},
param2 is ${param param2}.
53
54
HTML Insertion: Comparing
Prototype, jQuery and Dojo
• Prototype
function ajaxResult(address, resultRegion) {
new Ajax.Updater(resultRegion, address); }
• jQuery
55
function ajaxResult(address, resultRegion) {
$(resultRegion).load(address); }
• Advantages
dojo.require("dojo.NodeList-html");
dojo.addOnLoad(function() {
dojo.query("#params-button-3")
.onclick(showParams3);
57});
function showParams3() {
dojo.xhrGet({
url: "show-params.jsp",
form: "form1",
load: function(text) {
insertText(text,”#result2");
}
});
} …
58
“form” Example: HTML
…
<fieldset>
<legend>dojo.xhrGet: Simplifying Params
with 'form'</legend>
<form action="#" id="form1">
param1:
59
<input type="text" name="param1"/>
<br/>
param2:
<input type="text" name="param2"/>
<br/>
<input type="button" value="Show Params"
id="params-button-3"/>
<h2 id="result2"></h2>
</form>
</fieldset> …
60
“form” Example: Results
61
• Server
• Response handler
• function handler(companyExecutives) {
dojo.query("#some-id")
.html("<b>Chief Technology Officer is " +
companyExecutives.cto + "</b>");
}
64
JSON Example Code: Core
JavaScript
dojo.require("dojo.NodeList-html");
dojo.addOnLoad(…);dojo addOnLoad( );
function showNums() {
j({dojo.xhrGet({
url: "show-nums",
handleAs: "json",
load: showNumberList,
preventCache: true
});
}
function showNumberList(jsonData) {
var list = makeList(jsonData.fg, jsonData.bg,
jsonData.fontSize,jsonData fontSize
jsonData.numbers);
int
dojo.query("#result3").html(list);
Array of doubles
}
JSON Example Code: Auxiliary
JavaScript
66
JSON Example Code: Auxiliary
JavaScript (Continued)
function listItems(items) {
var result = "";;
for(var i=0; i<items.length; i++) {
result = result + "<li>" + items[i] + "</li>\n";
}
return(result);
}
function listEndTags() {
return("</ul></div>");
}
JSON Example Code: HTML
…
<fieldset><fi ld t>
<legend>dojo.xhrGet: Treating Response
67
as JSON</legend>
<form action="#">
<input type="button" value="Show Nums"
id nums button />id="nums-button"/>
<div id="result3"></div>
</form>
</fieldset></fi ld t>
…
68
JSON Example Code: Servlet
• Notes
{ fg: "${fg}",
bg: "${b }"b"${bg}",
fontSize: ${fontSize},
numbers: [ ${nums[0]}, ${nums[1]}, ${nums[2]}]{[ ]}, {[ ]},
{[ ]}]
}
69
}
JSON Example: Results
71
Wrap-up
“Best” JavaScript Librariesp
• General JS programming • Traditional Ajax support
– Leader: Prototype – Tie
• Other programming (Java) • Server communication
– Leader (only): GWT – Leader: GWT
• DOM manipulation – 2nd tier: DWR, JSON-RPC
– Leader: jQuery • Usage in industry
• Oth copying jQuery approach andOthersi jQh d – Leader: jQuery
closing gap. jQuery released CSS
– 2nd tier: Ext-JS, Dojo, YUI,
matching library separately
(http://sizzlejs.com) Prototype, Scriptaculous, GWT
• Rich GUIs • Looking ahead
– Leaders: Ext-JS, YUI, Dojo – All these entries are likely to
– 2nd tier: jQuery UI GWTUI, c ge s g cchange significantlyy
• Familiarity to JS developers – Lurking on the horizon:
73 – Lowest: GWT Google “Closure” library
dojo.require("dojo.NodeList-html");
dojo.xhrGet({ … (omit handleAs) … });
function h dl FftihandlerFunction(text) {ti (t t)
dojo.query("#some-id").html(text);
}