中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

之前整理發(fā)表了《XMLHTTPRequest的屬性和方法簡(jiǎn)介》,它ajax要使用的核心的技術(shù)之一，現(xiàn)在就來(lái)實(shí)際運(yùn)用它。這個(gè)Ajax標(biāo)簽導(dǎo)航，是我很久前就寫(xiě)的一個(gè)腳本，很實(shí)用的（還被很多網(wǎng)站收錄了哦），現(xiàn)在拿它來(lái)做實(shí)例講解吧！當(dāng)然個(gè)人能力有限，有什么不對(duì)的地方還請(qǐng)多包含!

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

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

1. 將當(dāng)前選中標(biāo)簽以特殊的樣式顯示
2. 將異步加載的頁(yè)面信息顯示到指定的ＤＯＭ節(jié)點(diǎn)中

代碼篇：

ajaxtab.js：

<!--
// 判斷是否支持ActiveX
var useActiveX=function(){return (typeof ActiveXObject != "undefined");}
// 判斷是否支持DOM
var useDom=function(){return document.implementation && document.implementation.createDocument;} 
// 判斷是否支持XMLHttpRequest對(duì)象
var useXmlHttp=function(){return (typeof XMLHttpRequest != "undefined");} 
// XMLHttpRequest對(duì)象版本
var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];
// DOM對(duì)象版本
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"];

/* ==================================
* 函數(shù)名稱：$(i)
* 參數(shù)說(shuō)明：i - 目標(biāo)節(jié)點(diǎn)名稱
* 函數(shù)功能：獲取指定的目標(biāo)DOM節(jié)點(diǎn)
* 返 回 值：返回要搜索的目標(biāo)DOM節(jié)點(diǎn)
* 使用方法：$("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;}
}

/* ==================================
* 函數(shù)名稱：createXMLHTTPRequest()
* 參數(shù)說(shuō)明：無(wú)參數(shù)
* 函數(shù)功能：創(chuàng)建XMLHttpRequest對(duì)象
* 返 回 值：XMLHTTPRequest對(duì)象
* 使用方法：var oXmlHttp = createXMLHTTPRequest();
================================== */
function createXMLHTTPRequest(){
     // 非IE瀏覽器（Firefox,Opera）,XMLHttpRequest對(duì)象是瀏覽器內(nèi)置的一個(gè)對(duì)象
     if (useXmlHttp){
         return new XMLHttpRequest();
   }
   else if (useActiveX) { //在IE（IE< 7.0 = use ActiveX）瀏覽器中，XMLHttpRequest對(duì)象是以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瀏覽器相應(yīng)的XMLHttpRequest對(duì)象版本
                      break;
                  } catch (oError) {}
              }
         }
         if (XMLHTTP_VER) {
             return new ActiveXObject(XMLHTTP_VER);
         }
         else {
             throw new Error("無(wú)法創(chuàng)建XMLHttpRequest對(duì)象！");
         }
    }
    else {
         throw new Error("您的瀏覽器不支持XMLHttpRequest對(duì)象！");
    }
}

/* ==================================
* 函數(shù)名稱：ajaxUpdater(tarObj,sMethod,URL,parameters)
* 參數(shù)說(shuō)明：tarObj - 異步獲取信息希望顯示的目標(biāo)節(jié)點(diǎn)ID
*           sMethod - 數(shù)據(jù)提交方法，兩個(gè)可選值get,post
*           URL - 提交的目標(biāo)URL地址
*           parameters - URL后面接（傳遞）的參數(shù) 
* 函數(shù)功能：將異步傳遞的目標(biāo)URL地址返回的信息，無(wú)刷新的寫(xiě)到目標(biāo)
*           節(jié)點(diǎn)(tarObj)中
* 返 回 值：new Error() - 運(yùn)行錯(cuò)誤時(shí)返回一個(gè)報(bào)錯(cuò)信息
* 使用方法：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("有一個(gè)錯(cuò)誤產(chǎn)生！");
             }
         }   
    }
           
    oXmlHttp.send(null);
}

/* ==================================
* 函數(shù)名稱：ajaxRequest(sMethod,URL,parameters,func)
* 參數(shù)說(shuō)明：sMethod - 數(shù)據(jù)提交方法，兩個(gè)可選值get,post
*           URL - 提交的目標(biāo)URL地址
*           parameters - URL后面接（傳遞）的參數(shù)
*           func - 頁(yè)面成功加載后的處理函數(shù)（指針）
* 函數(shù)功能：當(dāng)異步傳遞的目標(biāo)URL地址成功加載時(shí)，指定相應(yīng)的處理函數(shù)
* 返 回 值：func(oXmlHttp) - 返回處理函數(shù)
*           new Error() - 運(yùn)行錯(cuò)誤時(shí)返回一個(gè)報(bào)錯(cuò)信息
* 使用方法：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("有一個(gè)錯(cuò)誤產(chǎn)生！");
              }
         }   
    }
           
    oXmlHttp.send(null);  
}

/* ==================================
* 函數(shù)名稱：tabsEvent()
* 參數(shù)說(shuō)明：要設(shè)置事件的DOM節(jié)點(diǎn)ID
* 函數(shù)功能：為導(dǎo)航TAB菜單（li）設(shè)置onclick處理方法（函數(shù)），
*           屏蔽掉a標(biāo)簽?zāi)�認(rèn)的處理（打開(kāi)新鏈接）事件
* 返 回 值：false - 屏蔽掉a標(biāo)簽?zāi)�認(rèn)的處理（打開(kāi)新鏈接）事件
* 使用方法：tabsEvent("news","sports");
================================== */
function tabsEvent(){
      for(var i=0;i<arguments.length;i++){
         var tabs = $(arguments[i]);
         // DOM節(jié)點(diǎn)（tabs）不存在或者瀏覽器不支持getElementsByTagName()方法
         // 函數(shù)不執(zhí)行
           if(!tabs || !document.getElementsByTagName) return false;
              
           var theList = tabs.getElementsByTagName("li"); // 搜尋導(dǎo)航標(biāo)簽(ID為tabs)里的所有l(wèi)i標(biāo)簽
           var theLink = tabs.getElementsByTagName("a");  // 搜尋導(dǎo)航標(biāo)簽(ID為tabs)里的所有a標(biāo)簽
              
           for(var j=0;j<theList.length;j++){
                 var theTab = theList[j];
                 if(theTab.parentNode!=tabs) continue;
                    
                 var theA = theLink[j];
                 // 屏蔽掉a標(biāo)簽?zāi)�認(rèn)的處理（打開(kāi)新鏈接）事件
                 theA.onclick = function(){
                     return false;   
                 }
                
                 // 為導(dǎo)航TAB菜單（li）設(shè)置onclick處理方法（函數(shù)）   
                 theTab.onclick = function(){
                  var theClass = this.className;
                  if(theClass!="current" && theClass!="first"){
                            var objId = this.getAttribute("id").split("-")[1]; // 當(dāng)前選中標(biāo)簽(li)在菜單（ul）中的索引值
                            var tarObj = this.getAttribute("id").split("-")[0]; // 要顯示信息的目標(biāo)DOM節(jié)點(diǎn)ID值
                       var theURL = tarObj + "/" + tarObj + objId + ".htm"; // 要異步加載的URL地址
                         ajaxInject($(tarObj),objId,tarObj,theURL);   
                         return false;
                     }
               }
           }
      }     
}

