AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1207&pId=-1
Dojo AJAX with JSON
page
by Jayaram Krishnaswamy
Feedback
Average Rating: 
Views (Total / Last 10 Days): 32024/ 40

Introduction

The DOJO toolkit is an extension of JavaScript being developed by the dojo foundation. The present release version is 0.4.1 and it is still very much in development. Notwithstanding, it has a lot of promise in delivering AJAX enabled rich internet applications. It has been used in several production sites as well.

This tutorial is about using the dojo tool kit to send a request to server and receive a JSON text using the dojo.io.bind (). The default transport for the request is the XMLHTTP. The retrieved JSON is parsed to display the hierarchy in the JSON Object.

There is a lot of background to be covered, but the reader is directed to the web based resources that describe many of these topics. These sources include the dojo foundation web site; the blogs by the key developers at that site and the JSON site at JSON.org. A new DOJO Application Programming Interface (API) is also in the works.

About AJAX

AJAX, although not a new technology, has ushered in an era of great activity in the web. Its freedom from being tied to any vendor, relative ease of use, increased user satisfaction contributes for its usage and popularity. Have a look at this tutorial at the W3C site to get an idea about how AJAX works. Successful web sites such as Google, Yahoo, eBay and others have made it all the more popular with their applications too numerous to list.

Ajax is tied in with RIA where the client is not a dummy, but an active participant. Dojo tool kit can be used to retrieve XML formatted information from a server. However other forms of formatting are also allowed such as HTML, JSON, and TEXT etc.

AJAX with Dojo Toolkit

Making an AJAX call using the Dojo Toolkit would require you to provide reference to the io (input/output) folder on the dojo tool kit source. The method dojo.io.bind () can be found in the common.js file in the /src/io folder. The following quoted information is taken from the common.js script file:

