Posts Tagged AJAX

JavaScript – Using AJAX with JSON to retrieve weather information


JavaScript has been around for over a decade now. Recent years has seen a growth in its popularity especially with the introduction of AJAX, JSON and some other frameworks and libraries e.g. dojo.

In this post, we will create a simple web page which will display a simple form for a user to enter zip code. Based on the zip code entered, we will show how to make an AJAX call to retrieve weather information from Yahoo in JSON data format.

Step 1 –

If you are using Eclipse, create an empty web project. In case if you want to use maven, you can use the following command to create a simple java web project:

$ mvn archetype:generate -DarchetypeArtifactId=maven-archetype-webapp -DartifactId=JSWebApp -DgroupId=com.ssharaf.webapp -Dversion=1.0-SNAPSHOT -Dpackage=com.ssharaf.webapp

The above command will create a web project with name JSWebApp (as specified in the maven command line parameter -DartifactId=JSWebApp).

Navigate to
JSWebApp/src/main/webapp

Step 2 –

And open index.html in your favorite editor (mine is VI). Replace the existing content in the file by the one below:

<html>

<head>

<script src=”ajaxlab.js” type=”text/javascript”></script>

</head>

<body>

<h1>Weather Portlet</h1>

Enter zip code to find weather:<br/>

<input type=”text”></input>

<button>Submit</button>

<div id=”output”></div>

</body>

</html>

Now add the following javascript file to the location (JSWebApp/src/main/webapp).

====================begin javascript code======================

ajaxlab = {};

ajaxlab.query = “select * from weather.forecast where location=”;
//append zipcode to query to get proper YQL

ajaxlab.yahoourl = “http://query.yahooapis.com/v1/public/yql&#8221;;

ajaxlab.getJSONP = function(url, params, callback) {
var scriptTag = document.createElement(“script”);
scriptTag.type = “text/javascript”;
var functionName = “x”+(new Date().getTime());
var firstParam = true;
for (var key in params) {
url += (firstParam ? ‘?’ : ‘&’) + key + ‘=’ + params[key];
firstParam = false;
}
scriptTag.src = url + “&callback=ajaxlab.” + functionName;
ajaxlab[functionName] = function(data) {
callback(data);
delete ajaxlab[functionName];
}
document.body.appendChild(scriptTag);
}

ajaxlab.start = function() {
document.getElementsByTagName(“button”)[0].addEventListener(“click”, function(e){
var zip = document.getElementsByTagName(“input”)[0].value;
ajaxlab.getJSONP(ajaxlab.yahoourl, { q : encodeURIComponent(ajaxlab.query + zip), format:”json” }, ajaxlab.render);
});
}

ajaxlab.render = function(result) {
console.log(result);
result.query.results.channel.description
document.getElementById(“output”).innerHTML =

” + result.query.results.channel.description + “


+ result.query.results.channel.item.description;
}

window.onload = ajaxlab.start;

====================end javascript code======================

Step 3 –

Add the following jetty plugin to your project’s pom.xml file:

<build>
<plugins>
...
<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>maven-jetty-plugin</artifactId>
<version>6.1.17</version>
</plugin>
...
</plugins>
</build>

Once the Jetty plugin has been set up in the project POM file, the jetty:run goal is available:

$ mvn jetty:run

When running the preceding command for the first time, Maven will automatically download all dependencies and start the Jetty plugin.

Code View: Scroll / Show All
[INFO] Starting jetty 6.1.26 ...
2010-11-16 07:37:00.135:INFO::jetty-6.1.26
2010-11-16 07:37:00.247:INFO::No Transaction manager found - if your webapp requires one, please configure one.
2010-11-16 07:37:00.484:INFO::Started SelectChannelConnector@0.0.0.0:8080
[INFO] Started Jetty Server

Now testWebApp is running on localhost:8080/JSWebApp!

Advertisements

, , ,

Leave a comment