/* ==================================
* 函數(shù)名稱：ajaxInject(ListName,tabId,tarObj,URL)
* 參數(shù)說(shuō)明：ListName - 標(biāo)簽菜單DOM節(jié)點(diǎn)ID
*           tabId - 選中的標(biāo)簽（在ListName中的）索引值
*           tarObj - 要顯示返回信息的目標(biāo)DOM節(jié)點(diǎn)ID值
*           URL - 要異步處理的URL地址
* 函數(shù)功能：設(shè)置當(dāng)前選中標(biāo)簽（li）的樣式，
*           將返回信息寫(xiě)到指定DOM節(jié)點(diǎn)中。
* 返 回 值：無(wú)
* 使用方法：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++){
            // 設(shè)置當(dāng)前選中標(biāo)簽的樣式
          if(i==tabId){
                if(i==0){
                     theLi[tabId].className = "first"; // 當(dāng)選中第一項(xiàng)的樣式
                }
                else{//
                     theLi[tabId].className = "current"; // 選中其他項(xiàng)的樣式
                }    
                var msgBox = tarObj+"Cnt";
                var loadstatustext="<div class='loading'><img src='img/loading.gif' alt='正在加載內(nèi)容, 請(qǐng)稍候...' />正在加載內(nèi)容, 請(qǐng)稍候...</div>";     
              $(msgBox).innerHTML = loadstatustext; // 加載信息時(shí)的提示信息
              var para = "?d=" + Math.random(); // URL后的參數(shù)，接Math.random()（一個(gè)隨機(jī)數(shù)）,目的是處理ajax的緩存問(wèn)題
              var myAjax = ajaxUpdater(msgBox,"get",URL,para);
          }
          else{// 設(shè)置其他標(biāo)簽的樣式
              theLi[i].className = "";
              if(tabId!=0){
                    theLi[tabId-1].className = "off"; // 當(dāng)不是第一項(xiàng)時(shí)，隱藏選中項(xiàng)的前一項(xiàng)的分隔標(biāo)簽
                 } 
          }   
      }
}       
//-->

inde.htm：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxTab導(dǎo)航</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">網(wǎng)站重構(gòu)</a><span></span></li>
         <li id="news-1"><a href="news/news1.htm">CSS布局實(shí)錄</a><span></span></li>
         <li id="news-2"><a href="news/news2.htm">海嘯的地盤(pán)</a><span></span></li>
         <li id="news-3"><a href="news/news3.htm">Ajax高級(jí)編程</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全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</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">網(wǎng)站重構(gòu)</a><span></span></li>
         <li id="sports-1"><a href="sports/sports1.htm">CSS布局實(shí)錄</a><span></span></li>
         <li id="sports-2"><a href="sports/sports2.htm">海嘯的地盤(pán)</a><span></span></li>
         <li id="sports-3"><a href="sports/sports3.htm">Ajax高級(jí)編程</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全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
              <li><a href="#">PRG全棉短袖襯衣最后的搶購(gòu)機(jī)搶購(gòu)機(jī)</a> 2006-08-15</li>
          </ul>
     </div>
</div>
<script language="javascript" type="text/javascript">
<!--
tabsEvent("news","sports");
//-->
</script>
</body>
</html>

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) 下一頁(yè) CSS技巧篇

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。