我們知道，常見的導航一般就是 <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=)