In this lab, you will use the Prototype JavaScript Framework for the first time. A copy of the JavaScript file can be found at http://math.hws.edu/eck/cs271/js-work/js/prototype.js, or you can download the most recent version from the Prototype web site. You will need to add a link to this script to any web page that uses it. If you like, you can link to the copy on my web site:
<script src="http://math.hws.edu/eck/cs271/js-work/js/prototype.js"
type="text/javascript"></script>
Or you can download a copy into the same directory as your web pages and link to it using a relative URL.
Remember that when you have loaded Prototype, you can use the function $('xxx') instead of document.getElementById('xxx') and that you can use $F('xxx') to get the value of a form element, such as a text input box, that has id 'xxx'.
For this lab, you will use Ajax to access a URL on the math.hws.edu server. This will only work if your web pages are also accessed through the same server. This means that you should put your web pages into your cs271 web directory, and when you want to test them, you should access them through the server, using URLs such as "math.hws.edu/~zz9999/cs271/lab3.html". If you want to use NetBeans, you will have to copy your files to your web directory in order to test their Ajax functionality.
This assignment will be due next Friday, February 27. You should have your files posted to your cs271 web directory, with links on your main page.
The web page at math.hws.edu/eck/zips.php can be used to look up zip codes and find the city associated with that zip code. It requires a parameter named zipcode whose value gives the zip code that is to be looked up. Using the GET method, you can provide this parameter in the URL. For example: http://math.hws.edu/eck/zips.php?zipcode=14456. When used in a Web browser's location box, this will display the response as a complete, new web page. For this lab, however, you will use Ajax to fetch the data from this URL and will display the data on an existing page.
Recall that a basic Ajax request can be created in Prototype with a statement such as
new Ajax.Request( url, {
parameters: { param1: value2, param2: value2, ... },
onSuccess: function(resp) { ... },
onFailure: function() { ... }
});
This code both creates the request and sends it to the url. Later, when the request completes, either the onSuccess or the onFailure function will be called. The parameter, resp, in the onSuccess function is an Ajax.Response object that holds information about the response. In particular, resp.responseText will give you the actual content of the response.
For this exercise, the url in the Ajax.Request should be /eck/zips.php. The parameters object will have only one property/value pair. The property name should be zipcode, which is the required parameter for the url. The value should be the zip code that you want to look up.
Your web page for this exercise should have a form where the user can specify the zip code, with a button that the user can click to look up the zip code. You can use the following form, or something similar:
<form onsubmit="lookup(); return false;"> <p>zip code = <input type=text id="zcd"> <input type=button id="btn" value="Look up" onclick="lookup()"> </form>
The page will also need an HTML element where messages to the user can be displayed using the DOM. The lookup() function should use Ajax to send a request to the url /eck/zips.php. It should also display a message such as waiting for a response until the response is received from the server. (I've added a bogus one-second delay to the server's response time, to make sure that you have time to see this message.) The onSuccess function should display the response text. The onFailure function should display an error message.
Hopefully, you will realize that this exercise has a lot in common with Exercise 1 from the previous lab. This is an easy exercise that you should complete quickly.
For the second exercise in the previous lab, you implemented a dummy internet poll, using made-up data. In this lab, you will use Ajax to interface to a poll with actual votes stored in a database on the server.
The URL http://math.hws.edu/eck/poll.php gives access to the data. This URL must be called with a parameter named id that gives the id number of one of possibly many polls on the server. For example, using http://math.hws.edu/eck/poll.php?id=1 in the location box of a web browser gets the data for poll number 1. This URL returns the vote totals for all the options in the poll. The format of the response is a plain text string which contains the total number of votes for each option, separated by commas.
The URL takes a second, optional parameter named vote that is used to cast a vote in the poll. The possible answers in the poll are numbered 1, 2, 3, ... up to some maximum. The value of the vote parameter must be one of these numbers, specifying which of these options is being voted for. The response from the server has the same format as before: the numbers of votes cast for the various options, separated by commas (and including the vote that was just cast).
The question for the poll with id 1 is "What is your favorite color?", and the possible answers are 1: Red, 2: Blue, 3: Green, 4: Yellow, 5: Purple, and 6: Black. (There is an alternative poll, number 2. You can get more information about it with the URL http://math.hws.edu/eck/pollinfo.php?id=2.)
For this exercise, you should implement an internet poll where the user selects one of the possible responses and then sees the overall results from the database. You can start with a copy of your work on the poll from lab 2. However, in this case, when the user clicks one of the radio buttons, you should send an Ajax request to the server to cast the votes and get the overall vote counts. The URL for the request is '/eck/poll.php'. When the response is received, it's time to start the "growing bars" animation to display the results.
There is one new JavaScript feature that you will need: if str is a String containing substrings separated by commas, then str.split(",") will return an array containing the substrings. You can use this to extract the vote totals from the Ajax response into an array.