163 AJAX Tab

所属分类: 网络编程 / AJAX相关 阅读数: 1552
收藏 0 赞 0 分享

复制代码 代码如下:

// 163 AJAX Tab  
// update 2006.10.18 
// 增加鼠标延迟感应特性。 
// update 2006.10.8 
// A 标签 href 属性将保持原有HTML功能。增加urn属性为AJAX Load 路径。 
// update 2006.10.11 
// 修正IE5.0 undefined 未定义错误,增加脚本错误屏蔽 
var Browser = new Object(); 
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined'); 
Browser.isIE = window.ActiveXObject ? true : false; 
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1); 
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1); 
if (Browser.isFirefox) { // entend Event Mod for FireFox 
    extendEventObject(); 

function extendEventObject() { 
    Event.prototype.__defineGetter__("srcElement", function () { 
        var node = this.target; 
        while (node.nodeType != 1) node = node.parentNode; 
        return node; 
    }); 

    Event.prototype.__defineGetter__("fromElement", function () { 
        var node; 
        if (this.type == "mouseover") 
            node = this.relatedTarget; 
        else if (this.type == "mouseout") 
            node = this.target; 
        if (!node) return; 
        while (node.nodeType != 1) node = node.parentNode; 
        return node; 
    }); 

    Event.prototype.__defineGetter__("toElement", function () { 
        var node; 
        if (this.type == "mouseout") 
            node = this.relatedTarget; 
        else if (this.type == "mouseover") 
            node = this.target; 
        if (!node) return; 
        while (node.nodeType != 1) node = node.parentNode; 
        return node; 
    }); 

function IsChild(cNode,pNode){ 
    while(cNode!=null){ 
        cNode=cNode.parentNode; 
        if(cNode==pNode) return true;  
    } 
    return false; 


var ajccache=new Object(); 
var waitInterval; 
var tempref; 
var MouseDelayTime=150;//鼠标感应延迟300毫秒 
function getTBprefixName(str,sta){ 
    if(str.indexOf("active")!=-1 || str.indexOf("normal")!=-1) str=str.substr(6); 
        else if(str.indexOf("over")!=-1) str=str.substr(4); 
            else str=""; 
    return sta+str; 

function startajaxtabs(){ 
    for(var i=0;i<arguments.length;i++) 
    { 
        var ulobj=document.getElementById(arguments[i]); 
            ulist=ulobj.getElementsByTagName("li");             
            for(var j=0;j<ulist.length;j++) 
            { 
                var thelist=ulist[j]; 
                if(thelist.parentNode.parentNode!=ulobj) continue;//只有第一层li有效 fixed 2006.9.29 
                var ulistlink=thelist.getElementsByTagName("a")[0]; 
                var ulistlinkurl=ulistlink.getAttribute("urn"); 
                var ulistlinktarget=ulistlink.getAttribute("rel"); 
                thelist.setActive=function(bactive){ 
                    if(bactive){ 
                        this.status="active"; 
                        this.className=getTBprefixName(this.className,"active"); 
                    }else{ 
                        this.status="normal"; 
                        this.className=getTBprefixName(this.className,"normal"); 
                    } 
                } 
                thelist.LoadTab=function(){ 
                    this.setActive(true); 
                    this.parentNode.parentNode.activetab.setActive(false); 
                    this.parentNode.parentNode.activetab=this;                     
                    var ulistlink=this.getElementsByTagName("a")[0]; 
                    loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel")); 
                } 
                thelist.onmouseover=function(aEvent){ 
                    var myEvent = window.event ? window.event : aEvent; 
                    var fm=myEvent.fromElement; 
                    if(IsChild(fm,this) || fm==this) return;//过滤子元素event 
                    if(this.status=="active") return; 
                    tempref=this; 
                    clearTimeout(waitInterval); 
                    waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime); 
                } 

                thelist.onmouseout=function(aEvent){ 
                    var myEvent = window.event ? window.event : aEvent; 
                    var em=myEvent.toElement; 
                    if(IsChild(em,this) || em==this) return; //过滤子元素event 
                    if(this.status=="active") return; 
                    clearTimeout(waitInterval); 
                } 

                if(ulistlinkurl.indexOf("#default")!=-1){ 
                    thelist.setActive(true); 
                    ulobj.activetab=thelist; 
                    ajccache[ulistlinkurl]=getElement(ulistlinktarget).innerHTML; 
                }else{ 
                    thelist.setActive(false); 
                } 

            } 
        if(ulobj.activetab==null) ulobj.activetab=ulist[0]; 
    } 


function getXmlhttp() 

    var http_request; 

    if(window.XMLHttpRequest) {  
        http_request = new XMLHttpRequest(); 
        if (http_request.overrideMimeType) { 
            http_request.overrideMimeType("text/xml"); 
        } 
    } 
    else if (window.ActiveXObject) {  
        try { 
            http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
            try { 
                http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e) {} 
        } 
    } 
    if (!http_request) {  
        window.alert("can't create XMLHttpRequest object."); 
        return null; 
    }     
    return http_request; 


function loadAJAXTab(url,contentid){ 
    var ocontent=getElement(contentid); 
    if(ajccache[url]==null) { 
        var xhttp=getXmlhttp();         
            xhttp.onreadystatechange=function(){ 
                if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1)) 
                {                     
                    ocontent.innerHTML=xhttp.responseText; 
                    ajccache[url]=ocontent.innerHTML; 
                } 
            } 
        xhttp.open("GET",url,true); 
        xhttp.send(null); 
    }else{ 
        ocontent.innerHTML=ajccache[url]; 
    } 

window.onerror=function(){return true}

具体使用方法,看www.163.com用的

更多精彩内容其他人还在看

PHP+AJAX无刷新实现返回天气预报数据

天气数据是通过采集中国气象网站的。本来中国天气网站也给出了数据的API接口,接下来为大家介绍下用php来写一个天气预报的模块,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

jQuery的ajax传参巧用JSON使用示例(附Json插件)

jQuery的ajax调用很方便,传参的时候喜欢用Json的数据格式,使用示例代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax jquery 异步表单验证示例代码

异步表单验证想必大家早已如雷贯耳,本文为大家详细讲述下ajax jquery实现异步表单验证,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

AJAX如何接收JSON数据示例介绍

如何使用AJAX返回JSON数据,就是dataType,当你设置json后返回的json字符串传递到客户端就是JSON对象了,示例如下,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

ajax局部刷新一个div下jsp内容的方法

局部刷新某个div下的jsp可以通过setInterval或者是setTimeout来轻松实现,具体如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax交互Struts2的action(客户端/服务器端)

本文为大家探讨下ajax交互Struts2的action并有客户端及服务器端代码,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

Ajax工作原理深入理解

ajax是异步的意思,它有别于传统web开发中采用的同步的方式。异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的
收藏 0 赞 0 分享

Ajax方式删除表格一行数据示例代码

Ajax方式删除信息在某些情况下还是蛮实用的,下面为大家具体介绍下Ajax方式如何删除表格一行数据,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

Ajax叠加(Ajax返回数据用Ajax发出)示例代码

把参数用Ajax发送到数据库进行查询然后用Ajax将数据发送到数据库签到表,于是有了下面的代码,感兴趣的朋友可以了解下,希望对大家学习ajax有所帮助
收藏 0 赞 0 分享

Ajax长连接项目案例

所谓的长连接,就是不断去发送请求,把请求阻塞在服务器端,每次超过请求时间就去重新发送请求,下面以一个实例为大家详细介绍下,感兴趣的朋友可不要错过了哈
收藏 0 赞 0 分享
查看更多