Tuesday, January 29, 2013

DISPLAYING CRICKET PLAYERS PROFILE USING AJAX

      
        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.
                  Thus the web services and database is implemented and output is verified.

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:
      Thus the programs using XML and XSLT for displaying player ranking details is written and output is verified.