AJAX资料预览小例子 _Ajax

AJAX文件预览小例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>LinkText.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--    <link rel="stylesheet" type="text/css" href="previewLinkText.css">-->
	<script type="text/javascript">
	var xhr = false;
	var url;
	var outMsg;
	function hidePreview(){
		document.getElementById("previewArea").style.visibility = "hidden";
	}
	function previewText(evt){
		if(evt.srcElement){
			url = evt.srcElement;
		}
		if(evt.target){
			url = evt.target;
		}
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			if(window.ActiveXObject){
				try{
					xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
				}catch(e){}
			}
		}
		if(xhr){
			xhr.onreadystatechange = showFile;
			xhr.open("POST",url,true);
			xhr.send(null);
		}else{
			outMsg = "couldn't create an XMLHttpRequest!";
			showFile();
		}
	}
	function showFile(){
		var prevWin = document.getElementById("previewArea");
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				outMsg = xhr.responseText;
			}else{
				outMsg = "error!shr status : " + xhr.status;
			}
		}
		prevWin.innerHTML = outMsg;
		prevWin.style.visibility = "visible";
		prevWin.onmouseout = hidePreview;
	}
	</script>
  </head>
  <body>
  <a href = "humor1.htm" onmouseover = "previewText(event)">第一个连接</a><br/><br/>
  <a href = "data/humor1.htm" onmouseover = "previewText(event)">第二个连接</a><br/><br/>
  <a href = "humor1.htm" onmouseover = "previewText(event)">第三个连接</a><br/><br/>
    <div id = "previewArea"></div>
  </body>
</html>
自行建立humor1.htm