In this monthly column, an industry expert will answer common questions about VoiceXML and related technologies. Readers are encouraged to submit questions about VoiceXML, including development, voice-user interface design, and speech technology in general, or how VoiceXML is being used commercially in the marketplace. If you have a question about VoiceXML, e-mail it to and be sure to read future issues of VoiceXML Review for the answer.
Q: AJAX has rapidly changed how developers look at web UIs. Are any of the AJAX advantages possible in VoiceXML?
A: Yes! AJAX is incredibly powerful because it allows you to build seamless user interfaces that dynamically pull in XML data. This development paradigmn is great for VoiceXML because you really want to make your VoiceXML and Javascript super-fast to load and only fetch that dynamic data when you need it. (For those not familiar with AJAX, check out Ajax: A New Approach to Web Applications.)
Instead of XMLHttpRequest, VoiceXML 2.1 makes this functionality a first-class citizen through the element. Now, the isn't really asynchronous, but that doesn't really restrict you from using it to dynamically pull in that XML data.
Let's walk through an example that uses AJAX to list your RSS feed in your web page and your VoiceXML. (For an even more detailed treatment of the voice side, see the April 2004 column.) For this example, I'm testing with a slightly simplified example from the Harvard Law RSS site. Notice that I've added an access-control processing instruction to allow browsers which use this processing instruction for access authorization (see W3C Note: Authorizing Read Access to XML Content Using the Processing Instruction 1.0.)
Liftoff News http://liftoff.msfc.nasa.gov/ Liftoff to Space Exploration.
Star City
http://liftoff.msfc.nasa.gov/news/2003/news-starcity.asp
How do Americans get ready to work with Russians aboard the International
Space Station? They take a crash course in culture, languange and protocol
at Russia's Star City.
http://liftoff.msfc.nasa.gov/2003/06/03.html#item573
The Engine That Does More
http://liftoff.msfc.nasa.gov/news/2003/news-VASIMR.asp
Before man travels to Mars, NASA hopes to design new engines that will
let us fly through the Solar system more quickly. The proposed VASIMR
engine would do that. Tue, 27 May 2003 08:37:32 GMThttp://liftoff.msfc.nasa.gov/2003/05/27.html#item571
Astronauts' Dirty Laundry
http://liftoff.msfc.nasa.gov/news/2003/news-laundry.asp
Compared to earlier spacecraft, the International Space Station has many
luxuries, but laundry facilities are not one of them. Instead, astronauts have other
options. Tue, 20 May 2003 08:56:02 GMThttp://liftoff.msfc.nasa.gov/2003/05/20.html#item570
Apple's developer site has a great article that gives some sample code for pulling in XML data in the visual browsers. Let's borrow that code for our example. We're going to add two lines to put the resultant XML data in a DOM object and call our render function.
// ajax.js
var req;
function loadXMLDoc(url) {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
}
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// ...processing statements go here...
// ADDED THE NEXT TWO LINES
var oDOM = req.responseXML;
renderHTML(oDOM);
} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
}
In VoiceXML, the code to fetch the XML data is a little simpler. Now you have your RSS data loaded in IE, Firefox, or your favorite VoiceXML 2.1 browser! Because the DOM primitives are standardized, you can use your standard code to parse it. The following code works in all browsers.
// parser.js function getChannelTitles(dom) {
var arrTitles = new Array();
var oRoot = dom.documentElement;
if (oRoot.nodeName == "rss")
{
var oChan = oRoot.getElementsByTagName("channel").item(0);
if (oChan != null)
{
var arrItems = oChan.getElementsByTagName("item");
if(arrItems != null)
{
for (var i = 0; i < arrItems.length; i++)
{
var titles = arrItems.item(i).getElementsByTagName("title").item(0);
arrTitles.push(titles.firstChild.data);
}
}
}
}
return arrTitles; }
Now that you can access your data, you just need to display it visually or play it in VoiceXML. Here's some simple HTML to display it. Borrowing again from our Apple developer example.
