Here comes the cool part now. The client! using the famous XMLHttpRequest

The basic logic of creating the client is this

• Make asynchronous calls to the server to fetch the match data
• Parse the XML data
• Using DOM update the content of the Score board
• And obviously add a timer to refresh the asynchronous HTTP calls

It should look something like this.

The first time you load the page (most probably it should be a small pop-up window) you can write the basic HTML…
and the main HTML would be something like this.

<div id="scoreboard">

<p style='font-weight:bold;'>
<span id="matchsex">Womens</span> <span id="matchround">Semifinal</span>: 
<span id="player1">Hingis</span> vs <span id="player1">Sharapova</span> 
(<span id="elapsedtime">1.5h</span>)</span> 
</p>

<table style="border-collapse:collapse;" border="1" bordercolor="#888888" 
cellspacing="0" cellpadding="5">
	<tr>
		<td align="left" > </td>
		<td colspan="3" align="left" >Sets</td>
		<td align="left" >Game</td>
	</tr>
	<tr>
		<td align="left" id="matchplayer1">Hingis </td>
		<td align="center" id="setplay1">6</td>
		<td align="center" id="setplay2">3</td>
		<td align="center" id="setplay3">4</td>
		<td align="center" id="gamepoints1">30</td>
	</tr>
	<tr>
		<td align="left" id="matchplayer2">Sharapova</td>
		<td align="center" id="setplay1">4</td>
		<td align="center" id="setplay2">6</td>
		<td align="center" id="setplay3">2</td>
		<td align="center" id="gamepoints2">15</td>
	</tr>
</table>

</div>

Let us consider some important IDs (the id attributes) that we’ve used

• matchsex: To set the type of match women’s, men’s, etc.
• matchround: Quarter final, semi final, etc
• player1, player2: Player’s names id
• elapsedtime: Elapsed Time
• matchplayer1, matchplayer2: Score Board’s Player’s name
• serving: If the player is serving
• setplay1, setplayx: Playerx’s set
• gamepoints1, gamepoints2: Player1 and 2’s gamepoints