Hello there!.
I am trying to use a public api from wunderground (more info in [http://wiki.wunderground.com/index.php/API_-_XML][1]) on a web page (in fact in a widget for a phone, but for testing purposes, but is the same technically speaking and writing code).
The main question is that i haven't been able to get the ajax request work, i try using a plain request (without any library) and request using jquery; as you can guess: no one works.
I am getting really frustrating with this. I know there is ton of info ajax, but unfortunately i only get more frustrating understanding less i doesn't find one concrete answer over a sea of information (like the internet).
Maybe one charity soul :) can help me, i copy paste the code: is to simple to only see and for test you only have to copy and paste.
Well that is all, thanks to all!. Grettings. Víc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Data</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
function tryGet ()
{
try
{
var xhr = XMLHttpRequest ();
xhr.open("GET","http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=SABE",true);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
alert(xhr);
}
else
{
ret = "Error code " + xhr.status;
alert(ret);
}
}
}
xhr.send(null);
}
catch(e)
{
alert(e);
}
}
function tryGet2 ()
{
//Let's fetch simple.xml using jQuery ajax request
$.ajax(
{
type: "GET",
url: "http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=SABE",
dataType: "xml",
success: function(data, textStatus, jqXHR)
{
alert(textStatus);
}
});
}
</script>
</head>
<body>
<input type="button" value="try get" onclick="tryGet()"/><br/>
<input type="button" value="try get 2" onclick="tryGet2()"/>
<div id="content">
<!-- To put things when things works fine-->
</div>
</body>
</html>
what you can do is
1 create a server side proxy
2 call the proxy through ajax and the proxy will in turn call the weather service
3 get the xml response form the proxy
4 parse it and display it
here is how you do it in php
create a file weather.php and put the following code in it
<?php
header('Access-Control-Allow-Origin: *');
$url = "http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=SABE";
$str = file_get_contents($url);
echo $str;
?>
call weather.php from the client side like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:'GET',
url:'path/to/weather.php',
cache:false,
dataType:'html',
success:function(data){
xmlDoc = $.parseXML(data),
$xml = $(xmlDoc),
$credit = $xml.find('credit').text();
alert($credit); // alerts Weather Underground NOAA Weather Station
},
error:function(jxhr,e){
console.log(jxhr.status);
console.log(e.responseText);
}
});
});
</script>