I have written the AJAX script as follows:
I want to display the profile information when onmouseover event is triggered. As I am unable to run this script, kindly any one correct me on this mistake. Thanks in advance.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax Demo...</title>
<style type="text/css">
.box{border:1px solid black;padding:10px}
</style>
<script type="text/javascript" language="JavaScript">
var asyncRequest;
function getContent(url)
{
try
{
asyncRequest=new XMLHttpRequest();
asyncRequest.onreadystatechange = stateChange;
asyncRequest.open('GET',url,true);
asyncRequest.send(null);
}
catch(exception)
{
alert('Request Failed');
}
}
function stateChange()
{
if(asyncRequest.readyState==4 && asyncRequest.status==200)
{
document.getElementById('contentArea').innerHTML=asyncRequest.responseText;
}
}
function clearContent()
{
document.getElementById('contentArea').innerHTML='';
}
</script>
</head>
<body>
<h1>Moue over a player for More Information</h1>
<img src="sachin.jpg" onmouseover='getContent("sachin.html")' onmouseout='clearContent()'/>
<div class="box" id="contentArea"> </div>
</body>
</html>
Comment