读书人

AJAX资料预览小例子

发布时间: 2012-10-13 11:38:17 作者: rapoo

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

读书人网 >Ajax

热点推荐