公司一个旧的网站要改成Ajax的
结构很简单,上下左右的内容都是不变的,只有中间的内容变化。
因为不想改动太多的文件,所以想了个办法偷懒,修改过程如下:
网站文件结构大致想同,每个前台页面都引用了top.cfm和copyright.cfm
top.cfm里包含了left.cfm,用来显示左边栏,copyright.cfm里包含了right.cfm文件,用来显示右边栏。
所以先将top.cfm和copyright.cfm里的内容删掉,每个页面显示出来就只留下了中间那一部分。
首页中用不id为html_content的层显示活动内容.在首页中加入一段JS代码:
function formatlink()
{
var links=document.getElementsByTagName("A");
for(i=0;i<links.length;i++){
links[i].onclick=function(){getPage( this.href );return false;};
}
}
将所有链接的onclick事件定义为getPage函数
这样,当点击链接时,不会转向链接指向的地址,而是执行这个函数
这个函数就是读取指向地址的网页内容,然后显示到html_content层中去的,实际代码如下:
function getPage(theURL) { //v2.0
var content=document.getElementById("html_content");
content.innerHTML='<div id="tip"><img src="/images/loading.gif" /> Loading...</div>';
var xmlhttp=obj();
//定义XMLHttpRequest对象的事件处理程序
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
//关闭显示条
content.innerHTML="";
if(xmlhttp.status==200){
//当加载成功时将内容显示于页面
content.innerHTML=xmlhttp.responseText;
formatlink();
window.location.hash=escape(theURL);
}else{
//否则弹出错误信息
getPage("/Error.cfm?id="+xmlhttp.status);
}
}
}
//创建一个连接
xmlhttp.open('get',theURL);
xmlhttp.send(null);
}
就这样,网站就改了大部分了,余下的工作就是把那个有表单的页面改一下就可以了,网站的Ajax化就完成了。