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:

  1. Please use my starter  files.
  2. Please use all of my function stubs.
  3. Please verify that your application works correctly on both browsers (Firefox and IE) in Penn labs.
  4. Please turn in your assignment by sending a readme.txt file with the URL of your project to the Digital Drop Box in Blackboard.
  5. For debugging purposes, here are several feeds which the server should send.
  6. For your reference, here is the source code for the web service and the web handler.  NOTE: Some of this code derives from a project written by two Penn MCIT students, Hsiao-Chun Tang and Lin-Hung Wu.  I packaged their XSL transform as a web handler for our use in this project.

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 &amp; World".  See if you can correct the display to "Fox US & World" and still keep that feed working.


Visitors:  Hit Counter