Yahoo, Google... etc are providing weather report through API's. We can directly use those in html page using jquery and javascript. we can use location id, or location sharing to get weather.
simply create one html file and use the code.
digg on this and find more exciting features.
here is the code.
-----------------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
function loadXMLDoc() {
var Result = $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
function (data) {
display(data);
});
}
function display(data) {
$("body").html('');
$("body").append("Sunrise: " + data.query.results.channel.astronomy.sunrise + "<br />");
$("body").append("SuntSet: " + data.query.results.channel.astronomy.sunset + "<br />");
$("body").append(data.query.results.channel.item.description + "<br />");
$("body").append(data.query.results.channel.item.title + "<br />");
}
</script>
</head>
<body>
<div id="myDiv">
<h2>
Get weather</h2>
</div>
<button type="button" onclick="loadXMLDoc()">
Get weather</button>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
function (data) {
display(data);
});
this method returns a jason object. "data.query.results.channel". this contains more features. try digg on this.
you can share you location using the following code.
---------------------------------------------------------------------------------------------------------------
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, errorfn);
}
function success(position) {
alert(position);
}
function errorfn(error) {
}
---------------------------------------------------------------------------------------------------------------
some api's does not provide jason so we need to use this code
----------------------------------------------------------------------------------------------------------------
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://weather.yahooapis.com/forecastrss?w=615702&u=c", true);
xmlhttp.send();
----------------------------------------------------------------------------------------------------------------------
simply create one html file and use the code.
digg on this and find more exciting features.
here is the code.
-----------------------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
function loadXMLDoc() {
var Result = $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
function (data) {
display(data);
});
}
function display(data) {
$("body").html('');
$("body").append("Sunrise: " + data.query.results.channel.astronomy.sunrise + "<br />");
$("body").append("SuntSet: " + data.query.results.channel.astronomy.sunset + "<br />");
$("body").append(data.query.results.channel.item.description + "<br />");
$("body").append(data.query.results.channel.item.title + "<br />");
}
</script>
</head>
<body>
<div id="myDiv">
<h2>
Get weather</h2>
</div>
<button type="button" onclick="loadXMLDoc()">
Get weather</button>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
function (data) {
display(data);
});
this method returns a jason object. "data.query.results.channel". this contains more features. try digg on this.
you can share you location using the following code.
---------------------------------------------------------------------------------------------------------------
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, errorfn);
}
function success(position) {
alert(position);
}
function errorfn(error) {
}
---------------------------------------------------------------------------------------------------------------
some api's does not provide jason so we need to use this code
----------------------------------------------------------------------------------------------------------------
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://weather.yahooapis.com/forecastrss?w=615702&u=c", true);
xmlhttp.send();
----------------------------------------------------------------------------------------------------------------------
Very interesting,good job and thanks for sharing such a good blog.your article is so convincing that I never stop myself to say something about it.You’re doing a great job.Keep it up.Php course in mumbai dadar
ReplyDelete