The the custom JavaScript object player is defined as below.

function player () {
	
	this.name = '';
	this.serving = false;
	this.gamepoint = 0;
	this.sets = new Array();
	
	this.toString = function() {
		return (this.name + ": " + (this.serving ? 'Serving' : 'Facing') + "\n" + this.sets + "\n" + this.gamepoint);
	}
}

The sets member variable is an array.

Next comes the import updateScoreBoard function

function updateScoreBoard() {
	sc = xmlScore;
	pDOM = sc.getElementsByTagName("player");
	players = new Array();
	for (i=0; i<pDOM.length; i++) {
		players[i] = new player(pDOM[i].getAttribute("name"));
		players[i].name = pDOM[i].getAttribute("name");
		if (pDOM[i].getAttribute("serving") == 1) {
			players[i].serving = true;
		}
		// Now get the match sets for the players
		setDOM = pDOM[i].getElementsByTagName("set");
		for (j=0; j<setDOM.length; j++) {
			players[i].sets[j] = setDOM[j].childNodes[0].nodeValue;

			// Now get the curent Game point for the players
			players[i].gamepoint = pDOM[i].getElementsByTagName("gamepoints")[0].childNodes[0].nodeValue;
		}


//		alert(players[i].toString());
	}

	// Now that all data has been gathered...
	document.getElementById("player1").innerHTML = players[0].name;
	document.getElementById("matchplayer1").innerHTML = players[0].name;
	document.getElementById("player2").innerHTML = players[1].name;
	document.getElementById("matchplayer2").innerHTML = players[1].name;

	//Serving
//	document.getElementById("serving1").innerHTML = (players[0].serving)?'o':'';
//	document.getElementById("serving2").innerHTML = (players[1].serving)?'o':'';

	// Sets
	document.getElementById("setplay11").innerHTML = players[0].sets[0];
	document.getElementById("setplay12").innerHTML = players[0].sets[1];
	document.getElementById("setplay13").innerHTML = players[0].sets[2];
	document.getElementById("setplay21").innerHTML = players[1].sets[0];
	document.getElementById("setplay22").innerHTML = players[1].sets[1];
	document.getElementById("setplay23").innerHTML = players[1].sets[2];

	// Game points
	document.getElementById("gamepoints1").innerHTML = players[0].gamepoint;
	document.getElementById("gamepoints2").innerHTML = players[1].gamepoint;
}
</script>

Notice the players variable is an array of player object. The traversing of XML content is easy. If you are unable to understand JavaScript DOM methods check following links

• DOM Reference
• Traversing an HTML table DOM
• DOM and JavaScript

You can find a full working example here, Live Score Board

Let us start with a script tag that will enclose all the fundooo script. You can save in a .js file as well if you want…

The httpObj is the XMLHttpRequest object, and xmlScore is the response XMLDocument. I’ve created a player object class which is used by the tplayers variable.

<script type="text/javascript">
var httpObj, xmlScore, players;
function getScore(round, category, sex, player) {
	url = "http://localhost/score_server.php";
	url += "?round="+round+"&category="+escape(category)+
		"&sex="+escape(sex)+"&player="+escape(player)+"&rand="+new Date() ;
	httpObj = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
    	try {
			httpObj = new XMLHttpRequest();
        } catch(e) {
			httpObj = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
       	try {
        	httpObj = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		httpObj = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		httpObj = false;
        	}
		}
    }
	if(httpObj) {
		httpObj.onreadystatechange = processReqChange;
		httpObj.open("GET", url, true);
		httpObj.send(null);

		timerID = setTimeout("getScore('"+round+"', '"+category+"', '"+sex+"', '"+player+"')",30000);
	}
}

The getScore function requires params, that are need for the server. If you notice at the end of the function, the function calls itself again after 30 sec (30,000 msec). Assuming one serve takes half a min or so.

We define the function that will handle the process’ change of status, i.e. when the status turns 4, it assigns xmlScore the XMLDocument object.

function processReqChange() {
    // only if req shows "loaded"
    if (httpObj.readyState == 4) {
        // only if "OK"
        if (httpObj.status == 200) {
            xmlScore = httpObj.responseXML;
			updateScoreBoard();
        } else {
            alert("There was a problem retrieving the XML data:\n" +
                httpObj.statusText);
        }
    }
}

Many a times you may have come across a fancy “Live Score Board”, recently (as of writing) you may have seen the “Java Applet”ized score board. If you want to have a similar such app, but don’t want to get into Java and applets. You may wonder.

But there is a solution, Asynchronous Javascript HTTP Request calls, you may commonly now it AJAX, or famous as XMLHttpRequest

… and make something like

You can find working example here, Live Score Board

For your live Score Board App, you need following .

• A Score Server, which gives scores in a specific format, ideally XML
• A Client that requests the Server, and displays the parsed XML

We need a Server or a web Service, that will give us the requested data. We’ll use XML to output the response of the server.
We’ll structure the XML as follows

<?xml version="1.0"?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>30</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>15</gamepoints>
	</player>
</match>
</scores>

Assume that we have a database, which is fed continuously. Say we access the above data using the URL as.. http://www.ruturaj.net/tennis/score_server.php?round=semifinal&category=singles&sex=women&player=hingis

Here is a test score_server.php script for testing.

<?php

$array_points = array(15, 30 , 40);
$gamepoints1 = array_rand($array_points, 1);
$gamepoints2 = array_rand($array_points, 1);
$xml = '<?xml version="1.0" ?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>'.$array_points[$gamepoints1].'</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>'.$array_points[$gamepoints2].'</gamepoints>
	</player>
</match>
</scores>
';

header("Content-Type: text/xml");
echo ($xml);
?>