AJAX 鼠标悬停在图像上，显示 HTML 内容答案

【问题标题】：AJAX Mouse Over Image, Display HTML ContentAJAX 鼠标悬停在图像上，显示 HTML 内容
【发布时间】：2025-12-20 13:15:16
【问题描述】：

当鼠标悬停在图像上时，我正在尝试使用 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">&nbsp;</div>
</body>
</html>

【问题讨论】：

标签： javascript html ajax image mouseover

【解决方案1】：

传递函数引用...所以没有“()”。

asyncRequest.onreadystatechange = stateChange;

在调用 .send 方法之前也要这样做。

【讨论】：