LAB 4 Ajax - Working with XML and JSON Contents Introduction by zwj23860

VIEWS: 35 PAGES: 9

									SECC402: Rich Internet Applications


LAB 4: Ajax - Working with XML and JSON


Contents
  Introduction .................................................................................................................................1 
  Resources ...................................................................................................................................1 
  Task 1: Handling XML ...............................................................................................................2 
  Task 2: Handling JSON ............................................................................................................5 
  Task 3: Writing XML ..................................................................................................................8 
  Task 4: Writing JSON ................................................................................................................9 




Introduction
In this lab you will practice creating web pages which send asynchronous requests and
handle responses which return data in XML and JSON formats.

The lab consists of four tasks to complete if you have time. Some of these include
questions – you should write down your answers and keep these for future reference.



Resources
    •     Lecture notes – you will need chapter 5 to help you with this lab.
    •     You will be using Visual Studio within a virtual machine environment using
          VMWare. See the course website for details of the VMWare image name and
          location.
    •     Notes and code for these lab exercises can be downloaded from the course
          website– www.paterson.co.uk/gcal/ria.html
    •     Additional reference material available at W3Schools (http://www.w3schools.
          com) and in the course textbook (Dietel)




                                                                  page 1
SECC402: Rich Internet Applications



Task 1: Handling XML
In this task you will write JavaScript code to complete a page which handles XML
returned as a result of asynchronous requests.

   1. Download lab4.zip from the course website and extract the contents into a folder.

   2. Start VS2008, and select File > Open Web Site.... Navigate to the folder where
      you extracted the lab files and click Open. Check that the Solution Explorer
      contains the folders App_Data, Bin, css and images, and the web site root folder
      contains some .html and .ashx files.

   3. View the file Packages.ashx in your browser. You should see an XML with a root
      element <packages> and a set of <package> elements.

       NOTE: Packages.ashx is an ASP.NET server script which queries a database
       and outputs the query result as XML.

   4. Open ajaxpackageinfo.html for editing in VS2008. Find the JavaScript function
      getPackagesCallback. This is the callback function for getPackages, which
      sends a request to Packages.ashx. The XML data is stored in a variable xmlDoc.

   5. Complete this function so that it:
      • Stores the contents of the <package> elements in a array
      • Adds a new OPTION to the SELECT box with id=packagelist for each
        member of the array.

       The similar example in chapter 5 of your notes will help. The result should look
       like this:




                                         page 2
SECC402: Rich Internet Applications

       Test the page in Firefox over an HTTP connection (use the View in Browser
       option in VS2008).

       NOTE: You should see one error reported in the Firebug console - this is
       because some functionality of the page is not complete yet

       You can view the response data in the Firebug Net tab to check that the XML is
       being sent correctly to the browser. You should only look at the GET request to
       Packages.ashx at the moment – ignore other requests which may be shown.




   When step 5 is complete and tested, you are ready to complete the page so that
   details of the selected package are displayed in a paragraph in the page whenever
   the user makes a selection.

   6. View the file PackageInfo.ashx in your browser. You should see an XML with a
      root element <packages> and a set of <package> elements. Each <package>
      element contains child elements with details of that package.

   7. PackageInfo.ashx allows you to specify a package, and if you do so it returns
      details of that single package only. In your browser address bar change
      PackageInfo.ashx to PackageInfo.ashx?name=Alpine%20Action and view the
      result. You should now see only one <package> element.

   8. Find the JavaScript function getPackageInfoCallback. This is the callback
      function for getPackageInfo which handles the onchange event of the SELECT
      box, and sends a request with the selected package name as a parameter.

       Again, the XML data is stored in a variable xmlDoc. The contents of xmlDoc
       should be used to set the values of three variables packagename,
       packagedescription and tourpicurl. The first of these has been done for you.

       var xmlDoc = req.responseXML;
       var packagename =
           xmlDoc.getElementsByTagName("name")[0].
           childNodes[0].nodeValue;

       The variable packageinfo should then be used to build a string containing HTML
       code to display the information in the page.

   9. Complete this function so that it:
      • Sets the values of the variables using the contents of xmlDoc
      • Builds a suitable string of HTML code in the variable packageinfo.




                                         page 3
SECC402: Rich Internet Applications


       The result should look something like this:




       Test the page in Firefox over an HTTP. As before, you can view the response
       data in Firebug to check that the XML is being sent correctly to the browser.




                                         page 4
SECC402: Rich Internet Applications



