Homework: Weather.com & Facebook Mashup – an AJAX/JSON/Java ExerciseHomework: Weather.com & Facebook Mashup – an AJAX/JSON/Java Exercise1. Objectives- Become familiar with the AJAX, REST, JSON & XML technologies;- Use a combination of HTML, CSS, DOM, XMLHttpRequest, XML and JavaServlets;- Provide an interface to search and display weather predictions from Weather.com and post them to Facebook.2. Background2.1 AJAX & JSONAJAX (Asynchronous JavaScript + XML) incorporates several technologies:- Standards-based presentation using XHTML and CSS;- Dynamic display and interaction using the Document Object Model (DOM);- Data interchange and manipulation using XML and XSLT;- Asynchronous data retrieval using XMLHttpRequest;- JavaScript binding everything together.See the class slides at http://www-scf.usc.edu/~csci571/Slides/ajax.ppt. JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Itsmain application is in AJAX web application programming, where it serves as analternative to the use of the XML format for data exchange between client and server. Seethe class slides at http://www-scf.usc.edu/~csci571/Slides/JSON1.ppt. 2.2. Weather.comWeather.com is an online service that gives you free access to a location's weatherinformation on the web. The Weather.com homepage is available at:http://www.weather.com/In Homework #6, you provided a login interface to retrieve and display the weather of alocation in next 36 hours from Weather.com. In Homework #6 a Perl script together withyour Apache server provided the “scrape” functionality. In this exercise you will re-useyour scraping code to produce XML instead of HTML as you did in homework #6.However, you do not use the login mechanism; instead, create a webpage that can letusers to key-in the ZIP code of the location, shown in Figure 1. Again, we assume the ZIPcode that is input by the user is valid.1Figure 12.3 FacebookFacebook is a global social networking website that is operated and privately owned byFacebook, Inc. Users can add friends and send them messages, and update their personalprofiles to notify friends about themselves and what they are doing. Users can additionally post news feeds to their profiles, and these feeds may includeimages, besides text messages. The facebook homepage is available at:http://www.facebook.comFacebook provides developers with an application-programming interface, called theFacebook Platform. A component of this platform is Facebook Connect, a powerful set ofAPIs for developers that allows them to authorizes users, and send communications toFacebook, among many more things.The Facebook Connect homepage is available at:http://wiki.developers.facebook.com/index.php/Facebook_Connect3. Description of the ExerciseIn this exercise, you will write a web application that does the following sequence ofactions:a) Allows a user to enter a “query” for weather conditions from weather.com; thequery will contain a zip code;2b) Uses the query string to retrieve a location's weather in next 36 hours fromweather.com, using the Apache/Perl CGI from Homework #6;c) Displays the next 36 hours' weather in the UI, in the same or similar format usedin Homework #6;d) Allows the user to select one weather prediction;e) Allows the user to invoke posting the weather prediction to Facebook;f) Authorizes (logs in) the user to Facebook;g) Posts the weather prediction and a message (The default message will be “Theweather prediction on XXX is YYY and ZZZ F”, for example, "The weatherprediction on Tonight is Partly Cloudy and 54 F"), to a user’s Facebook feed usingthe Facebook Connect API. The default message will be editable by users so thatthey can change it, if they wish to do so, to one of their preference.A snapshot of the initial user interface, together with a query and the resultant table, isshown in Figure 2. Figure 2. User Interface3To implement this exercise you are required to write a combination of HTML, JavaScriptand Java Servlet programs. The top-level interface consists of three areas: - A Form area including an edit box to enter the query string and a “Search” button;- A dynamic area that displays a table with the weather prediction corresponding tothe query, additional properties of the weather (time, condition, temperature, feelslike, wind, and weather figure) and a radio button, used to select one of theweather predictions;- A “POST TO FACEBOOK NEWS FEED” button that posts the text “The weatherprediction on XXX is YYY and ZZZ F”, corresponding to the selected weatherprediction, to a user’s feed page.Once query string has been entered in the edit box and the “Search” button is pressed, theform calls a JavaScript function. This function first performs basic validation of the input.If the input is empty, the request is not forwarded to the Java Servlet. Instead an alert withan error message is presented to the user, asking to refine the search. Once the validationis successful, the JavaScript function executes an XMLHttpRequest to start anasynchronous transaction with a Java Servlet running under Tomcat, and passing the“query string” as a parameter of the transaction. The Java Servlet in turn performs the following three steps:First, the Java Servlet extracts the query string and then it calls the “modified” Perl CGIprogram from Homework #6 to retrieve from weather.com corresponding to the ZIP codeincluded in the query. For example, if your server was using port 8866, the followingREST query with the query string of “90266”:http://cs-server.usc.edu:8866/cgi-bin/weather.pl?search=90266would return the following XML:<?xml version="1.0" encoding="utf-8" ?><rsp stat="ok"><weathers total="3">< weather time="Tonight" condition="Partly Cloudy" temperature="54F" feels_like="Low" wind="NW at 6mph"chart="http://s.imwx.com/v.20100719.135915/img/wxicon/72/29.png"/>< weather time="Tomorrow" condition="Mostly Sunny" temperature="71F" feels_like="High" wind="WNW at 9 mph"chart="http://s.imwx.com/v.20100719.135915/img/wxicon/72/34.png"/>< weather time="Tomorrow Night" condition="Partly Cloudy" temperature="54 F" feels_like="Low" wind=" WNW at 7 mph"chart=" http://s.imwx.com/v.20100719.135915/img/wxicon/72/29.png"/></weathers></rsp>4Notice that in Homework #6 your CGI Perl script produced HTML. In this