XMLHttpRequest响应OK但仍然无法填充div

Question

我有一个带有ajax的简单index.html文件。我想要实现的是当我将鼠标悬停在（onmouseover）图像上时，特定的page1.html被加载到div上，当我将鼠标移出图像时，div需要被清除。

我得到正确的响应（在浏览器的响应标题中显示）但仍无法在div中填充该数据。我在哪里做错了。

＆＃13;

＆＃13;

<script type="text/javascript">
var xhr;
function setContent(url){
	xhr = new XMLHttpRequest(); // create request object

	xhr.onreadstatechange = stateChange; // register event handler
	xhr.open('GET', url, true); // prepare the request
	xhr.send(null); // send the request
}
function stateChange(){
	if(xhr.readyState == 4 && xhr.status == 200){
		alert(xhr.responseText);
		document.getElementById("contentArea").innerHTML = xhr.responseText;
	}
}
function clearContent(){
	document.getElementById("contentArea").innerHTML = "";
}
</script>

＆＃13;

<style type="text/css">
img{
	height: 100px;
	width: 100px;
}

</style>

＆＃13;

<img src="http://test.deitel.com/examples/jsfp/ajax/thumbs/jhtp7.jpg" onmouseover="setContent('page1.html');" onmouseout="clearContent()">
<div id="contentArea"></div>

＆＃13;

＆＃13;

＆＃13;