我们知道，常见的导航一般就是 <a href="index.php" target="_blank" rel="external nofollow" >首页</a> 这样的，点击标签就转到下一个页面。最近在学习Ajax，于是就想到做一个无刷新的导航来练习一下，操作如下：
新建一个index.html,代码：
<html>
<head>
<title>Yizero Ajax learning</title>
<meta http-equiv="content-type" content="text/html;charset = utf-8"/>
<mce:script type="text/javascript"><!--
var http_request = false; //实例化一个xmlhttp对象,由于IE和其他浏览器的差异，需要先判断用户的浏览器再去执行相应的实例化操作
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
function makerequest(serverPage,objID){
var obj = document.getElementById(objID); //获取需要显示内容的div
http_request.open("GET",serverPage); //以get的方式打开指定的页
http_request.onreadystatechange = function(){
if(http_request.readyState == 4 ){ //如果页面已经完全加载
obj.innerHTML = http_request.responseText; //在指定的div中显示加载的内容
}
}
http_request.send(null);
}
// --></mce:script>
<body onLoad="makerequest('content1.html','hw')">
<div align = "center">
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick = "makerequest('content1.html','hw'); return false;">Page1</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick = "makerequest('content2.html','hw'); return false;">page2</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick = "makerequest('content3.html','hw'); return false;">page3</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick = "makerequest('content4.html','hw'); return false;">page4</a>
<div id = "hw"></div>
</div>
</body>
</html>
然后再新建相应的content1.html,content2.html,content3.html,content4.html最好写上不同的内容以示区分。
另外需要说明的是，http_request.responseText这个返回的内容是以utf-8编码的，而如果我们用Dreamweaver去写html,它默认的是gb2312编码格式，这样就会导致乱码的出现。我们可以手动修改Dreamweaver的编码格式：修改-->页面属性-->标题/编码-->编码，然后选择utf-8即可。
see Yizero by yizero.com
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)