• 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化就完成了。

  • 相关阅读:
    记录操作日志
    sql优化【转】
    JS事件
    MFC电子词典
    控制台电子词典---链表
    控制台电子词典
    贪吃蛇
    十六进制转化
    进程线程
    面试体复习
  • 原文地址:https://www.cnblogs.com/toosuo/p/853984.html
Copyright © 2020-2023  润新知