NasdaqNM
NYSE
In this assignment, you will write an application that uses Ajax to update the "display" portion of a form with a table containing stock quote information.
Create a new Tomcat6-based Dynamic Web Application project in J2EE Eclipse named <yourname>-Lab9.
Create a Quote.html form that allows a user to enter an arbitrary number of stock market ticker symbols (e.g. "GOOG", "AAPL") into a text field. The field should be large enough to allow at least 10 symbols to be entered, separated by whitespace (newline, tabs, or spaces).
The form must provide a button, that, when pressed, causes an asynchronous Ajax request to be sent (for each stock symbol entered) to a java-based QuoteServlet (which you must create and implement) which returns a JSON string containing information about the stock. Thus, if 10 symbols entered, 10 Ajax requests will be sent to the servlet, and 10 JSON responses will be generated.
Each JSON response will contain a significant amount of information pertaining to the stock. In the Quote.html file, you will have a function that is called by Ajax when the JSON response is received asynchronously. Your implementation of this function must extract only part of this information (you'll have to study the JSON response while developing your code), and display it in table form, as shown below:
| LOGO | CHANGE | HIGH | VOLUME | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| GOOG |
|
819.06 | 17.64 | +2.20% | 803.00 | 822.70 | 2,301,967 | Google, Inc. | 271.28 |
NasdaqNM |
| AAPL |
|
430.12 | 12.92 | +3.10% | 420.00 | 433.62 | 22,868,730 | Apple Computer | 403.73 |
NYSE |
Note: The styling of the table is provided as an example; you do not have to exactly replicate the appearance, but your table must:
 | contain headings similar to that shown above |
| display the stock symbols in blue |
| display the price "change" and "% chg" in green if those numbers are positive, and red if negative. The remaining text should be black. |
| the table rows should alternate in color, similar to that shown above |
| for "common" stocks (your choice), you must display a custom thumbnail image (about 50x50 pixels). You'll must create and store 5 "common" image files, which you can name "GOOG.gif", "GOOG.jpg", or similar so that you can easily associate it with a known stock. If the user enters and "unknown" stock for which you have no image, you must display a default image. You must store these image files in your the <yourname>-Lab9/WebContent folder. |
| if an invalid ticker symbol is entered, the table rows should be empty, except for the symbol, which should appear in red. |
NOTE: During business hours, the PRICE of a stock may vary continuously. The price someone is willing to pay (bid) may be different from the price someone is willing to sell for (ask). They are usually close, so you may choose one or the other to display.
To retrieve stock quotes, your QuoteServlet must call the getStockQuote method contained implemented in this StockQuoter.java file. This class implements a YQL query to a Yahoo Finance web service that retrieves information about a specified stock. You do not need to modify the StockQuoter.java file at all.
The StockQuoter.java class uses various external utility classes. Download and extract this lib.zip file into the <yourname>-Lab9/WebContent/WEB-INF/lib folder.
It is suggested that you use a jQuery-based approach to implement the Ajax requests and retrieval of information. However, you may (if you really want to) use a pure JavaScript approach if you so choose. Note, however, that you will be responsible for understanding both approaches on the Final Exam.
When you have finished,
1. Demonstrate your application locally. There is no need to deploy to sapphire! NOTE: The Yahoo web service limits the number of service requests it will honor from a particular domain in a given period of time. If you (and your classmates) are all hitting the service simultaneously, it will stop responding temporarily.
2. zip your Eclipse src and WebContent folders (NOT the entire project folder) and submit it to Blackboard.