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