［原创］Ajax标签导航实例详解

 

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

 

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

 

效果大家看到了，核心功能有：
１．将当前选中标签以特殊的样式显示
２．将异步加载的页面信息显示到指定的ＤＯＭ节点中

 

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

 

ajaxtab.js
[code]
<!–
// 判断是否支持ActiveX
var useActiveX=(typeof ActiveXObject != “undefined”);
// 判断是否支持DOM
var useDom=(document.implementation &amp;&amp; document.implementation.createDocument);
// 判断是否支持XMLHttpRequest对象
var useXmlHttp=(typeof XMLHttpRequest != “undefined”);
// XMLHttpRequest对象版本
var ARR_XMLHTTP_VERS = ["Microsoft.XMLHTTP", "MSXML.XMLHTTP", "Microsoft.XMLHTTP", "Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP"];
// DOM对象版本
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"];

var XMLHTTP_VER;

/* ===========================================================
* 函数名称：$(i)
* 参数说明：i - 目标节点名称
* 函数功能：获取指定的目标DOM节点
* 返 回 值：返回要搜索的目标DOM节点
* 使用方法：$(”frmSearch”)
============================================================ */
function $(i){
if(!document.getElementById)return false;
if(typeof i===”string”){
if(document.getElementById &amp;&amp; document.getElementById(i)) {
// W3C DOM
return document.getElementById(i);
}
else if (document.all &amp;&amp; document.all(i)) {
// MSIE 4 DOM
return document.all(i);
}
else if (document.layers &amp;&amp; document.layers[i]) {
// NN 4 DOM.. note: this won&#39;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 this.href=”#1″;
}

// 为导航TAB菜单（li）设置onclick处理方法（函数）
theTab.onclick = function(){
var theClass = this.className;
if(theClass!=”current” &amp;&amp; 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”);
==========================================