ajax标签导航实例详解教程
作者：海啸 来源：无忧脚本 发布时间：2008-02-01 10:54:00
标签：akax,标签,导航,XMLHTTP
之前整理发表了《XMLHTTPRequest的属性和方法简介》,它ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!
演示地址：http://www.yaohaixiao.com/code/ajaxtab/index.htm
程序打包下载：ajaxtab.rar（185KB）
效果大家看到了，核心功能有：
１．将当前选中标签以特殊的样式显示
２．将异步加载的页面信息显示到指定的ＤＯＭ节点中
我们来看看处理脚本的代码吧：
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;
}
-->
下面开始我们的分析实现方法，感兴趣的往下看...
0
投稿猜你喜欢
- 1、查看数据库中有哪些用户？ select username from all_users;2、查看数据库中有哪些DBA用户？ select
- Math.min()和Math.max()用法相似。两个方法用来获取给定的一组数值中的最大值或最小值，但是却不接受数组作为参数。当然可以写个
先附上官方文档：https://pandas.pydata.org/pandas-docs/stable/reference/api/pan- 简单的并发控制利用 channel 的缓冲设定，我们就可以来实现并发的限制。我们只要在执行并发的同时，往一个带有缓冲的 chann
- NumPy是一个关于矩阵运算的库，熟悉Matlab的都应该清楚，这个库就是让python能够进行矩阵话的操作，而不用去写循环操作。下面对nu
- 导语又到了裹紧被子，穿起秋裤的季节！这些天，我们这边开始下雨了，温度瞬间降了10几度。遭受了秋天第一场寒潮的“侵袭”，我是真的冷，一大早穿上
- 这篇文章主要介绍了python装饰器使用实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 本文主要讲述：自定义树形控件<el-tree>需求说明：Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点
- Pandas读取大文件要处理的是由探测器读出的脉冲信号，一组数据为两列，一列为时间，一列为脉冲能量，数据量在千万级，为了有一个直接的认识，先
- 工具：Jupyter notebook + Anaconda游戏规则： * 一种玩法是买尾号。2元一个数字，中奖是20元。每个数字出现的概率
- 前段时间在网上找了一个“完美的”JavaScript对象克隆的函数，感觉还不错，但随后便出现了一些问题，发现这个克隆并不好用，在使用发现了如
- 一、值的类型 早在介绍JS的数据类型的时候就提到过基本类型和引用类型
- python 调用系统ffmpeg进行视频截图，并进行图片http发送ffmpeg ，视频、图片的各种处理。 最近在做视频、图片
- Config:服务端连接Git配置，代码如下所示：1、导入依赖<dependencies> <d
- DW2004的中文乱码情况你遇到过么？乱码一般是怎么出现的呢？也许很多时候用其他软件（比如Editplus）写程序的时候，忘了meta标签里
- select语句中只能使用sql函数对字段进行操作（链接sql server），select 字段1 from 表1 where 字段1.I
- js数组元素的添加和删除一直比较迷惑，今天终于找到详细说明的资料了，先给个我测试的代码^-^var arr = new Array();ar
- Jira提供了完善的RESTful API，如果不想直接请求API接口可以使用Python的Jira库来操作JiraJira Python文
- cupy我觉得可以理解为cuda for numpy，安装方式pip install cupy，假设import numpy as npim
- 在Transact-SQL语句中，我们主要使用OpenDataSource函数、OPENROWSET 函数，关于函数的详细说明，请参考SQL
