Werner Creixell » Ajax http://profesores.elo.utfsm.cl/~wcreixell Personal web page Fri, 20 Mar 2026 13:06:49 +0000 en-US hourly 1 http://wordpress.org/?v=3.6.1 http://creativecommons.org/licenses/by-nc-sa/2.0/cl/ Twitter Searchs http://profesores.elo.utfsm.cl/~wcreixell/?p=141 http://profesores.elo.utfsm.cl/~wcreixell/?p=141#comments Wed, 16 Jun 2010 20:09:50 +0000 Werner Creixell http://profesores.elo.utfsm.cl/~wcreixell/?p=141 <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> […]]]> In Seminario II the students were challenged to make a web page that displays a Twitter search. The “#chi” or “#worldcup” hash-tag search is performed and the results dynamically displayed.

Dominique Naser solution, using jQuery, can be found here (gracias Dominique).

First a simple form to input the search.

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Buscador de Hashtags</title>
  </head>
  <body>
        <h2>Buscador</h2>
    <form action="busca.php" method="post">
                <input name="busqueda" type="text" size="50" style="text-align:left" />
                <input name="" type="submit" size="10" value="Busca!" /><br>
        </form>
  </body>
</html>

The Html file where the search and the results display is performed.

<!DOCTYPE HTML>

<html>

  <head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>Buscador de Hashtags</title>

	        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09"></script>



	<script>

	const MAX_RESULTS= 20;

function twitter_search() {

	var url = 'http://search.twitter.com/search.json?callback=?';

	// Iterating over the different search columns

	$('.twitter_search').each(function() {

		var container = $(this);

		// Search terms are specified in the 'title' attribute

		var search = container.attr('title');

		if (search) {

			var since_id = 0;

			if (container.children().length) {

				// Retrieve results since this id

				since_id = container.children(':first').attr('id').replace('#', '%23');

			}

			// Request the results

			$.getJSON(url, {'q': search, 'since_id': since_id}, function(data) {

				// Processing those results, if any

				if (data.results.length) {

					for (i in data.results.reverse()) {

						var r = data.results[i];

						// Creating the result container

						var div = $('<div id="#' + r.id + '"></div>');

						// Don't show this element now

						div.hide();

						// Adding some styles through .twitter_result

						div.addClass('twitter_result');

						// Adding user's image

						div.append('<img src="' + r.profile_image_url + '" alt="' + r.from_user + '" />');

						// Adding username

						div.append('<a href="http://twitter.com/' + r.from_user + '">' + r.from_user + '</a>');

						// Adding tweet

						div.append('<span>' + r.text + '</span>');

						// Adding corners

						div.corner();

						// Adding this result to the main container

						container.prepend(div);

						// Effect

						div.slideDown('slow');

					}

				}

				// Removing old tweets

				if (container.children().length > MAX_RESULTS) {

					// Negative index

					to_remove = MAX_RESULTS - container.children().length

					container.children().slice(to_remove).each(function() {

						$(this).slideUp();

					});

				}

			});

		}

	});

};

 

$(document).ready(function() {

	// Initial search 

	twitter_search();

	// Refresh the results every 5 seconds

	setInterval("twitter_search();", 5000);

});

	</script>

  </head>

  <body>

	<h2>Resultado</h2>

		

		<div class="twitter_search" title="<?php echo $_POST["busqueda"]; ?>"></div>	



  </body>

</html>

Diego Acevedo, used a jQuery plugin Juitter (gracias Diego). You can found his solution here

Both solutions by pass the cross-domain restriction imposed by the browser.

]]> http://profesores.elo.utfsm.cl/~wcreixell/?feed=rss2&p=141 0 Yahoo Weather in Google Maps http://profesores.elo.utfsm.cl/~wcreixell/?p=70 http://profesores.elo.utfsm.cl/~wcreixell/?p=70#comments Wed, 12 May 2010 12:58:56 +0000 Werner Creixell http://profesores.elo.utfsm.cl/~wcreixell/?p=70 This is a toy example that I used to challenge my students at seminario II. The idea is to display the Yahoo! Weather information in a google map, as showed in this page (click in the marker and the weather info for Valparaíso will appear).

We first grab the information, by a php script, from the Yahoo! Weather RSS feed. The feed is available from  the URL http://weather.yahooapis.com/forecastrss?w=349861&u=c,  where w is the corresponding code for Valparaíso, and u is the temperature unit in Celsius. This php scrip can communicate with the client (the html page with the map) by JSON or XML. The XML version is contributed by Jorge Flores a student in Seminario II (¡¡Gracias Jorge!!).
The XML from the feed looks like

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>

<title>Yahoo! Weather - Valparaiso, CI</title>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html</link>
<description>Yahoo! Weather for Valparaiso, CI</description>
<language>en-us</language>
<lastBuildDate>Tue, 11 May 2010 6:00 pm CLT</lastBuildDate>
<ttl>60</ttl>
<yweather:location city="Valparaiso" region=""   country="CI"/>

<yweather:units temperature="C" distance="km" pressure="mb" speed="km/h"/>
<yweather:wind chill="11"   direction="190"   speed="9.66" />
<yweather:atmosphere humidity="88"  visibility="4.01"  pressure="982.05"  rising="0" />
<yweather:astronomy sunrise="7:26 am"   sunset="5:58 pm"/>
<image>
<title>Yahoo! Weather</title>
<width>142</width>
<height>18</height>
<link>http://weather.yahoo.com</link>
<url>http://l.yimg.com/a/i/us/nws/th/main_142b.gif</url>
</image>
<item>

<title>Conditions for Valparaiso, CI at 6:00 pm CLT</title>
<geo:lat>-32.78</geo:lat>
<geo:long>-71.53</geo:long>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html</link>
<pubDate>Tue, 11 May 2010 6:00 pm CLT</pubDate>
<yweather:condition  text="Fog"  code="20"  temp="11"  date="Tue, 11 May 2010 6:00 pm CLT" />
<description><![CDATA[
<img src="http://l.yimg.com/a/i/us/we/52/20.gif"/><br />
<b>Current Conditions:</b><br />
Fog, 11 C<BR />
<BR /><b>Forecast:</b><BR />
Tue - Cloudy. High: 20 Low: 9<br />
Wed - Partly Cloudy. High: 20 Low: 9<br />
<br />
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html">Full Forecast at Yahoo! Weather</a><BR/><BR/>
(provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/>
]]></description>
<yweather:forecast day="Tue" date="11 May 2010" low="9" high="20" text="Cloudy" code="26" />
<yweather:forecast day="Wed" date="12 May 2010" low="9" high="20" text="Partly Cloudy" code="30" />
<guid isPermaLink="false">CIXX0026_2010_05_11_18_00_CLT</guid>
</item>

</channel>
</rss><!-- api4.weather.ac4.yahoo.com compressed/chunked Wed May 12 06:05:42 PDT 2010 -->

We can observe that there are two different name spaces, yweather and geo. We need just those names under yweather. In particular we use yweather:condition, this element holds the current weather information on its attributes.

JSON version

The php goes as follows

<?php
//First send the corresponding headers
header("Content-type= application/json");
//get the XML data from the URL
$xml = simplexml_load_file("http://weather.yahooapis.com/forecastrss?w=349861&u=c");
//obtaining the namespace for yweather
$yweather =$xml->channel->item->children("http://xml.weather.yahoo.com/ns/rss/1.0");

//traverse the SimpleXML object and store in a associative array
foreach( $yweather->condition->attributes() as $k=>$attr)
     $condition[$k] = $attr;

//JSON enconde and print
print(json_encode($condition));
?>

On the html page we receive the information in the JSON format and passed to the openInfoWindowHtml() method of google maps.

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADI36Gd6uqs4OgrvF2FK3TRS3WQwwXk35PFrPy_oZlvjggyWGmxSJfJA31Kd06D9lQVQJpKvCzFGD3g"
            type="text/javascript"></script>
    <script type="text/javascript">

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
   //a marker placed in our university 
    var center = new GLatLng(-33.033276,-71.594682);
    map.setCenter(center, 15);

    var marker = new GMarker(center, {draggable: true});

   		
		//Adding Yahoo! Weather
		
		GEvent.addListener(marker, "click", 
		function(){
        // create the Google version of XMLHttpRequest object
			var request = GXmlHttp.create();
			request.open("GET", "weather2.php", true);
			
			request.onreadystatechange = function() {
				
				if(request.readyState == 4 && request.status == 200){
					
					var xhtml = "<b>Yahoo! Weather</b>";
					xhtml += "<br />";
					
					var yw_json = request.responseText;
                      //dirty JSON evaluation
					var yw = eval('(' + yw_json + ')');
					
					xhtml = xhtml + "temperatura =" + yw.temp[0] +" ºC <br />";
					xhtml += yw.date[0];
					marker.openInfoWindowHtml(xhtml);
				}
			}
			//send the request
			request.send(null);
		});
		
		
    map.addOverlay(marker);

  }
}​
   </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 800px; height: 500px"></div>
  </body>
</html>

XML version

The php goes as follows

<?php
//First the corresponding XML headers
header("Content-type: text/xml");
//Jorge sends the location by GET
$w = $_GET["w"];
$url =  "http://weather.yahooapis.com/forecastrss?w=" . $w . "&u=c";
if($xml = file_get_contents($url)){

	$obj = simplexml_load_string($xml);
	$item = $obj->channel->item;
//formatting the XML output
	print("<weather>");
	print("<title>" . $item->title . "</title>");
//getting the namespace
	$child = $item->children("http://xml.weather.yahoo.com/ns/rss/1.0");
	$att = $child->condition->attributes();
	print("<temp>" . $att->text . " " . $att->temp . "ºC</temp>");
	print("</weather>");
}
?>

Jorge’s html file goes like this

<html>
	<head>
	<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzsVe8ueaD3_5_TOp88LiKRTmhXfEnveThyX0qgmXnRV_0BrCwBTi62Ue7Uv5MEgulw1nxTmAQ2jihA" type="text/javascript"></script>
		<script type="text/javascript">
			function load(){
				var map = new GMap2(document.getElementById("map"));

				var point = new GLatLng(-33.05,-71.6);
				var w = 349861;

				map.setCenter(point,13);

				var marker = new GMarker(point);
				map.addOverlay(marker);

				GEvent.addListener(marker,"click",function(){
						var request = GXmlHttp.create();
						request.open("GET","getWeather.php?w=" + w,true);
						request.onreadystatechange = function(){
							if(request.readyState == 4 & request.status == 200){

								var weather = request.responseXML.getElementsByTagName("weather")[0];
								var title = weather.getElementsByTagName("title")[0].firstChild.nodeValue;
								var temp = weather.getElementsByTagName("temp")[0].firstChild.nodeValue;

								var xhtml = "<b>" + title + ":</b> <br />";

								xhtml += "<div align=center><h2>" + temp + "</h2></div>";

								map.openInfoWindowHtml(point,xhtml);
							}
						}
						request.send(null);
					}
					);
			}
		</script>
	</head>
	<body onload="load();">
		<div id="map" style="height:100%; width:100%"> </div>
	</body>

</html>

The main differences with the JSON version are in the request.onreadystatechange handler, where there is a little more code to traverse the XML data. You can check the result here

]]> http://profesores.elo.utfsm.cl/~wcreixell/?feed=rss2&p=70 0