Server access with XMLHttpRequest from a bada web application

Gabor Paller's picture

We have seen, how to turn HTML/JavaScript applications into installable bada applications and we have integrated these applications with bada's native GUI elements using only JavaScript. The logical next step is to connect our application with the network and the exercise we are going to see is the Word of the Day application using wordsmith.org's RSS feed.

The example application package is attached at the end of the post. You have to be registered and logged in to sfonge.com to access it.

The application is very simple. Once launched, it fetches the RSS document from http://wordsmith.org/awad/rss1.xml static address. The RSS feed is represented by an XML document and it looks like this:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title>Wordsmith.org: Today's Word</title>
<link>http://wordsmith.org/</link>
<copyright>Copyright 1994-2011 Wordsmith.org</copyright>
<description>The magic of words - that's what Wordsmith.org is about.</description>
<webMaster>webmaster AT wordsmith.org</webMaster>
<managingEditor>words AT wordsmith.org</managingEditor>
<language>en-us</language>
<ttl>1440</ttl>
<item>
<title>attaboy</title>
<link>http://wordsmith.org/words/attaboy.html</link>
<description>Used to express approval or encouragement.</description>
</item>
</channel>
</rss>

We need to retrieve the content of the <title> and <description> elements under the <item> element (marked with bold typeface) and display them in our simple bada form.

For those who are familiar with JavaScript and Ajax programming, the code in Res/js/web_words3_xmlhttp.js is an old friend. I simply used XMLHttpRequest to retrieve the RSS document. XMLHttpRequest has an option to return the result in a parsed DOM tree and that's what I asked for. Then I could navigate in the DOM tree to our elements of interest using the getElementsByTagName() method of a DOM Node.

There is a tiny detail, however, that needs attention here. Web programmers are painfully aware of the issue of "cross-domain requests". XMLHttpRequest is restricted to access only the same domain where the document that contains the JavaScript code was downloaded from. This restriction was imposed to prevent rogues scripts on trusted sites to display data from untrusted sources. Now our bada application was not downloaded from anywhere, how does this restriction apply?

The "cross-domain access" restriction is still in place. Our access to wordsmith.org would be blocked but we have the option to grant access to certain addresses. The bada way of doing it is to place a config.xml file in the Res directory. The one I used is the following:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<widget>
    <access origin="*" subdomains="true"/>
</widget>


This allows unlimited access of the application to any website.

 

[img_assist|nid=326|title=Word of the Day|desc=|link=none|align=left|width=640|height=482]

Attached file: 
Javier Calderon's picture

Hi Gabor, the examples are excellent, now I'm checking this one, I only have a little question, How you manage special characters like ("" '' áéíóú & ñÑ)?

Gabor Paller's picture

What is the specific problem? XML escaping should be used for XML special characters:
http://en.wikipedia.org/wiki/XML#Escaping

Otherwise the default charset for XML is UTF-8 so if you store your XML document in UTF-8 on the server, there should not be a problem.

Javier Calderon's picture

Hi Gabor, do you know how download an image that is in the XML, like:

...
http://www.domain.com/images/image.jpg

...

Gabor Paller's picture

Do you want to download the image or rather display it? In the latter case you just update the src property of an image element on the HTML page.
E.g. lot of examples here:
http://stackoverflow.com/questions/1232793/javascript-set-img-src