将鼠标悬停在图像上时,我正在尝试使用 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>