首頁 > 開發者 > Ajax

ajax實現tab轉場效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ajax的HelloWorld會寫了，也算是我進門了，慢慢來吧，這次準備寫一個tab切換的效果，以前都是頁面初次載入，就將所有幀的內容都讀出來，然後觸發事件，讓層顯示或者消失就ok。這次想來個ajax版的，也就是頁面初次載入只載入第一幀的內容，然後滑鼠挪上去切換幀非同步讀取資料，就這麼簡單。

 

程式設計思路：

1，頁面初次載入，綁定window.onload事件，非同步讀取works_0.xml檔案中的內容並顯示，一幀一個xml檔案，幀切換其實就是讀取不同的xml檔案。

2，滑鼠挪上去，觸發一個非同步請求，讀取相應的xml檔案

3，解析xml檔案內容

4，拼接html字串

5，使用innerHTML方法顯示到指定div中

 

容易忽略的問題：

1，滑鼠挪到當前的標籤，就不應該觸發請求，應當做個判斷

2，每一幀的請求只請求一次，然後將資料儲存起來，觸發請求前應當判斷，如是第一次觸發，請求；如是非第一次則不請求，直接將第一次請求儲存的結果顯示。我是在頁面使用了一個hidden，將結果儲存到了它的Value值當中，當然也有其他辦法，以後再說。

3，載入xml字串進行處理的時候，IE和FF的方法不一樣，應當注意，我在網上搜了一段通用函數用上了^_^

4，好像沒有什麼了.......

 

 

 

html代碼：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /><br /> <meta http-equiv="pragma" content="no-cache"><br /> <title>myTino月度優秀會員作品展示</title><br /> <link type="text/css" href="css/reset.css" mce_href="css/reset.css" rel="stylesheet" media="all" /><br /> <link type="text/css" href="css/default.css" mce_href="css/default.css" rel="stylesheet" media="all" /><br /> <!--[if IE 7]><br /> <link type="text/css" href="css/ie7.css" mce_href="css/ie7.css" rel="stylesheet" media="screen" /><br /> <![endif]--><br /> <!--[if IE 6]><br /> <link type="text/css" href="css/ie6.css" mce_href="css/ie6.css" rel="stylesheet" media="screen" /><br /> <![endif]--><br /> <mce:script type="text/javascript" src="js/works.js" mce_src="js/works.js"></mce:script><br /> <?php include_once("../header_index.php");?><br /> <div id="wrap"><br /> <div id="header"></div><br /> <div id="bodyContent"><br /> <div id="tabs" class="clearfix"><br /> <ul><br /> <li class="curTab" onmouseover="changeTab(this,'works_0');"><h2>最近7天優秀作品</h2& gt;</li><br /> <li onmouseover="changeTab(this,'works_1');"><h2>本月度優秀作品</h2></li><br /> <li onmouseover="changeTab(this,'works_2');"><h2>隨機推薦作品</h2></li><br /> </ul><br /> </div><br /> <div id="worksContent"><br /> <ul id="works" class="works clearfix"></p><p> </ul><br /> </div><br /> </div><br /> <div id="footer"></div><br /> <?php require_once("../../templates/foot.php")?><br /> </div><br /> <input type="hidden" id="works_0" value="" /><br /> <input type="hidden" id="works_1" value="" /><br /> <input type="hidden" id="works_2" value="" /><br /> <?php include_once("../../commonphp/google_analytics.php");?></p><p> </body><br /></html>

 

 

css樣式：

 

