|
back to the CIS 700 Wiki | Ajax Assignment 1 (ver. 2.2) ajax examples due on ?, no later than midnight Last modified 07/12/2007 |
Using your hosting servie, develop an Ajax application which implements an RSS 2.0 news reader. Your application will look like this:

Please use my starter files (you'll have to change the URL's in feeds.htm from my domain to yours). When testing your code, however, you'll want to right-click and "View in browser" on file index.htm so that you'll see the entire frameset. Although this application uses an HTML frameset, you do not have to write any frame-specific code. You make all your changes to file feeds.htm.
You must complete the three Ajax calls as detailed below. All the HTML and Javascript function stubs you need, including URLs, are in file feeds.htm.
Ajax Call #1
The first Ajax call occurs on page load. Using SOAP 1.2 (see example), you need to write the code that calls the GetAllSiteNames method in the web service. My service looks like:
http://harbormist.com/webservice/rsslookup/RSSService.asmx
NOTE: Remember to call the service with ?WSDL tacked onto the URL. The GetAllSiteNames method returns XML with multiple strings; the response text looks like what's shown in this alert box:

When the first call returns (still during page load), your Javascript needs to parse the above XML and create new <option> items within the <select></select> tags. Using Javascript, please create the very first list item as the default selection with two extra "true" parameters like this:
document.forms['feedSelector'].selector.options[0]
=
new Option(myListItemValue,myListItemValue,true,true);
Create the subsequent ones omitting the "true" parameters:
document.forms['feedSelector'].selector.options[0]
=
new Option(myListItemValue,myListItemValue);
After the page loads, and before the SELECT button is clicked, your application should look like this:

Ajax Call #2
The second Ajax call occurs when the user clicks the SELECT button. You need to write the code that calls the GetURL method in the same web service. That method returns a SOAP 1.2 envelope that contains a URL. This URL will fetch the XML for the feed. For example, if you send the service string 'CNN World', you'll get back URL http://rss.cnn.com/rss/cnn_world.rss, which if you browse to it, is file cnn_world.rss.xml (in raw XML format). This XML is not ready for display; it needs to be reformatted as HTML first.
Ajax Call #3
When the second call returns (still handling the button click), your Javascript needs to parse the SOAP envelope returned above and get the feed's URL, then send that URL to the following web handler:
http://harbormist.com/webservice/rsslookup/XslHandler.ashx
The web handler returns a complete HTML page that is an XSL transform of the feed's raw XML. When this HTML page is returned, the Javascript already exists to display it in the right frame (see Javascript function updateFeedHTML() at the bottom of file feeds.htm). Your job is to write the Javascript which calls the above web handler, passing it the feed's URL. What comes back begins with "<html..." and is ready to written directly into the right window of the frameset.
RULES:
Extra Credit Opportunity
In case this assignment is too easy, I left you a little challenge. Due to a server problem, unless you take remedial action, one of the services will show up in your item list as "Fox US & World". See if you can correct the display to "Fox US & World" and still keep that feed working.
Visitors: