Those of you who follow the NHL might remember a Canadian team by the name of the Calgary Flames making a daring attempt at winning the Stanley Cup a few years ago, only
to lose out in the final round after a hard-fought battle. As a rabid Flames fan, I’ve long been bothered with a busy work schedule that keeps me on the Internet, rather than watching the latest game. What if, however, there was a way for my web site to keep me constantly updated of the progress of my hockey game of choice? Well, by combining Ajax with web services, that wish of mine just came true. This chapter will show you how to create code to display hockey scores (as shown in Figure 9-2). Additionally, the code will refresh and get the latest scores every 60 seconds. Figure 9-3 shows the state of the application while it gets the updated scores.
Figure 9-2.Hockey scores updated on the fly—perfect for us developers who (sadly) spend
more time in front of the computer than the TV
Figure 9-3.In order to keep the user informed, you can let them know of the loading process.
Consider the following example, which makes use of Ajax to submit web service requests to a server that houses an XML document containing the scores of hockey sports teams. Listing 9-1 holds the main application that is loaded into the web browser. The scores are displayed and refreshed using the JavaScript code in Listing 9-2. Listings 9-3 and 9-4 show the web server (SOAP) client and server code. The web service provides the real-time scores, while the client retrieves the scores—meaning that they can be dis- played on the page.
Listing 9-1.The Main Script That Shows the Scores (sample 9_1.html)
<!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>Sample 9_1</title>
<script type="text/javascript" src="functions.js"></script> <script type="text/javascript" src="xmlhttp.js"></script> </head>
<body onload="loadthescores('2006-01-23', 'scorescontainer')"> <div class="hockeybox">
<h2>Hockey Scores</h2>
<!-- Load the Ajax response data into here --> <div id="scorescontainer"></div>
</div> </body> </html>
Listing 9-2.The JavaScript Code That Reloads the Scores (functions.js)
//functions.js
//Function to load hockey scores in. function loadthescores(date, container) {
// Let the user know that the scores are loading.
document.getElementById(container).innerHTML = "<b>Loading...</b>"; // Load an Ajax request into the hockey scores area.
processajax('sample9_1client.php?date=' + date, container, 'post', ''); // Then set a timeout to run this function again in 1 minute.
setTimeout("loadthescores('" + date + "', '" + container + "')", 60000); }
Listing 9-3.The SOAP Client Code That Fetches Games from the Web Service
(sample9_1client.php) <?php
//sample9_1client.php
// Determine the location of the SOAP service.
$location = sprintf('http://%s%s/sample9_1server.php', $_SERVER['HTTP_HOST'],
// Connect to the service. try {
$soap = new SoapClient(null, array('location' => $location, 'uri' => '')); // Run the remote procedure and get the list of games. $games = $soap->getHockeyGames($_GET['date']);
}
catch (SoapFault $ex) {
$msg = sprintf('Error using service at %s (%s)', $location, $ex->getMessage()); echo $msg; exit; } ?> <table> <tr> <th colspan="2">Home</th> <th></th> <th colspan="2">Away</th> </tr> <?php if (count($games) == 0) { ?> <tr> <td colspan="5"> No games were found </td>
</tr>
<?php } else foreach ($games as $i => $game) { ?>
<tr<?php if ($i % 2 == 1) { ?> class="alt"<?php } ?>> <td><?= $game['hometeam'] ?> <td><?= $game['homescore'] ?> <td>-</td> <td><?= $game['awayscore'] ?> <td><?= $game['awayteam'] ?> </tr> <?php } ?> </table>
Listing 9-4.The SOAP Web Service Code That Returns Game Scores (sample9_1server.php) <?php
//sample9_1server.php
// Generate some fake game data. $games = array();
$games[] = array('date' => '2006-01-23', 'hometeam' => 'Calgary Flames', 'awayteam' => 'Edmonton Oilers', 'homescore' => rand(1, 5), 'awayscore' => rand(1, 5)); $games[] = array('date' => '2006-01-23',
'hometeam' => 'Los Angeles Kings', 'awayteam' => 'Anaheim Mighty Ducks', 'homescore' => rand(1, 5),
'awayscore' => rand(1, 5)); $games[] = array('date' => '2006-01-24',
'hometeam' => 'Anaheim Mighty Ducks', 'awayteam' => 'Calgary Flames', 'homescore' => rand(1, 5), 'awayscore' => rand(1, 5));
// Return all of the games found for the given date. function getHockeyGames($date)
{
$ret = array();
foreach ($GLOBALS['games'] as $game) { if ($date == $game['date'])
$ret[] = $game; }
return $ret; }
// Create the SOAP server and add the getHockeyGames function to it. $soap = new SoapServer(null, array('uri' => ''));
// Use the request to (try to) invoke the service. if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$soap->handle(); }
else {
echo "Available functions:\n";
foreach ($soap->getFunctions() as $func) { echo $func . "\n";
} } } ?>