"
dojo.io.bind = function (/*Object*/ request){
      // summary:
      //          Binding interface for IO. Loading different IO transports, like
      //          dojo.io.BrowserIO or dojo.io.IframeIO will register with bind
      //          to handle particular types of bind calls.
      //          request:
      //          Object containing bind arguments. This object is converted to
      //          a dojo.io.Request object, and that request object is the return
      //          value for this method.
      If (!(request instanceof dojo.io.Request)){
            try {
                  request = new dojo.io.Request (request);
            } catch (e) { dojo.debug (e); }
      }
 
"

Files used in this tutorial

The JSON Text is located in the root directory of the IIS server as shown in Figure 1 and contains the following information.

Figure 1

Listing 1 - This is the listing of the file JSONWebStudents.txt.

{"wclass":
  [{"student":{"id":"1"},"name":"Linda Jones", "legacySkill":"Access, VB 5.0"},
  {"student":{"id":"2"},"name":"Adam Davidson", "legacySkill":"Cobol, MainFrame"},
  {"student":{"id":"3"},"name":"Charles Boyer", "legacySkill":"HTML, XML"}]
}

The JSON object shown in Listing 1 above is a nested object and was derived by inspection from the webstudents.xml file shown in Listing 2 which is used in several others of my tutorials as well. The XML is also nested and the parsing of this using XMLDom has been described in the earlier tutorials. Of course you would require other tools to convert dynamically created data to JSON.

Listing 2 - This is the listing of the webstudents.xml.  

<wclass>
 <student id="1">
  <name>Linda Jones</name> 
  <legacySkill>Access, VB5.0</legacySkill>
  </student>
  <student id="2">
  <name>Adam Davidson</name> 
  <legacySkill>Cobol, MainFrame</legacySkill>
  </student>
  <student id="3">
  <name>Charles Boyer</name> 
    <legacySkill>HTML, Photoshop</legacySkill>
  </student>
  </wclass> 

Using Dojo Toolkit with IIS 5.1

The toolkit version dojo-0.4.0-ajax was downloaded from the dojo toolkit web site. The less than 4.5 MB directory contains the components shown in Figure 2.

Figure 2

A virtual directory named DoAjax was created on the IIS 5.1 and the zip file was extracted to the local source for the virtual directory. This way the src attribute was set to the URL of the localhost as we shall see later.

Figure 3 shows the DojoAjax folder on the web server.

Figure 3

The above figure also shows the io folder which is a sub folder of the src. Readers who are new to Dojo may test and verify the example code in the tests and demos folders.

An example of using dojo.io.bind ()

The following listing shows the syntax for using dojo.io.bind (). The bind () in the dojo.io package can be used for XMLHTTP as well as other transport methods (IFrame I/o, ScriptSrc I/O ) which can make generic asynchronous calls. XMLHTTP cannot be however used for file transfers. The three arguments in the listing for dojo.io.bind () are separated by commas and the mimetype is text/Plain. The code listing is adapted from the code on the dojo related site to bring in the data in the text file sitting on the local server. The data is the retrieved result from the URL. There are many other arguments that can be passed such as handler, content, errortransport, etc.   If you want to use it while submitting a form you can make use of the argument, formNode.

In the present example shown in the next listing, the text file dojo.txt on the server which has just one line of text, "Testing" will be accessed. The alert (data) would show an alert window displaying "Testing". During development it is advisable to use the first script (isDebug: true) in Listing 3.

Listing 3 - Example code to retrieve the test using dojo.io.bind ().

<HTML> 
<HEAD> 
<TITLE> </TITLE> 
<script type="text/javascript">
    var djConfig = {isDebug: true};
</script>
<script type="text/javascript" src="http://localhost/DoAjax/dojo.js"></script>
<script type="text/javascript">
dojo.io.bind ( 
 { 
   url: "http://localhost/DojoAjax/dojo.txt", 
   load: function (type, data, evt) {alert (data) }, 
   mimetype: "text/plain" 
 } 
); 
</script>
</HEAD> 
<BODY> 
</BODY> 
</HTML> 

In the load argument you can also call external functions as well, for example if the following

   load: function (type, data, evt) {alert (data),

                  alert ("Copy:" + data), test () }, snippet were to replace, load: function (type, data.evt){alert(data)}, in Listing 3, where test () is a function outside the scope of io.bind (). The page with the above would display two alerts and execute whatever else in the function test ().

Example of Ajax with DOJO retrieving JSON

The JSON text is retrieved from the server passing the URL as one of the arguments in doj.io.bind () as shown in Listing 4. The URL is a reference to the JSON text on the server whose listing was shown earlier (Listing 1). The alert box should display the contents of the retrieved result.

Listing 4 - Retrieving JSON object from the server using dojo .io. bind ().

<HTML> 
<HEAD> 
<TITLE> </TITLE> 
<script type="text/javascript">
    var djConfig = {isDebug: true};
</script>
<script type="text/javascript" 
src="http://localhost/DoAjax/dojo.js">
</script>
<script type="text/javascript">
dojo.io.bind ( 
 { 
   url: "http://localhost/<span class=Bold>JSONWebStudents.txt</span>", 
   load: function (type, data, evt) {alert (data)},
   mimetype: "text/html" 
 } 
); 
</script>
</HEAD> 
<BODY> 
</BODY> 
</HTML> 

The result of browsing this file on the intranet site displays the alert box shown in Figure 4.

Figure 4

Formatting displayed results to the browser

In the previous example the data was displayed in an alert window, however, one may need to see the data written to the browser. In order to do this, create external elements, ideally <div/> or <span/> elements and assign the returned data from your AJAX call to these elements by properly referring to their dojo id's as shown in Listing 5. Notice that the syntax for referring to the object Id is different from the ECMA syntax. The transport by default is XMLHTTP and the mimetype can be text/plain, text/JSON, text /HTML. All of them return the same data which in this case is text. The mimetype is more important for the response than for the request.

Listing 5 - Code used for displaying the data using the innerHTML property.

<HTML> 
<HEAD> 
<TITLE> </TITLE> 
<script type="text/javascript">
    var djConfig = {isDebug: true};
</script>
<script type="text/javascript" 
 src="http://localhost/DoAjax/dojo.js">
</script>
 
<SCRIPT LANGUAGE="JavaScript">
 
var AjaxReturn = null;
var bindArgs = {
   url:  "http://localhost/JSONWebStudents.txt",
   mimetype: "text/JSON",
   load: function (type, data, evt) {
            AjaxReturn = data;
            dojo.byId ('x').innerHTML = data;
                                     }
              };
dojo.io.bind (bindArgs);
</SCRIPT>
</HEAD> 
<BODY> 
<h4><font color="blue">Data returned from AJAX call</font></h4>
<div id="x"></div>
</BODY> 
</HTML> 

The <body/> contains a <div/> element with the id ("x") which will be populated with the data returned.

Figure 5 shows the result of this code when browsed on the intranet site.

Figure 5

 

Digging into the result

You may also need to unpack the data (look into details of the data) returned by AJAX. It is important to realize that the data returned is JSON Text. Before dissecting the object into its component parts it must first be converted to a JSON object. Listing 6 shows how you unravel and display it on the browser. I direct the user to review my earlier tutorial on JSON Basics.

Listing 6 - Code used for displaying retrieved data using the dot notation.

<HTML> 
<HEAD> 
<TITLE> </TITLE> 
<script type="text/javascript">
    var djConfig = {isDebug: true};
</script>
<script type="text/javascript" 
src="http://localhost/DoAjax/dojo.js"></script>
 
<SCRIPT LANGUAGE="JavaScript">
 
var AjaxReturn = null;
 
var bindArgs = {
      url:  "http://localhost/JSONWebStudents.txt",
      type: "text/Javascript",
      load: function (type, data, evt){
      AjaxReturn = data;
         dojo.byId ('x').innerHTML = data;
      //next line finds the number of characters in the data
         alert (data.length);
       //next line converts JSON Text to JSON Object, not safe  in general for security reasons 
       //OK for now
         var jObj=eval ('('+data+')');
     //next line should say that the conversion was OK
         alert (jObj);
     //next two lines get the innards of wclass
         dojo.byId ('y').innerHTML=jObj.wclass [0].student.id;
         dojo.byId ('z').innerHTML=jObj.wclass [1].name;
            }
};
dojo.io.bind (bindArgs);
 
</SCRIPT>
</HEAD> 
<BODY> 
<h4>This is json text</h4>
<div id="x"></div>
<h4>This is student skill</h4>
<div id="y"></div>
<h4>This is skill of student whose id=2</h4>
<div id="z"></div>
</BODY> 
</HTML> 

The details in the object can be accessed using the dot notation as shown in the above code knowing the structure of the object. The result of the above code is to shown in Figure 6.

Figure 6

 

References
Summary

The tutorial has shown in detail how to access a document on the intranet which adheres to JavaScript Object Notation making an AJAX call built into the dojo tool kit (version 0.4.1, a new 0.4.2 has been released recently). With certain advantages that JSON enjoys over XML, usage of JSON has been leveraged by Yahoo and other sites. In the interest of completeness which many first time users are sure to appreciate, what may appear to be repetition of code in the listings is intentional. Each listing can be separately tested. It is shown that with dot notation the details of the JSON object can be accessed; however for this, one needs to know a priori the structure of the JSON object. This perhaps is a disadvantage compared to using XML which is self-descriptive unlike JSON. The Dojo Toolkit also provides what is called a filtering table, a much better suited GUI for display which can be scripted to filter and sort data. Trying to fill this table with the retrieved result is not straight forward when the object is nested as in this case.



©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 5:23:44 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search