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,
error, transport, 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
