Google Pages 确实好用，而且提供很多的模版，可以很快就建立一个比较漂亮的网站，不过其面向的是初级的用户，不需要知道太多网页编程，所以一些比较实用的功能并不能实现。比如就不能象 PHP 一样通过include 一个文件来实现保持导航栏的一致性。如果每次都是手工来增加，这样第一很不方便，而且很容易出错。后来看到 Google Pages 完全支持Javascript 之后，这几天，正在学习 Ajax，于是想是否可以利用 Ajax 的一些最基本的原理来实现导航栏的一致性，通过实验发现完全可以！下面我就谈谈我实现的过程，希望对您在使用 Google Pages 中能够有一些帮助。
第一步：在本地制作导航文件，命名为NAV，其大概的格式如下：
其实就是一个很简单的导航文件。非常简单，这里就不详讲了。制作好之后就上传到 Google Pages。
第二步，创建NAV.JS文件。
var xmlHttp; /*XMLHttpRequest对象 */
function createXMLHttpRequest(){
if (window.ActiveXObject){ /*在IE下初始化XMLHttpRequest对象 */
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”)
}
else if(window.XMLHttpRequest){ /*在Firefox下初始化XMLHttpRequest对象 */
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange; /* 设置回调函数为handleStateChange. */
xmlHttp.open(”GET”, “nav”, true); /*通过get方法来请求目标NAV，并且设置为异步完成请求*/
xmlHttp.send(null);
}
function handleStateChange(){ /*XMLHttpRequest对象内部状态每次有变化时候都会调用 handleStateChange 函数。*/
if (xmlHttp.readyState == 4 ){ /*请求完成*/
if (xmlHttp.status == 200 ){ /*服务器的HTTP状态为200，既OK */
document.getElementById(”g_description”).innerHTML = “
邓鸿华的个人主页
“;
document.getElementById(”nav”).innerHTML = xmlHttp.responseText;
document.getElementById(”g_footer”).innerHTML = ‘
Copyright © 2006/7/8 ~ 保留部分权利
‘;
}
}
}
window.onload = function (){
startRequest();
}
这个是最基本的AJAX语句过程。完整的解释可以参考《Foundations of Ajax》这本书。
第三步，当你创建每个Google Pages时，在左边（或者右边的导航栏）加上以下的HTML代码，
/* 在导航文件没有被导入之前显示红色 Loading… 效果 */
以上三步就是利用Ajax原理实现在 Google Pages 在保持导航栏内容一致的方法，最主要在于利用NAV.JS中最后onload调用startRequest函数来异步调用NAV文件内容作为导航栏的内容，并且同时修改副标题和页脚。这样子最大的好处，如果导航文件需要修改，只要修改Nav文件就可以了。
PS：另外也可以通过Javascript LoadXML来实现以上功能，具体如下，没有具体测试过，个人更喜欢用Ajax方法。
var xmlDoc;
function loadXML(){
//load xml file
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject(”Microsoft.XMLDOM”);
xmlDoc.async=false;
xmlDoc.load(”NAV.XML”);
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument(”",”",null);
xmlDoc.load(”NAV.XML”);
}
else
{
alert(’Your browser cannot handle this script’);
}
}
function getNav(){
loadXML();
var out = “”;
var items = xmlDoc.getElementsByTagName(”item”);
var currentItem = “”;
for (var i=0; i
var itemTitle = currentItem.getElementsByTagName("title")[0].childNodes[0].nodeValue;
var itemLink = currentItem.getElementsByTagName("Link")[0].childNodes[0].nodeValue;
out += "
“;
}
document.getElementById(”NAV”) = out;
}
window.onload = function (){
getNav();
}
其中NAV.XML文件为：
LoadXML的方法我没有经过完整测试，可能还存在一些问题。如果有问题请您告诉我。
