画像の上にマウスを置いたときに、AJAX を使用して HTML コンテンツを表示しようとしています。私のコードは良さそうですが、うまくいかないようです。deakin-campus / discover-deakin は、表示しようとしている html ページです。
以下のコードにはコンテンツが表示されませんが、コード全体にアラートを追加すると、html テキストが表示されます。
<?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>
<head>
<script type="text/javascript" >
var asyncRequest;
function getContent(url)
{
try
{
asyncRequest = new XMLHttpRequest();
asyncRequest.open( 'GET', url, true );
asyncRequest.send(null);
asyncRequest.onreadystatechange = stateChange();
}
catch (exception)
{
alert("error");
}
}
function stateChange()
{
if (asyncRequest.readyState == 4 && asyncRequest.status == 200)
{
document.getElementById('ContentArea').innerHTML= asyncRequest.responseText;
}
}
function clearContent()
{
document.getElementById('ContentArea').innerHTML = '';
}
</script>
</head>
<body>
<img src="deakin-campus.jpg" width="71" height="71"
onmouseover = 'getContent("deakin-campus.html")'
onmouseout = 'clearContent()' />
<img src="discover-deakin.jpg" width="71" height="71"
onmouseover = 'getContent("discover-deakin.html")'
onmouseout = 'clearContent()' />
<div id="ContentArea"> </div>
</body>
</html>