首页 >> JavaScript >> AJAX教程>> ajax标签导航实例详解教程正文

ajax标签导航实例详解教程

AJAX教程 时间:2008-2-1 

之前整理发表了《XMLHTTPRequest的属性和方法简介》,它ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,是我很久前就写的一个脚本,很实用的(还被很多网站收录了哦),现在拿它来做实例讲解吧!当然个人能力有限,有什么不对的地方还请多包含!

演示地址:http://www.yaohaixiao.com/code/ajaxtab/index.htm

程序打包下载:ajaxtab.rar(185KB)

效果大家看到了,核心功能有:

1.将当前选中标签以特殊的样式显示

2.将异步加载的页面信息显示到指定的DOM节点中

我们来看看处理脚本的代码吧:

ajaxtab.js

<!--
// 判断是否支持ActiveX
var useActiveX=function(){return (typeof ActiveXObject != "undefined");} 
// 判断是否支持DOM
var useDom=function(){return document.implementation && document.implementation.createDocument;}  
// 判断是否支持XMLHttpRequest对象
var useXmlHttp=function(){return (typeof XMLHttpRequest != "undefined");}  
// XMLHttpRequest对象版本
var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];
// DOM对象版本 
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"]; 
/* ===========================================================
 * 函数名称:$(i)
 * 参数说明:i - 目标节点名称
 * 函数功能:获取指定的目标DOM节点
 * 返 回 值:返回要搜索的目标DOM节点
 * 使用方法:$("frmSearch")
 ============================================================ */
function $(i){
   if(!document.getElementById)return false;
   if(typeof i==="string"){
        if(document.getElementById && document.getElementById(i)) {
            // W3C DOM
            return document.getElementById(i);
         }
         else if (document.all && document.all(i)) {
             // MSIE 4 DOM
            return document.all(i);
         }
         else if (document.layers && document.layers[i]) {
             // NN 4 DOM.. note: this won't find nested layers
            return document.layers[i];
         } 
         else {
            return false;
         }
   }
   else{return i;}
}
/* ===========================================================
 * 函数名称:createXMLHTTPRequest()
 * 参数说明:无参数
 * 函数功能:创建XMLHttpRequest对象
 * 返 回 值:XMLHTTPRequest对象
 * 使用方法:var oXmlHttp = createXMLHTTPRequest(); 
 ============================================================ */
function createXMLHTTPRequest(){
  // 非IE浏览器(Firefox,Opera),XMLHttpRequest对象是浏览器内置的一个对象
  if (useXmlHttp){ 
         return new XMLHttpRequest();
   } 
   else if (useActiveX) { //在IE(IE< 7.0 = use ActiveX)浏览器中,XMLHttpRequest对象是以ActiveX控件的形式存在的        
         if (!XMLHTTP_VER) {
              for (var i=0; i < ARR_XMLHTTP_VERS.length; i++){
                  try {
                      new ActiveXObject(ARR_XMLHTTP_VERS[i]);
                      XMLHTTP_VER = ARR_XMLHTTP_VERS[i]; // 获取本地IE浏览器相应的XMLHttpRequest对象版本
                      break;
                  } catch (oError) {}
              }
         }
         if (XMLHTTP_VER) {
             return new ActiveXObject(XMLHTTP_VER);
         } 
         else {
             throw new Error("无法创建XMLHttpRequest对象!");
         }
    } 
    else {
         throw new Error("您的浏览器不支持XMLHttpRequest对象!");
    }
}
/* ===========================================================
 * 函数名称:ajaxUpdater(tarObj,sMethod,URL,parameters)
 * 参数说明:tarObj - 异步获取信息希望显示的目标节点ID
 *           sMethod - 数据提交方法,两个可选值get,post
 *           URL - 提交的目标URL地址
 *           parameters - URL后面接(传递)的参数  
 * 函数功能:将异步传递的目标URL地址返回的信息,无刷新的写到目标
 *           节点(tarObj)中
 * 返 回 值:new Error() - 运行错误时返回一个报错信息
 * 使用方法:var myAjax = ajaxUpdater(msgBox,"get",URL,para);
 ============================================================ */
