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.setRequestHeader("If-Modified-Since","0");        
    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节点中。
 * 返 回 值：无
 * 使用方法：ajaxInject($(tarObj),objId,tarObj,theURL);
 ============================================================ */
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"; // 当不是第一项时，隐藏选中项的前一项的分隔标签
	         	}  
	      }	
	  }
}        
//-->