詳解Ajax標簽導航實例_AJAX教程
推薦：詳解-CSS技巧篇CSS技巧篇（position屬性的運用技巧） 下面開始我們的分析了，先來看看這段XHTML代碼： ul class=tabs id=news li class=first id=news-0a href=news/news0.htm網(wǎng)站重構/aspan/span/li li id=news-1a href=news/news1.htmCSS布局實錄/aspan/sp
之前整理發(fā)表了《XMLHTTPRequest的屬性和方法簡介》,它ajax要使用的核心的技術之一，現(xiàn)在就來實際運用它。這個Ajax標簽導航，是我很久前就寫的一個腳本，很實用的（還被很多網(wǎng)站收錄了哦），現(xiàn)在拿它來做實例講解吧！當然個人能力有限，有什么不對的地方還請多包含!
演示地址：http://www.yaohaixiao.com/code/ajaxtab/index.htm
代碼下載：ajaxtab.rar
效果大家看到了，核心功能有：
- 將當前選中標簽以特殊的樣式顯示
- 將異步加載的頁面信息顯示到指定的ＤＯＭ節(jié)點中
代碼篇：
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"];
/* ==================================
* 函數(shù)名稱：(i)
* 參數(shù)說明：i - 目標節(jié)點名稱
* 函數(shù)功能：獲取指定的目標DOM節(jié)點
* 返 回 值：返回要搜索的目標DOM節(jié)點
* 使用方法：("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ù)說明：無參數(shù)
* 函數(shù)功能：創(chuàng)建XMLHttpRequest對象
* 返 回 值：XMLHTTPRequest對象
* 使用方法：var oXmlHttp = createXMLHTTPRequest();
================================== */
function createXMLHTTPRequest(){
// 非IE瀏覽器（Firefox,Opera）,XMLHttpRequest對象是瀏覽器內(nèi)置的一個對象
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("無法創(chuàng)建XMLHttpRequest對象！");
}
}
else {
throw new Error("您的瀏覽器不支持XMLHttpRequest對象！");
}
}
/* ==================================
* 函數(shù)名稱：ajaxUpdater(tarObj,sMethod,URL,parameters)
* 參數(shù)說明：tarObj - 異步獲取信息希望顯示的目標節(jié)點ID
* sMethod - 數(shù)據(jù)提交方法，兩個可選值get,post
* URL - 提交的目標URL地址
* parameters - URL后面接（傳遞）的參數(shù)
* 函數(shù)功能：將異步傳遞的目標URL地址返回的信息，無刷新的寫到目標
* 節(jié)點(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("有一個錯誤產(chǎn)生！");
}
}
}
oXmlHttp.send(null);
}
/* ==================================
* 函數(shù)名稱：ajaxRequest(sMethod,URL,parameters,func)
* 參數(shù)說明：sMethod - 數(shù)據(jù)提交方法，兩個可選值get,post
* URL - 提交的目標URL地址
* parameters - URL后面接（傳遞）的參數(shù)
* func - 頁面成功加載后的處理函數(shù)（指針）
* 函數(shù)功能：當異步傳遞的目標URL地址成功加載時，指定相應的處理函數(shù)
* 返 回 值：func(oXmlHttp) - 返回處理函數(shù)
* 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("有一個錯誤產(chǎn)生！");
}
}
}
oXmlHttp.send(null);
}
/* ==================================
* 函數(shù)名稱：tabsEvent()
* 參數(shù)說明：要設置事件的DOM節(jié)點ID
* 函數(shù)功能：為導航TAB菜單（li）設置onclick處理方法（函數(shù)），
* 屏蔽掉a標簽默認的處理（打開新鏈接）事件
* 返 回 值：false - 屏蔽掉a標簽默認的處理（打開新鏈接）事件
* 使用方法：tabsEvent("news","sports");
================================== */
function tabsEvent(){
for(var i=0;i<arguments.length;i++){
var tabs = (arguments[i]);
// DOM節(jié)點（tabs）不存在或者瀏覽器不支持getElementsByTagName()方法
// 函數(shù)不執(zhí)行
if(!tabs || !document.getElementsByTagName) return false;
var theList = tabs.getElementsByTagName("li"); // 搜尋導航標簽(ID為tabs)里的所有l(wèi)i標簽
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處理方法（函數(shù)）
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節(jié)點ID值
var theURL = tarObj + "/" + tarObj + objId + ".htm"; // 要異步加載的URL地址
ajaxInject((tarObj),objId,tarObj,theURL);
return false;
}
}
}
}
}
/* ==================================
* 函數(shù)名稱：ajaxInject(ListName,tabId,tarObj,URL)
* 參數(shù)說明：ListName - 標簽菜單DOM節(jié)點ID
* tabId - 選中的標簽（在ListName中的）索引值
* tarObj - 要顯示返回信息的目標DOM節(jié)點ID值
* URL - 要異步處理的URL地址
* 函數(shù)功能：設置當前選中標簽（li）的樣式，
* 將返回信息寫到指定DOM節(jié)點中。
* 返 回 值：無
* 使用方法：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=’正在加載內(nèi)容, 請稍候...’ />正在加載內(nèi)容, 請稍候...</div>";
(msgBox).innerHTML = loadstatustext; // 加載信息時的提示信息
var para = "?d=" + Math.random(); // URL后的參數(shù)，接Math.random()（一個隨機數(shù)）,目的是處理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">網(wǎng)站重構</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">網(wǎng)站重構</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;
}
-->
分享：Ajax標簽導航實例詳解-Javascript技巧篇Javascript技巧篇（arguments對象的運用技巧） 好了，我們現(xiàn)在已經(jīng)把CSS樣式寫好了，現(xiàn)在就開始用腳本來控制了。通過剛才講解標簽樣式的時候，其實我們也基本把腳本控制的邏輯流程分析了下： 選中當前標簽的背景要區(qū)別顯示； 選中標簽和其前一個標簽的分隔線
- Ajax中瀏覽器的緩存問題解決方法
- AJAX和WebService實現(xiàn)省市縣三級聯(lián)動具體代碼
- ajax 登錄功能簡單實現(xiàn)(未連接數(shù)據(jù)庫)
- AJAX和WebService實現(xiàn)郵箱驗證(無刷新驗證郵件地址是否合法)
- AJAX和三層架構實現(xiàn)分頁功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實現(xiàn)
- AJAX獲取服務器當前時間及時間格式輸出處理
- ajax傳遞多個參數(shù)具體實現(xiàn)
- ajax傳遞一個參數(shù)具體實現(xiàn)
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標題排序(為表格注入活力)
- 相關鏈接：
- 教程說明：
AJAX教程-詳解Ajax標簽導航實例
。