Task 2: Handling JSON
In this task you will write JavaScript code to complete a page which behaves exactly as
the page in Task 1, except that it handles data returned as JSON. The server scripts
have been written to query the database in the same way as before, but to format the
response as JSON.

   1. View the file Packages_json.ashx in your browser. The browser may attempt to
      display the result or it may open a separate application to view the result. You
      should see a JSON object containing an array called packagearray which starts
      like this:

       {"packagearray":["Alpine Action","Amazon & Inca Adventure",...

   2. Open ajaxpackageinfo_json.html for editing in VS2008. Find the JavaScript
      function getPackagesCallback. This is the callback function for getPackages,
      which sends a request to Packages.ashx. The JSON object is stored in a variable
      response.

       NOTE: The JSON object becomes a native JavaScript object when it is parsed.


   3. Complete this function so that it adds a new OPTION to the SELECT box with
      id=packagelist for each member of response.packagearray.

       The similar example in chapter 5 of your notes will help. The result should look
       like this:




       Test the page in Firefox over an HTTP connection (use the View in Browser
       option in VS2008). You can view the response data in the Firebug Net tab to
       check that the JSON is being sent correctly to the browser. You should only look
       at the GET request to Packages.ashx at the moment.


                                         page 5
SECC402: Rich Internet Applications

When step 3 is complete and tested, you are ready to complete the page so that details
of the selected package are displayed in a paragraph in the page whenever the user
makes a selection.

   1. View the file PackageInfo_json.ashx in your browser. You should see a JSON
      object containing an array called packagearray which starts as shown below.
      Each element of the array is an object with attributes name, description and
      tourpicurl.

       {"packagearray":[
       {"name":"Western Adventure",
       "description":"A typical tour is our Western Adventure tour, featuring activities
       which can include white water rafting on the Colorado river, desert exploring,
       horse riding in the Wild West.",
       "tourpicurl":"images/western.jpg"},
       {"name":"Roof of the World Explorer",
       "description":"New this year is our Roof of the World tour. Experience the
       adventure of a lifetime in the mountains of Nepal. Follow in the footsteps of the
       Sherpas - with the Sherpas! This tour will simply take your breath away.",
       "tourpicurl":"images/roofoftheworld.jpg"},
       ...


   2. PackageInfojson.ashx allows you to specify a package, and if you do so it returns
      details of that single package only. In your browser address bar change
      PackageInfo.ashx to PackageInfo_json.ashx?name=Alpine%20Action and view
      the result. You should now see only one object in the array.

       NOTE: If your browser opened another editor, the URL may not appear in the
       address bar. If so, you can type the full URL yourself in the browser.


   3. Find the JavaScript function getPackageInfoCallback. This is the callback
      function for getPackageInfo which handles the onchange event of the SELECT
      box, and sends a request with the selected package name as a parameter.

       Again, the JSON object is stored in a variable response. The contents of
       response should be used to set the values of three variables packagename,
       packagedescription and tourpicurl. The first of these has been done for you.

       var response = req.responseText.parseJSON();
       var packagename = response.packagearray[0].name;

       The variable packageinfo should then be used to build a string containing HTML
       code to display the information in the page.




                                          page 6
SECC402: Rich Internet Applications

   4. Complete this function so that it:
      • Sets the values of the variables using the contents of xmlDoc
      • Builds a suitable string of HTML code in the variable packageinfo.

       The result should look something like this:




       Test the page in Firefox over an HTTP. As before, you can view the response
       data in Firebug to check that the JSON is being sent correctly to the browser.




                                         page 7
SECC402: Rich Internet Applications



Task 3: Writing XML
In this task you will create an XML document containing a list of GCUTours users. This
document should be formatted so that the contents are displayed correctly by an existing
Ajax web page.

   1. Open the file ajaxusers.html in VS2008. Locate the JavaScript function
      getUsersCallback. This function handles a response consisting of a list of users
      in XML format.

   2. Examine the code used to process the XML response.

   3. Create a new XML file your website root folder in VS2008. Save the file as
      users.xml.

   4. Write the content of users.xml so that it can be handled by ajaxusers.html and
      produce the following output:




       Test the page in Firefox over an HTTP. As before, you can view the response
       data in Firebug to check that the XML is being sent correctly to the browser.




                                         page 8
SECC402: Rich Internet Applications



Task 4: Writing JSON
In this task you will create a text file containing a JSON object representing a list of
GCUTours users. This document should be formatted so that the contents are displayed
correctly by an existing Ajax web page.

   1. Open the file ajaxusers_json.html in VS2008. Locate the JavaScript function
      getUsersCallback. This function handles a response consisting of a list of users
      in JSON format.

   2. Examine the code used to process the JSON response.

   3. Create a new text file your website root folder in VS2008. Save the file as
      users.json.

   4. Write the content of users.json so that it can be handled by ajaxusers_json.html
      and produce the same output as in Task 3.

       Test the page in Firefox over an HTTP. As before, you can view the response
       data in Firebug to check that the JSON is being sent correctly to the browser.




                                         page 9

								
To top