您可以使用此脚本代替frames的工作，当用户点击指定链接是，链接地址的内容将在页面内显示，网页也不会刷新，如果链接地址不存在，则会显示一个友好的提示信息
查看演示页面 View Demo 查看全部代码 View Code
创建一个JS文件，ajax_navagation.js
粘贴一下代码到js文件
var please_wait = null;
function open_url(url, target) {
if ( ! document.getElementById) {
return false;
}
if (please_wait != null) {
document.getElementById(target).innerHTML = please_wait;
}
if (window.ActiveXObject) {
link = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
if (link == undefined) {
return false;
}
link.onreadystatechange = function() { response(url, target); }
link.open("GET", url, true);
link.send(null);
}
function response(url, target) {
if (link.readyState == 4) {
document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the fallowing errorcode: " + link.status;
}
}
function set_loading_message(msg) {
please_wait = msg;
}
在网页<head>区添加以下代码
<script type="text/javascript" src="ajax_navagation.js"></script>
在网页<body>区添加以下代码
<table>
<tr>
<td valign=top width=150>
<H5>My Navagation links</H5>
<a href="javascript:void(0)" onclick="open_url('page-1.html','my_site_content');">Go to page 1</a><br>
<a href="javascript:void(0)" onclick="open_url('page-2.html','my_site_content');">Go to page 2</a><br>
<a href="javascript:void(0)" onclick="open_url('page-3.html','my_site_content');">Go to page 3</a><br>
<a href="javascript:void(0)" onclick="open_url('page-4.html','my_site_content');">Go to page 4</a><br>
<a href="javascript:void(0)" onclick="open_url('page-5.html','my_site_content');">Go to Page 5</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>
网页调用了page-1.html,Page-2.html等页面的内容显示，如果页面不存在则返回一个友好信息