/* General */<br />body {<br /> text-align:center;<br /> background:#F1F1F1;<br /> width:980px;<br />}<br />/* layerout*/<br />#wrap {<br /> width:980px;<br /> margin:10px auto;<br /> text-align:left;<br />}<br />#header {<br /> background:url(../images/works_header.gif);<br /> height:180px;<br />}<br />#bodyContent {<br /> margin-bottom:10px;<br /> border:solid 1px #ccc;<br />}<br />.last {<br /> margin-right:0;<br />}<br />/* clear both */<br />.clearfix {display: inline-block;}<br />/* Hides from IE-mac /*/<br />* html .clearfix {height: 1%;}<br />.clearfix {display: block;}<br />/* End hide from IE-mac */<br />.clearfix:after {<br /> content: ".";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> visibility: hidden<br />}<br />/* End layerout*/<br />/* @navigation */<br />#tabs {<br /> display:inline-block;<br />}<br />#tabs li {<br /> background:url("../images/tab_bg.gif") repeat-x;<br /> float:left;<br /> width:200px;<br /> height:33px;<br /> border-left:solid 1px #fff;<br /> border-right:solid 1px #cecece;<br /> cursor:pointer;<br />}<br />#tabs h2 {<br /> height:33px;<br /> line-height:33px;<br /> text-align:center;<br />}<br />#tabs .curTab {<br /> background:#ffffff;<br /> border-right:0;<br /> font-weight:bold;<br />}<br />/* End navigation */<br />/* @worksContent */<br />#worksContent {<br /> padding:15px;<br /> _padding:10px;<br /> background-color:#fff;<br />}<br />#works li {<br /> float:left;<br /> width:186px;<br /> height:134px;<br /> margin:5px;<br /> _margin:4px;<br /> padding:20px;<br /> background:url("../images/work_bg.gif");<br />}<br />#worksContent .works {</p><p>}<br />/* End worksContent */

 

js代碼：

/**<br /> * @author liuyong<br /> */<br />var xmlHttp;<br />var xmlDoc;<br />var works_0 ='';<br />var works_1 ='';<br />var works_2 =''; //標誌變數，儲存第一次請求拼好的content_str<br />var divId = '';<br />function loadXmlStr(strxml){ //相容IE和FF的載入xml字串的通用函數<br /> try{<br /> xmlDoc = new ActiveXObject("Microsoft.XMLDOM");<br /> xmlDoc.loadXML(strxml);<br /> }<br /> catch(e){<br /> var oParser=new DOMParser();<br /> xmlDoc=oParser.parseFromString(strxml,"text/xml");<br /> }<br /> return xmlDoc;<br />}<br />function createXMLHttpRequest(){<br /> if(window.ActiveXObject){ /*在IE下初始化XMLHttpRequest對象 */<br /> try{<br /> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //新版本IE<br /> }catch(otherMicrosoft){<br /> try{<br /> //較老版本的 Internet Explorer<br /> xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");<br /> }catch(failed){<br /> // 還是失敗，那麼就認為建立失敗……<br /> xmlHttp= false;<br /> }<br /> }<br /> }else if(window.XMLHttpRequest){<br /> xmlHttp = new XMLHttpRequest();<br /> }<br /> if(!xmlHttp){<br /> alert("建立 XMLHttpRequest 對象失敗!");<br /> }<br />}<br />function startRequest(fileName){</p><p> divId = fileName;<br /> createXMLHttpRequest();<br /> try{<br /> if(document.getElementById(fileName).value == '' ){<br /> xmlHttp.onreadystatechange = handleStateChange;<br /> xmlHttp.open("GET", "data/" + fileName + ".xml", true);<br /> xmlHttp.send(null);<br /> }else{<br /> document.getElementById("works").innerHTML = document.getElementById(fileName).value;<br /> }<br /> }catch(exception){<br /> alert("您要訪問的資源不存在!");<br /> }<br />}<br />function handleStateChange(){<br /> if(xmlHttp.readyState == 4){<br /> if (xmlHttp.status == 200 || xmlHttp.status == 0){<br /> // 取得XML的DOM對象<br /> //alert(xmlHttp.responseText);<br /> xmlDoc = loadXmlStr(xmlHttp.responseText);<br /> // 取得XML文檔的根<br /> var root = xmlDoc.documentElement;<br /> try<br /> {<br /> // 取得<works>結果<br /> var works = root.getElementsByTagName('work');<br /> //alert(works.length);<br /> var userid;<br /> var foldID;<br /> var workid;<br /> var content_str = ''; //拼好的HTML字串<br /> for(i = 0;i<works.length;i++){<br /> userid = works[i].getElementsByTagName("userid")[0].firstChild.nodeValue;<br /> foldID = works[i].getElementsByTagName("foldID")[0].firstChild.nodeValue;<br /> workid = works[i].getElementsByTagName("workid")[0].firstChild.nodeValue;<br /> content_str = content_str + '<li><a href="/" mce_href="/""http://www.mytino.com/cn/profile/profile_works_detail.php?workid=' + workid + '&foldID=' + foldID + '&type=2&userid=' + userid + '/" target=/"_blank/"><img src="/" mce_src="/""images/'+workid+'.jpg/" alt=/"/" /></a></li>';</p><p> }<br /> document.getElementById("works").innerHTML = content_str;<br /> document.getElementById(divId).value = content_str;<br /> divId = '';<br /> }catch(exception)<br /> {<br /> alert("異常情況！");<br /> }<br /> }<br /> }else{<br /> document.getElementById("works").innerHTML = '<img src="/" mce_src="/""images/loading.gif/" />';<br /> }</p><p>}<br />function changeText(str,element){<br /> if(navigator.appName.indexOf("Explorer") > -1){<br /> document.getElementById(element).innerText = str;<br /> }else{<br /> document.getElementById(element).textContent = str;<br /> }<br />}<br />var arr_li;<br />function changeTab(arg,con){<br /> arr_li = document.getElementById("tabs").getElementsByTagName("li");<br /> for(var i = 0;i<arr_li.length;i++){<br /> arr_li[i].className = 'none';<br /> }<br /> arg.className = 'curTab';<br /> if(arg.className == 'curTab'){<br /> if (con == 'works_0') {<br /> startRequest('works_0');<br /> }else if(con == 'works_1'){<br /> startRequest('works_1');<br /> }else if(con == 'works_2'){<br /> startRequest('works_2');<br /> }<br /> }<br />}<br />window.onload = function(){<br /> startRequest('works_0');<br />}

 

 

xml檔案：

 

works_0.xml

 

<?xml version="1.0" encoding="utf-8"?>
<root>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8379</workid>
    </work>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8378</workid>
    </work>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8374</workid>
    </work>
    <work>
        <userid>97026</userid>
        <foldID>3893</foldID>
        <workid>8369</workid>
    </work>
    <work>
        <userid>358611</userid>
        <foldID>14049</foldID>
        <workid>33964</workid>
    </work>
    <work>
        <userid>358611</userid>
        <foldID>14046</foldID>
        <workid>33960</workid>
    </work>
    <work>
        <userid>358611</userid>
        <foldID>14046</foldID>
        <workid>33959</workid>
    </work>
    <work>
        <userid>358542</userid>
        <foldID>14033</foldID>
        <workid>33951</workid>
    </work>   
</root>

works_1.xml

 

<?xml version="1.0" encoding="utf-8"?>
<root>
    <work>
        <userid>358457</userid>
        <foldID>14027</foldID>
        <workid>33946</workid>
    </work>
    <work>
        <userid>358413</userid>
        <foldID>14025</foldID>
        <workid>33936</workid>
    </work>
    <work>
        <userid>358413</userid>
        <foldID>14025</foldID>
        <workid>33935</workid>
    </work>
    <work>
        <userid>358413</userid>
        <foldID>14025</foldID>
        <workid>33934</workid>
    </work>
    <work>
        <userid>358458</userid>
        <foldID>14024</foldID>
        <workid>33931</workid>
    </work>
    <work>
        <userid>233263</userid>
        <foldID>8049</foldID>
        <workid>33927</workid>
    </work>
    <work>
        <userid>162003</userid>
        <foldID>14016</foldID>
        <workid>33925</workid>
    </work>
    <work>
        <userid>162003</userid>
        <foldID>14015</foldID>
        <workid>33919</workid>
    </work>
</root>

works_2.xml

 

<?xml version="1.0" encoding="utf-8"?>
<root>
    <work>
        <userid>358818</userid>
        <foldID>14082</foldID>
        <workid>34050</workid>
    </work>
    <work>
        <userid>358818</userid>
        <foldID>14082</foldID>
        <workid>34045</workid>
    </work>
    <work>
        <userid>196211</userid>
        <foldID>5503</foldID>
        <workid>11983</workid>
    </work>
    <work>
        <userid>92431</userid>
        <foldID>13756</foldID>
        <workid>33296</workid>
    </work>
    <work>
        <userid>358704</userid>
        <foldID>14089</foldID>
        <workid>34060</workid>
    </work>
    <work>
        <userid>359066</userid>
        <foldID>14094</foldID>
        <workid>34070</workid>
    </work>
    <work>
        <userid>358656</userid>
        <foldID>14061</foldID>
        <workid>33998</workid>
    </work>
    <work>
        <userid>359206</userid>
        <foldID>14104</foldID>
        <workid>34089</workid>
    </work>
</root>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More