Ajax,网站改版的一种方法

公司一个旧的网站要改成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化就完成了。

原文地址:https://www.cnblogs.com/toosuo/p/853984.html