DISPLAYING CRICKET PLAYERS PROFILE USING
AJAX
AIM:
To write a program using AJAX for
displaying cricket players profile.
ALGORITHM:
Step
1: Create an XHTML document (AjaxDemo.html) with the following.
Step
2: Insert some images of cricket players.
Step 3: Call the function getContent() with respect to the onmouseover event.
The function accepts an argument that is the URL of another page contains the
information about the player.
Step
4: Call the function clearContent() with respect to the onmouseout event.
Step
5: Within this XHTML document, insert AJAX based JavaScript code with the
following.
i)Create
the object for ActiveXObject (for older versions of browsers such as IE5 and
IE6).
ii) Create the object for XMLHttpRequest
(for modern browsers such as IE7+, Firefox, Chrome, Safari, and Opera).
Step
6: AJAX send the request with the use of send() and open() methods.
Step
7: Receive the response with the use of responseText Property.
Step
8: AJAX Call the function diplayProfile() with respect to the event
onreadystatechange.
PROGRAM:
AjaxDemo.html
<html>
<head>
<title>Ajax
Demo...</title>
<style
type="text/css">
.box{border:1px solid blue;padding:10px}
</style>
<script
type="text/javascript">
var
req;
function
getContent(url)
{
if(window.ActiveXObject)
{
req=new
ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}
req.onreadystatechange=diplayProfile;
req.open('POST',url,true);
req.send(null);
}
function
diplayProfile()
{
if(req.readyState==4)
{
document.getElementById('contentArea').innerHTML=req.responseText;
}
}
function
clearContent()
{
document.getElementById('contentArea').innerHTML='';
}
</script>
</head>
<body
bgcolor="cyan">
<h1>Mouse
over the image for More Information</h1>
<img
src="sachin.jpg" height="95" width="80"
onmouseover='getContent("sachin.html")'
onmouseout='clearContent()'/>
<img
src="dravid.jpg" height="95" width="80" onmouseover='getContent("dravid.html")'
onmouseout='clearContent()'/>
<img
src="kohli.jpg" height="95" width="80"
onmouseover='getContent("kohli.html")'
onmouseout='clearContent()'/>
<img
src="raina.jpg" height="95" width="80"
onmouseover='getContent("raina.html")'
onmouseout='clearContent()'/>
<img
src="yuvi.jpg" height="95" width="80"
onmouseover='getContent("yuvi.html")'
onmouseout='clearContent()'/>
<img
src="veeru.jpg" height="95" width="80"
onmouseover='getContent("veeru.html")' onmouseout='clearContent()'/>
<img
src="dhoni.jpg" height="95" width="80"
onmouseover='getContent("dhoni.html")'
onmouseout='clearContent()'/>
<div
class="box" id="contentArea"/>
</body>
</html>
sachin.html
<html>
<body>
<b>Full
name:</b> Sachin Ramesh Tendulkar<br/><br/>
<b>Born:</b>
April 24, 1973, Bombay (now Mumbai), Maharashtra<br/><br/>
<b>Major
teams:</b> India, Asia XI, Mumbai, Mumbai Indians,
Yorkshire<br/><br/>
<b>Nickname:</b>
Tendlya, Little Master<br/><br/>
<b>Playing
role:</b> Top-order batsman<br/><br/>
<b>Batting
style:</b> Right-hand bat<br/><br/>
<b>Bowling
style:</b> Right-arm offbreak, Legbreak googly
</body></html>
dravid.html
<html>
<body>
<b>Full
name:</b> Rahul Sharad Dravid<br/><br/>
<b>Born:</b>
January 11, 1973, Indore, Madhya Pradesh <br/><br/>
<b>Major
teams:</b> India, Scotland, Asia XI, ICC World XI, Karnataka, Kent,
Marylebone
Cricket Club, Rajasthan Royals, Royal Challengers
Bangalore<br/><br/>
<b>Nickname:</b>
The Wall<br/><br/>
<b>Playing
role:</b> Top-order batsman<br/><br/>
<b>Batting
style:</b> Right-hand bat<br/><br/>
<b>Bowling
style:</b> Right-arm offbreak
</body>
</html>
kohli.html
<html>
<body>
<b>Full
name:</b> Virat Kohli<br/><br/>
<b>Born:</b>November
5, 1988, Delhi<br/><br/>
<b>Major
teams:</b>India, Delhi, India Red, India Under-19s, Royal Challengers
Bangalore<br/><br/>
<b>Playing
role:</b>Middle-order batsman<br/><br/>
<b>Batting
style:</b>Right-hand bat<br/><br/>
<b>Bowling
style:</b>Right-arm medium
</body>
</html>
raina.html
<html>
<body>
<b>Full
name:</b> Suresh Kumar Raina<br/><br/>
<b>Born:</b>November
27, 1986, Muradnagar, Ghaziabad, Uttar Pradesh<br/><br/>
<b>Major
teams:</b>India, Chennai Super Kings, India Blue, India Under-19s,
Indian Board President's XI, Rajasthan Cricket Association President's XI,
Uttar Pradesh, Uttar Pradesh Under-16s<br/><br/>
<b>Playing
role:</b>Middle-order batsman<br/><br/>
<b>Batting
style:</b>Left-hand bat<br/><br/>
<b>Bowling
style:</b> Right-arm offbreak
</body>
</html>
yuvi.html
<html>
<body>
<b>Full
name:</b>Yuvraj Singh<br/><br/>
<b>Born:</b>December
12, 1981, Chandigarh<br/><br/>
<b>Major
teams:</b>India, Asia XI, Kings XI Punjab, Pune Warriors, Punjab,
Yorkshire<br/><br/>
<b>Playing
role:</b>Middle-order batsman<br/><br/>
<b>Batting
style:</b>Left-hand bat<br/><br/>
<b>Bowling
style:</b>Slow left-arm orthodox
</body>
</html>
veeru.html
<html>
<body>
<b>Full
name:</b>Virender Sehwag<br/><br/>
<b>Born:</b>October
20, 1978, Delhi<br/><br/>
<b>Major
teams:</b>India, Asia XI, Delhi, Delhi Daredevils, ICC World XI, India
Blue, Leicestershire, Rajasthan Cricket Association President's
XI<br/><br/>
<b>Playing
role:</b>Top-order batsman<br/><br/>
<b>Batting
style:</b>Right-hand bat<br/><br/>
<b>Bowling
style:</b>Right-arm offbreak
</body>
</html>
dhoni.html
<html>
<body
bgcolor="cyan">
<b>Full
name:</b> Mahendra Singh Dhoni<br/><br/>
<b>Born:</b>July
7, 1981, Ranchi, Bihar (now Jharkhand)<br/><br/>
<b>Major
teams:</b>India, Asia XI, Bihar, Chennai Super Kings,
Jharkhand<br/><br/>
<b>Playing
role:</b>Wicketkeeper batsman<br/><br/>
<b>Batting
style:</b>Right-hand bat<br/><br/>
<b>Bowling
style:</b>Right-arm medium
</body>
</html>
RESULT:
Thus the program using AJAX for displaying
cricket players profile is written and output is verified.
|
Tuesday, January 29, 2013
DISPLAYING CRICKET PLAYERS PROFILE USING AJAX
DISPLAYING PLAYER RANKING USING XML AND XSLT
DISPLAYING PLAYER RANKING USING
XML AND XSLT
AIM:
To write the programs using XML and XSLT for displaying player ranking
details.
ALGORITHM:
Step
1: Create an XML document (rank.xml) that contains the markup tags such as
<rank>, <name>, and <country>.
Step
2: Create an XSL document (rank.xsl) that defines the style to display an XML
document.
Step
3: Associate style sheet (XSL) with XML using the markup
<?xml-stylesheet>
Step
4: Load the XML document (rank.xml) in the browser
PROGRAM:
rank.xml
<?xml
version="1.0" encoding="UTF-8"?>
<?xml-stylesheet
type="text/xsl" href="rank.xsl"?>
<rankInfo>
<player>
<rank>1</rank>
<name>H.M.Amla</name>
<country>SA</country>
</player>
<player>
<rank>2</rank>
<name>A.B.De
Villiers</name>
<country>SA</country>
</player>
<player>
<rank>3</rank>
<name>V.Kohli</name>
<country>IND</country>
</player>
<player>
<rank>4</rank>
<name>K.C.Sangakkara</name>
<country>SL</country>
</player>
<player>
<rank>5</rank>
<name>M.S.Dhoni</name>
<country>IND</country>
</player>
</rankInfo>
rank.xsl
<?xml
version="1.0" encoding="UTF-8"?>
<xsl:transform
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template
match="/">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student
Details - Transformation</title>
</head>
<body>
<table
border="1">
<caption>ICC
Player Rankings</caption>
<tr>
<th>Rank</th><th>Name</th><th>Country</th>
</tr>
<xsl:for-each
select="/rankInfo/player">
<tr>
<td><xsl:value-of
select="rank"/></td>
<td><xsl:value-of
select="name"/></td>
<td><xsl:value-of
select="country"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:transform>
RESULT:
|
Subscribe to:
Posts (Atom)