Click here to Skip to main content
12,394,788 members (61,198 online)
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads

Stats

144.6K views
2.2K downloads
122 bookmarked
Posted

Ajax Tutorial for Beginners with XML & JSON: Part 2

, 3 Jan 2009 CPOL
This article will give you a brief idea about Ajax with XML & JSON
AjaxPart2
App_Data
Bin
byLibrary.dll
byLibrary.dll.refresh
byLibrary.pdb
weathericon.JPG
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 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.

License

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

Share

About the Author


You may also be interested in...

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