Mobile-Web-App: Yahoo APIs

Tuesday, March 27, 2012

Javascript query Yahoo! Weather by zip

Javascript query Yahoo! Weather by zip We can use Javascrip get XML from "http://query.yahooapis.com/v1/public/yql/jonathan/weather?zip=94025", to query Yahoo! Weather by zip code. It's a example to query weather for zip code 94025, Menlo Park, CA.

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Yahoo! Weather by zip</title>

<script>

function loadyahooweather()
{
 if (window.XMLHttpRequest)
 { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 } else {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 xmlhttp.open("GET","http://query.yahooapis.com/v1/public/yql/jonathan/weather?zip=94025",false);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML; 
 
 //description=xmlDoc.getElementsByTagName("description");
 
 
 description0=(xmlDoc.getElementsByTagName("description")[0].childNodes[0].nodeValue);
 description1=(xmlDoc.getElementsByTagName("description")[1].childNodes[0].nodeValue);
 
 txt = "<p><b>" + description0 + "</b></p>";
 txt += "<p>" + description1 + "</p>";

 //txt = "<p>title: " + "</p>";
   
 document.getElementById("yahooweather").innerHTML=txt;
}
</script>
</head>
<body onload="loadyahooweather()">
<h1>Mobile-Web-App: Yahoo! Weather by zip</h1>
<div id='yahooweather'></div>

</body>
</html>

Monday, March 26, 2012

Parse XML using Javascript

Yahoo API provide some web service. For example, the following link return xml of some information of a place search by text of "New York".
http://query.yahooapis.com/v1/public/yql?q=select*from%20geo.places%20where%20text=%22New%20York%22&format=xml

We can use JavaScript to parse the xml to retrieve information; such as WOEID, placeTypeName, name and much more. The example display WOEID, placeTypeName, name of the first place in the returned list.

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: XML Parse</title>

<script>

function loadwoeid()
{
 if (window.XMLHttpRequest)
 { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 } else {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 xmlhttp.open("GET","http://query.yahooapis.com/v1/public/yql?q=select*from%20geo.places%20where%20text=%22New%20York%22&format=xml",false);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML; 
 
 place=xmlDoc.getElementsByTagName("place");
 firstplace = place[0];
 
 woeid=(firstplace.getElementsByTagName("woeid")[0].childNodes[0].nodeValue);
 placetypename=(firstplace.getElementsByTagName("placeTypeName")[0].childNodes[0].nodeValue);
 name=(firstplace.getElementsByTagName("name")[0].childNodes[0].nodeValue);
 
 txt = "<p>WOEID: " + woeid + "</p>" 
   + "<p>placeTypeName: " + placetypename + "</p>" 
   + "<p>name: "+ name +"</p>";
   
 document.getElementById("woeidtable").innerHTML=txt;
}
</script>
</head>
<body onload="loadwoeid()">
<h1>Mobile-Web-App: XML Parse</h1>
<div id='woeidtable'></div>

</body>
</html>