|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Weather Report</title>
<script language="javascript" type="text/javascript">
var xmlHttpRequest;
var type;
var _City;
function FetchWeather(city)
{
_City = city.toLowerCase();
xmlHttpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
if (xmlHttpRequest == null)
return;
var ddlType = document.getElementById('ddlType');
type = ddlType.options[ddlType.selectedIndex].text;
xmlHttpRequest.open("GET", "FetchWeather.aspx?city="+city+"&type="+type, true);
if(type=='XML')
xmlHttpRequest.onreadystatechange = StateChangeForXML;
else if(type=='JSON')
xmlHttpRequest.onreadystatechange = StateChangeForJSON;
xmlHttpRequest.send(null);
}
function StateChangeForXML()
{
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)
{
document.getElementById('<%= lblWeather.ClientID %>').innerHTML = xmlHttpRequest.responseText;
document.getElementById('txtCity').focus();
}
}
function StateChangeForJSON()
{
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)
{
var json = eval('('+ xmlHttpRequest.responseText +')');
for(var i=0; i<json.weatherdetails.weatherreport.length; i++)
{
if(json.weatherdetails.weatherreport[i].city.toLowerCase() == _City)
{
document.getElementById('<%= lblWeather.ClientID %>').innerHTML = '<br>Weather Report using JSON<br> '+json.weatherdetails.weatherreport[i].weather+ '<sup>o</sup> C <img src="weathericon.JPG" alt="weather" />';
document.getElementById('txtCity').focus();
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Small Ajax Application using WebService to see the Weather of a particular city </h3><br />
<h5>( At present weather details is limited to four major cities of India i.e mumbai, delhi, chennai & kolkata )</h5>
<br />
Choose Type here :
<asp:DropDownList runat="server" ID="ddlType" >
<asp:ListItem Value="XML" Selected="True" >XML</asp:ListItem>
<asp:ListItem Value="JSON">JSON</asp:ListItem>
</asp:DropDownList>
<br /><br />
Type the city here: <input type="text" id="txtCity" onkeyup="FetchWeather(this.value)" />
<br />
<asp:Label runat="server" ID="lblWeather" />
</div>
</form>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip