Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads
 
Add your own
alternative version

Ajax Tutorial for Beginners with XML & JSON: Part 2

By , 3 Jan 2009
AjaxCodePart2.zip
AjaxPart2
App_Data
Bin
byLibrary.dll
byLibrary.dll.refresh
byLibrary.pdb
weathericon.JPG
AjaxPart2.zip
byLibrary.dll
byLibrary.dll.refresh
byLibrary.pdb
weathericon.JPG
<%@ 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 use 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author


| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 3 Jan 2009
Article Copyright 2008 by bhupiyujuan
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid