Chapter 6 DOJO TOOLKITS

Objectives Discuss XML DOM Discuss JSON Discuss Ajax Response in XML, HTML, JSON, and Other Data Type

OVERVIEW There are many libraries/frameworks that help Ajax Web development and abstract browser differences. The well known programs include JavaScript based Dojo Toolkit, Prototype framework, and Dynamic Web Remoting (DWR) framework, Yahoo UI Library(YUI), and Java based Google Web Toolkit (GWT).Yahoo UI LibraryGoogle Web Toolkit (GWT) Dojo is a popular Open Source, portable DHTML JavaScript toolkit that makes it easier for an Ajax developer to build Ajax requests. Why is Dojo called a toolkit? Dojo not only has a rich collection of libraries for JavaScript and Ajax Web development, but also provides an extensive, reusable, and customizable widget system supporting user defined widgets, an enhanced event handling system, and an io system which simplifies very complicated data transfers between client and server.

Dojo is a cross-browser oriented tool which supports various Web browsers, such as IE, Firefox, and Safari. It also solves Ajax browser incompatibility problems in ordinary JavaScript. Dojo has a set of powerful JavaScript libraries organized in packages. Dojo 0.4 used to have a layered structure library hierarchy to organize all Dojo functionality in packages. Dojo 0.9 and later versions (currently 1.0) simplify the structure where most Dojo functions (Dojo widgets, events, io and others) are available in Dojo core base packages; dijit and dojox (Extended Dojo project) are sitting on top of Dojo core.

Dojo advantages It wraps XMLHttpRequest and makes the request construction and configuration much easier. It frees developers from detailed configuration of Ajax XMLHttpRequest, and from parsing and processing the responses back from the server. Its widget system is available in Dojo core and Dijit namespace packages.

Ajax XML HttpRequest with Dojo A Hello world Dojo Ajax example: The file “data.txt” has a text statement “Welcome to Dojo Ajax!”. This Web application just downloads the content of this text file, places it in the HTML “div” tag “put_here” placeholder, and displays it. Assume the dojo core package dojo.js library is installed in the dojo directory in the root directory under webapps in a Web server such as Apache Tomcat. If you browse this page, the “Welcome to Dojo Ajax” will be displayed in the HTML page.

Here is the HTML file with a xhrGet Ajax request. Dojo Ajax function welcome() { dojo.xhrGet( { url: "data.txt", // The load function is called on successful response from server // It inserts the response to the HTML div “ put_here ” placeholder load: function(response, ioArgs) { dojo.byId("put_here").innerHTML = response; return response; },

Contd…. // The error function displays error message if server does not // respond right error: function(response, ioArgs) {console.error("HTTP status code: ", ioArgs.xhr.status); return response;} }); } //Invoke the welcome function when dojo starts up dojo.addOnLoad(welcome);

Three dojo methods are used: The dojo.htrGet() is a request method provided in dojo core package which facilitates XMLHttpRequest with GET request method type. Dojo.htrPost is another request type method to makes an XMLHttpRequest. List of Dojo supported XMLHttpRequest functions, they all take a property object(po) parameter. dojo.xhrGet(po) dojo.xhrPost(po) dojo.rawXhrPost(po) dojo.xhrPut(po) dojo.rawXhrPut(po) dojo.xhrDelete(po )

The XMLHttpRequest takes many argument properties. You can pass in a Javascript object, which wraps all necessary properties to the xhrget request as shown in the example. The list of common request property arguments: url: String type, "/path/to/myServer.php". URL points to server endpoint. content: Object type, {name: "value"}. These properties will be serialized as name1=value2 and passed in the request. timeout: numeric type; it wait x milliseconds for the response. If this time passes, then the error callback method is invoked. form: dojo.byId("formId"); it extracts form content and sends it to server. handleAs: String type; "text" is default, it can be "json", "javascript", "xml", etc.

sync: Boolean type, default is false. It indicates whether the request should be synchronous (blocking) or asynchronous. headers: Object type specified in {} format. It is used to send additional HTTP headers in the request. load: function(response, ioArgs){}. The load function will be called on a successful response. error: function(response, ioArgs){}. The error function will be called in an error case. handle: function(response, ioArgs){}. The handle function will be called in either the successful or error case.

Example One uses Dojo xhrGet function to get data from the server and partially update the DHTML page without refreshing the whole page, just like all Ajax requests do. The other uses Dojo xhrPost method to post the DHTML form data to the server and receives responses back from the server to partiall update the client page. The next example shows a Dojo xhrPost Ajax request in the following HTML file. The request is sent to a JSP called response.jsp, which will respond to the Ajax xhrPost form request with a provided user name, and say “Hello ”.

Hello User function onclick() { var cl= { // The page that parses the POST request url: "response.jsp", // Name of the Form you want to submit form: 'myForm', // Loads this function if everything went ok load: function (message) { mdiv = dojo.byId("Message"); mdiv.innerHTML = "<div style=\"color:green\">"+message+" "; },

// Call this function if an error happened error: function (error) { console.error ('Error: ', error); } }; dojo.xhrPost(cl); } Example of using xhrpost Enter Name: <input type='text' length="20" name='myName' onkeyup='onclick();'/>

Response.jsp <% String name = request.getParameter("myName"); if (name != null && !name.trim().equals("")) { out.print("Hello " + name + "!"); } else { out.print("You didn't enter a name!"); } %>

Dojo xhrGet request with JSON data JSON data can be easily handled in the Dojo xhrGet() Ajax request. Dojo greatly frees web developers from doing complicated Ajax request configuration and coding, such as parsing and converting the JSON data into a JavaScript object. You just need to specify that the response is handled in JSON format.

Assume the ajaxData.txt file on the server has JSON syntax data as { "Name": "Bill Jones", "Education": { "Undergraduate": "Physics", "Graduate": "CS" }, "Skills": [“Ajax”, “Ruby”] } The following Ajax request retrieves a JSON object and puts parsed information into the with an id of 'json-data'. The XHRGET function takes JSON format argument, which includes server url, data format handleAs, and a load function (called back when response comes back successfully).

Dojo xhrGet <script src='/dojo/dojo/dojo.js' type='text/javascript'> function getJson () { dojo.xhrGet ({ url: " handleAs: 'json', // 'handleAs': ‘JSON’ tells Dojo to parse the data being // retrieved from the URL by eval() function and convert it to a //JavaScript JSON object.

load: function (responseObject) { dojo.byId('json-data').innerHTML = responseobject.skills[0]; }, error: function (error) { console.error('Error: ', error); } }); } Display JSON data

Summary The Dojo toolkit is a very useful and widely used development tool for Ajax and other Web development. It greatly simplifies the JavaScript coding by way of the Dojo supported package library. Specifically, it is much easier to construct an Ajax XMLHttpRequest with Dojo than to use JavaScript. Dojo supports a powerful widget system that lets developers design their own widgets without worrying about browser incompatibility problems.

The JSON standard for transferring data between Web clients and servers is widely accepted by almost all software programming language and script languages. It reduces the parsing complexity of XML formatted data. People who are not familiar with XML DOM API can still easily construct and parse JSON data.