`

Ajax标签导航实例详解

 
阅读更多
 第 1 页 代码篇
第 2 页 CSS技巧篇
第 3 页 Javascript技巧篇
第 4 页 DOM技巧篇
第 5 页 大结局

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

演示地址：http://www.yaohaixiao.com/code/ajaxtab/index.htm
代码下载：ajaxtab.rar

效果大家看到了，核心功能有：

  1. 将当前选中标签以特殊的样式显示
  2. 将异步加载的页面信息显示到指定的ＤＯＭ节点中

代码篇：

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;
}
-->

分享到：
| 我的简历 2008年2月27日 目的地：上海
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    《Ajax实战：实例详解》sources

    《Ajax实战：实例详解》这本书是关于Web开发领域中异步JavaScript和XML（Ajax）技术的一本实践指南。Ajax技术的出现，使得网页无需刷新就能实现数据的动态更新，极大地提升了用户体验。本书的"sources"部分包含了...

    Ajax实战：实例详解源代码

    **Ajax实战：实例详解源代码** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...

    ajax实例实例实例

    【Ajax 实例详解】 Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript，通过创建XMLHttpRequest对象，实现后台与服务器的异步数据交换，...

    ajax+json实例

    **Ajax+JSON 实例详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为提升用户体验的重要工具，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON（JavaScript Object ...

    Ajax大全实例详解

    **Ajax大全实例详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这种技术允许用户与...

    Jquery Ajax分页（有实例）

    **jQuery AJAX分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高页面加载速度，优化用户体验。jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和...

    Bootstrap进度条与AJAX后端数据传递结合使用实例详解

    Bootstrap进度条与AJAX后端数据传递结合使用实例详解 Bootstrap进度条与AJAX后端数据传递结合使用是Web开发中常见的技术结合，通过Bootstrap进度条展示数据加载的进度，提高用户体验，AJAX技术则可以实现在页面不...

    jquery Ajax 全局调用封装实例详解

    ### jQuery Ajax 全局调用封装实例详解知识点 #### 前言 在前端开发中，异步数据交互是核心功能之一，通常使用Ajax技术实现。当全站需要频繁进行数据交互时，如果每次都写重复的`$.ajax`代码，不仅效率低下，而且...

    ajax_入门实例_

    **Ajax 入门实例详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建XMLHttpRequest对象，通过这个对象与服务器...

    $.ajax()方法详解（附加实例）

    $.ajax()方法详解（附加实例）

    ajax标签页

    **Ajax 标签页技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在Web开发中，Ajax被广泛用于创建更快速、更交互式的用户界面，比如“ajax标签...

    asp.net ajax入门与案例详解

    本教程将带你深入理解ASP.NET AJAX的基础，并通过实例来详细解析其应用。 一、ASP.NET AJAX简介 ASP.NET AJAX的核心是Microsoft ASP.NET AJAX Framework，它包含一组服务器端控件和JavaScript库，能够轻松地在...

    实例详解Android Webview拦截ajax请求

    Android Webview虽然提供了页面加载及资源请求的钩子，但是对于h5的ajax请求并没有提供干涉的接口，这意味着我们不能在webview中干涉javascript发起的http请求，而有时候我们确实需要能够截获ajax请求并实现一些功能...

    Ajax和$.ajax使用实例详解(推荐)

    实例二中，使用了jQuery库中的$.ajax()方法，与实例一中的原生XMLHttpRequest对象相比，简化了代码，更易于理解和维护。同时，示例还展示了如何在不同浏览器环境下创建XMLHttpRequest对象。 总的来说，Ajax 和 $....

    Servlet3.0与纯javascript通过Ajax交互的实例详解

    不过还是写写，方便Ajax学习的后来者。 虽然js.html是一个纯静态的页面，但是以下的程序必须挂在Tomcat服务器上，才能做到Ajax交互，否则看不出效果的。 Eclipse for javaee注意把做好的工程挂在Tomcat上，才运行...

    完全手册ASP.NET AJAX实用开发详解 源码

    全书通俗易懂，大量的实例供读者更加深刻地巩固所学习的知识，使读者更好地进行开发实践。 本书共分为15章，从初识ASP.NET AJAX开始，首先介绍了ASP.NET AJAX基础知识和结构，然后介绍了ASP.NET AJAX Control ...

    非常简洁的ajax留言本实例

    【Ajax留言本实例详解】 Ajax（Asynchronous JavaScript and XML）技术是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。这个“非常简洁的Ajax留言本实例”是一个典型的使用Ajax实现的交互式应用，旨在...

    《HTML5开发精要与实例详解》配套源码

    《HTML5开发精要与实例详解》这本书无疑是一本深入学习HTML5的优秀教程，通过配套的源码，我们可以更直观地理解并实践书中的理论知识。 首先，HTML5的新元素是其一大亮点。例如，`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`和...

Magicbox
Global site tag (gtag.js) - Google Analytics