function ajaxUpdater(tarObj,sMethod,URL,parameters){
    var oXmlHttp = createXMLHTTPRequest();
        
    oXmlHttp.open(sMethod, URL+parameters, true);
    oXmlHttp.onreadystatechange = function () {
        if (oXmlHttp.readyState == 4) {
             if (oXmlHttp.status == 200) {
                  if($(tarObj)){
                       $(tarObj).innerHTML = oXmlHttp.responseText;
                  }
                  else{
                       return false; 
                  }          
             } 
             else {
                  throw new Error("有一个错误产生!");
             }
         }    
    }
            
    oXmlHttp.send(null); 

/* ===========================================================
 * 函数名称:ajaxRequest(sMethod,URL,parameters,func)
 * 参数说明:sMethod - 数据提交方法,两个可选值get,post
 *           URL - 提交的目标URL地址
 *           parameters - URL后面接(传递)的参数 
 *           func - 页面成功加载后的处理函数(指针) 
 * 函数功能:当异步传递的目标URL地址成功加载时,指定相应的处理函数
 * 返 回 值:func(oXmlHttp) - 返回处理函数
 *           new Error() - 运行错误时返回一个报错信息
 * 使用方法:var myAjax = ajaxUpdater("get",URL,para,showMsg);
 ============================================================ */
function ajaxRequest(sMethod,URL,parameters,func){
    var oXmlHttp = createXMLHTTPRequest();
        
    oXmlHttp.open(sMethod, URL+parameters, true);
    oXmlHttp.onreadystatechange = function() {
         if (oXmlHttp.readyState == 4) {
              if (oXmlHttp.status == 200) {
                    return func(oXmlHttp);     
              } 
              else {
                    throw new Error("有一个错误产生!");
              }
         }    
    }
            
    oXmlHttp.send(null);   

/* ===========================================================
 * 函数名称:tabsEvent()
 * 参数说明:要设置事件的DOM节点ID
 * 函数功能:为导航TAB菜单(li)设置onclick处理方法(函数),
 *           屏蔽掉a标签默认的处理(打开新链接)事件
 * 返 回 值:false - 屏蔽掉a标签默认的处理(打开新链接)事件
 * 使用方法:tabsEvent("news","sports");
 ============================================================ */
function tabsEvent(){
   for(var i=0;i<arguments.length;i++){
         var tabs = $(arguments[i]);
         // DOM节点(tabs)不存在或者浏览器不支持getElementsByTagName()方法
         // 函数不执行
        if(!tabs || !document.getElementsByTagName) return false;
            
        var theList = tabs.getElementsByTagName("li"); // 搜寻导航标签(ID为tabs)里的所有li标签
        var theLink = tabs.getElementsByTagName("a");  // 搜寻导航标签(ID为tabs)里的所有a标签
            
        for(var j=0;j<theList.length;j++){
           var theTab = theList[j];
           if(theTab.parentNode!=tabs) continue;
               
           var theA = theLink[j];
           // 屏蔽掉a标签默认的处理(打开新链接)事件
           theA.onclick = function(){
               return false; 
           }
           
           // 为导航TAB菜单(li)设置onclick处理方法(函数)    
           theTab.onclick = function(){
               var theClass = this.className;
               if(theClass!="current" && theClass!="first"){
                   var objId = this.getAttribute("id").split("-")[1]; // 当前选中标签(li)在菜单(ul)中的索引值
                   var tarObj = this.getAttribute("id").split("-")[0]; // 要显示信息的目标DOM节点ID值
                    var theURL = tarObj + "/" + tarObj + objId + ".htm"; // 要异步加载的URL地址
                   ajaxInject($(tarObj),objId,tarObj,theURL); 
                   return false;
               }
            }
        } 
   }      

/* ===========================================================
 * 函数名称:ajaxInject(ListName,tabId,tarObj,URL)
 * 参数说明:ListName - 标签菜单DOM节点ID
 *           tabId - 选中的标签(在ListName中的)索引值
 *           tarObj - 要显示返回信息的目标DOM节点ID值
 *           URL - 要异步处理的URL地址
 * 函数功能:设置当前选中标签(li)的样式,
 *           将返回信息写到指定DOM节点中。
 * 返 回 值:无
 * 使用方法:tabsEvent("news","sports");
 ============================================================ */
function ajaxInject(ListName,tabId,tarObj,URL){
    if(!ListName || !document.getElementsByTagName) return false;
   var Tabs = ListName;
   var theLi = Tabs.getElementsByTagName("li");
   for(var i=0;i<theLi.length;i++){
      // 设置当前选中标签的样式
       if(i==tabId){
          if(i==0){
            theLi[tabId].className = "first"; // 当选中第一项的样式
          }
          else{// 
            theLi[tabId].className = "current"; // 选中其他项的样式
          }  
          var msgBox = tarObj+"Cnt"; 
          var loadstatustext="<div class='loading'><img src='img/loading.gif' alt='正在加载内容, 请稍候...' />正在加载内容, 请稍候...</div>";   
           $(msgBox).innerHTML = loadstatustext; // 加载信息时的提示信息
           var para = "?d=" + Math.random(); // URL后的参数,接Math.random()(一个随机数),目的是处理ajax的缓存问题
           var myAjax = ajaxUpdater(msgBox,"get",URL,para);
       }
       else{// 设置其他标签的样式
           theLi[i].className = "";
           if(tabId!=0){
              theLi[tabId-1].className = "off"; // 当不是第一项时,隐藏选中项的前一项的分隔标签
           }  
       } 
   }
}        
//-->

inde.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxTab导航</title>
<link href="css/ajaxtab.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/ajaxtab.js"></script>
</head>
<body>
<div class="clearfix cotainer">
     <ul class="tabs" id="news">
      <li class="first" id="news-0"><a href="news/news0.htm">网站重构</a><span></span></li>
      <li id="news-1"><a href="news/news1.htm">CSS布局实录</a><span></span></li>
      <li id="news-2"><a href="news/news2.htm">海啸的地盘</a><span></span></li>
      <li id="news-3"><a href="news/news3.htm">Ajax高级编程</a><span></span></li>
    </ul><br class="clear" />
    <div class="clearfix cnt" id="newsCnt">
       <img src="img/girl-1.jpg" alt="林志琳" />
      <ul>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
      </ul>
  </div>
</div>
<div class="clearfix cotainer">
     <ul class="tabs" id="sports">
      <li class="first" id="sports-0"><a href="sports/sports0.htm">网站重构</a><span></span></li>
      <li id="sports-1"><a href="sports/sports1.htm">CSS布局实录</a><span></span></li>
      <li id="sports-2"><a href="sports/sports2.htm">海啸的地盘</a><span></span></li>
      <li id="sports-3"><a href="sports/sports3.htm">Ajax高级编程</a><span></span></li>
  </ul><br class="clear" />
  <div class="clearfix cnt" id="sportsCnt">
       <img src="img/girl-5.jpg" alt="林志琳" />
    <ul>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
        <li><a href="#">PRG全棉短袖衬衣最后的抢购机抢购机</a> 2006-08-15</li>
    </ul>
  </div>
</div>
<script language="javascript" type="text/javascript">
<!--
tabsEvent("news","sports");
//-->
</script>
</body>
</html>
ajaxtab.css

<!--
*{
   margin:0;
   padding:0;
}
body{
   text-align:center;
   background-color:#FFF;
   color:#18397C;
   font:normal 12px "宋体", Arial, sans-serif;
}
img{border:0;}
ul,li{list-style-type:none;}
a:link,
a:visited{
   color:#18397C;
   text-decoration:none;
}
a:hover{
   color:#F00;
   text-decoration:underline;
}
div,span,p,li,ul,h1,h2,h3,h4,h5,h6{text-align:left;}
/*clear both*/
.clearfix:after {
   content: ".";
   display:block;
   height:0;
   clear: both; 
   visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
*+html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear{ 
   clear: both; 
   font-size:1px; 
   width:1px; 
   height:1px; 
   visibility: hidden;
}
.cotainer{
   margin:0 auto;
   margin-top:10px;
   width:506px;
   height:auto;
   border:solid #B0BEC7;
   border-width:0 1px 1px 1px;
}
.tabs{
   float:left;
   width:506px;
   height:22px;
   background-image:url(../img/tab_bg.gif);
}
.tabs li{
   float:left;
   display:inline;
   text-align:center;
   width:120px;
   height:12px;
   padding:4px 0 6px 0;
   overflow:hidden;
   letter-spacing:1px;
   position:relative;
}
.tabs li.first{
   background-image:url(../img/tab_active1.gif);
}
.tabs li.current{
   background-image:url(../img/tab_active2.gif);
}
.tabs li.current,
.tabs li.first{
   font-weight:bold;
}
.tabs li.current a,
.tabs li.first a{
   color:#D45417;
}
.tabs li span{
   position:absolute;
   right:0;
   top:3px;
   width:2px;
   height:16px;
   overflow:hidden;
   font-size:1px;
   background-image:url(../img/tab_sline.gif);  
}
.tabs li.first span,
.tabs li.current span,
.tabs li.off span{
   display:none;
}
.cnt{
   margin:0 auto;
   width:496px;
   padding:5px;
   height:auto;
}
.cnt img{
   float:left;
   width:154px;
   height:115px;
   border:1px solid #B0BEC7;
   margin-right:5px;
   display:inline; 
}
.cnt ul{
   float:right;
   width:335px;
   height:117px;
}
.cnt ul li{
   float:left;
   width:335px;
   height:12px;
   overflow:hidden;
   color:#999;
   padding:5px 0 2px 0;
}
.loading{
   margin:0 auto;
   width:506px;
   height:16px;
   padding:51px 0 50px 0;
   overflow:hidden;
   text-align:center;
}
.loading img{
   width:16px;
   height:16px;
   border:0;
   float:none;
   vertical-align:middle;
}
-->

下面开始我们的分析实现方法,感兴趣的往下看...

1   2  3  4  5 下一页 尾 页
标签:akax 标签 导航 XMLHTTP 

猜你喜欢:

电脑版 asp之家JavaScript
m.aspxhome.com 闽ICP备06017341号