问题重现
在编写html页面时,遇到一个问题,在某个站点中绝大部分页面都拥有着相同的导航栏,并且这个导航栏中的菜单和连接,将会不断的改变。虽然说,可以在每次改变以后进行逐个页面的更改,但是也显得十分麻烦,而且容易落下某个页面,造成不便。
解决方法
其实采用的是Ajax的方法来解决这个问题的。
在html中,将相同的部分提取出来放到另外一个文件当中,如menu.dat:
<ul>
<li>
<a href="001.html">001</a>
</li>
<li>
<a href="002.html">002</a>
</li>
</ul>
然后,修改html文件,将该部分以div来代替,最后使用Ajax获取menu.dat的内容进行替代。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<div id="main_menu"></div>
</header>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("main_menu").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "menu.dat", true);
xmlhttp.send();
</script>
</body>
</html>
其实,不仅仅html可以,jsp也是可以采用相同的方法。而且,在menu.dat中也可以把css标签也可以放进去,最后在html中获取到后也是会处理的。这种方法也不是没有缺点的,例如在这里不可以使用像jsp这种在服务器解析的标签,还比如说struts标签等,如果有需要这些标签的同学建议把html文件中相同的部分另外做个页面,最后直接往里引整个html页面。