ajax实现tab切换效果

技术2022-05-19 19

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代码：

view plaincopy to clipboardprint?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <meta http-equiv="pragma" content="no-cache"> <title>myTino月度优秀会员作品展示</title> <link type="text/css" href="css/reset.css" mce_href="css/reset.css" rel="stylesheet" media="all" /> <link type="text/css" href="css/default.css" mce_href="css/default.css" rel="stylesheet" media="all" />   <mce:script type="text/javascript" src="js/works.js" mce_src="js/works.js"></mce:script> <?php include_once("../header_index.php");?> <div id="wrap"> <div id="header"></div> <div id="bodyContent"> <div id="tabs" class="clearfix"> <ul> <li class="curTab" οnmοuseοver="changeTab(this,'works_0');"><h2>最近7天优秀作品</h2& gt;</li> <li οnmοuseοver="changeTab(this,'works_1');"><h2>本月度优秀作品</h2></li> <li οnmοuseοver="changeTab(this,'works_2');"><h2>随机推荐作品</h2></li> </ul> </div> <div id="worksContent"> <ul id="works" class="works clearfix"> </ul> </div> </div> <div id="footer"></div> <?php require_once("../../templates/foot.php")?> </div> <input type="hidden" id="works_0" value="" /> <input type="hidden" id="works_1" value="" /> <input type="hidden" id="works_2" value="" /> <?php include_once("../../commonphp/google_analytics.php");?> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <meta http-equiv="pragma" content="no-cache"> <title>myTino月度优秀会员作品展示</title> <link type="text/css" href="css/reset.css" mce_href="css/reset.css" rel="stylesheet" media="all" /> <link type="text/css" href="css/default.css" mce_href="css/default.css" rel="stylesheet" media="all" />   <mce:script type="text/javascript" src="js/works.js" mce_src="js/works.js"></mce:script> <?php include_once("../header_index.php");?> <div id="wrap"> <div id="header"></div> <div id="bodyContent"> <div id="tabs" class="clearfix"> <ul> <li class="curTab" οnmοuseοver="changeTab(this,'works_0');"><h2>最近7天优秀作品</h2& gt;</li> <li οnmοuseοver="changeTab(this,'works_1');"><h2>本月度优秀作品</h2></li> <li οnmοuseοver="changeTab(this,'works_2');"><h2>随机推荐作品</h2></li> </ul> </div> <div id="worksContent"> <ul id="works" class="works clearfix"> </ul> </div> </div> <div id="footer"></div> <?php require_once("../../templates/foot.php")?> </div> <input type="hidden" id="works_0" value="" /> <input type="hidden" id="works_1" value="" /> <input type="hidden" id="works_2" value="" /> <?php include_once("../../commonphp/google_analytics.php");?> </body></html>

css样式：

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

js代码：

view plaincopy to clipboardprint?/** * @author liuyong */ var xmlHttp; var xmlDoc; var works_0 =''; var works_1 =''; var works_2 =''; //标志变量，存储第一次请求拼好的content_str var divId = ''; function loadXmlStr(strxml){ //兼容IE和FF的加载xml字符串的通用函数 try{ xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.loadXML(strxml); } catch(e){ var oParser=new DOMParser(); xmlDoc=oParser.parseFromString(strxml,"text/xml"); } return xmlDoc; } function createXMLHttpRequest(){ if(window.ActiveXObject){ /*在IE下初始化XMLHttpRequest对象 */ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //新版本IE }catch(otherMicrosoft){ try{ //较老版本的 Internet Explorer xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); }catch(failed){ // 还是失败，那么就认为创建失败…… xmlHttp= false; } } }else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } if(!xmlHttp){ alert("创建 XMLHttpRequest 对象失败!"); } } function startRequest(fileName){ divId = fileName; createXMLHttpRequest(); try{ if(document.getElementById(fileName).value == '' ){ xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "data/" + fileName + ".xml", true); xmlHttp.send(null); }else{ document.getElementById("works").innerHTML = document.getElementById(fileName).value; } }catch(exception){ alert("您要访问的资源不存在!"); } } function handleStateChange(){ if(xmlHttp.readyState == 4){ if (xmlHttp.status == 200 || xmlHttp.status == 0){ // 取得XML的DOM对象 //alert(xmlHttp.responseText); xmlDoc = loadXmlStr(xmlHttp.responseText); // 取得XML文档的根 var root = xmlDoc.documentElement; try { // 取得<works>结果 var works = root.getElementsByTagName('work'); //alert(works.length); var userid; var foldID; var workid; var content_str = ''; //拼好的HTML字符串 for(i = 0;i<works.length;i++){ userid = works[i].getElementsByTagName("userid")[0].firstChild.nodeValue; foldID = works[i].getElementsByTagName("foldID")[0].firstChild.nodeValue; workid = works[i].getElementsByTagName("workid")[0].firstChild.nodeValue; 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>'; } document.getElementById("works").innerHTML = content_str; document.getElementById(divId).value = content_str; divId = ''; }catch(exception) { alert("异常情况！"); } } }else{ document.getElementById("works").innerHTML = '<img src="/" mce_src="/""images/loading.gif/" />'; } } function changeText(str,element){ if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById(element).innerText = str; }else{ document.getElementById(element).textContent = str; } } var arr_li; function changeTab(arg,con){ arr_li = document.getElementById("tabs").getElementsByTagName("li"); for(var i = 0;i<arr_li.length;i++){ arr_li[i].className = 'none'; } arg.className = 'curTab'; if(arg.className == 'curTab'){ if (con == 'works_0') { startRequest('works_0'); }else if(con == 'works_1'){ startRequest('works_1'); }else if(con == 'works_2'){ startRequest('works_2'); } } } window.onload = function(){ startRequest('works_0'); } /** * @author liuyong */var xmlHttp;var xmlDoc;var works_0 ='';var works_1 ='';var works_2 =''; //标志变量，存储第一次请求拼好的content_strvar divId = '';function loadXmlStr(strxml){ //兼容IE和FF的加载xml字符串的通用函数 try{ xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.loadXML(strxml); } catch(e){ var oParser=new DOMParser(); xmlDoc=oParser.parseFromString(strxml,"text/xml"); } return xmlDoc;}function createXMLHttpRequest(){ if(window.ActiveXObject){ /*在IE下初始化XMLHttpRequest对象 */ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //新版本IE }catch(otherMicrosoft){ try{ //较老版本的 Internet Explorer xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); }catch(failed){ // 还是失败，那么就认为创建失败…… xmlHttp= false; } } }else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } if(!xmlHttp){ alert("创建 XMLHttpRequest 对象失败!"); }}function startRequest(fileName){ divId = fileName; createXMLHttpRequest(); try{ if(document.getElementById(fileName).value == '' ){ xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "data/" + fileName + ".xml", true); xmlHttp.send(null); }else{ document.getElementById("works").innerHTML = document.getElementById(fileName).value; } }catch(exception){ alert("您要访问的资源不存在!"); } }function handleStateChange(){ if(xmlHttp.readyState == 4){ if (xmlHttp.status == 200 || xmlHttp.status == 0){ // 取得XML的DOM对象 //alert(xmlHttp.responseText); xmlDoc = loadXmlStr(xmlHttp.responseText); // 取得XML文档的根 var root = xmlDoc.documentElement; try { // 取得<works>结果 var works = root.getElementsByTagName('work'); //alert(works.length); var userid; var foldID; var workid; var content_str = ''; //拼好的HTML字符串 for(i = 0;i<works.length;i++){ userid = works[i].getElementsByTagName("userid")[0].firstChild.nodeValue; foldID = works[i].getElementsByTagName("foldID")[0].firstChild.nodeValue; workid = works[i].getElementsByTagName("workid")[0].firstChild.nodeValue; 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>'; } document.getElementById("works").innerHTML = content_str; document.getElementById(divId).value = content_str; divId = ''; }catch(exception) { alert("异常情况！"); } } }else{ document.getElementById("works").innerHTML = '<img src="/" mce_src="/""images/loading.gif/" />'; } }function changeText(str,element){ if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById(element).innerText = str; }else{ document.getElementById(element).textContent = str; }}var arr_li;function changeTab(arg,con){ arr_li = document.getElementById("tabs").getElementsByTagName("li"); for(var i = 0;i<arr_li.length;i++){ arr_li[i].className = 'none'; } arg.className = 'curTab'; if(arg.className == 'curTab'){ if (con == 'works_0') { startRequest('works_0'); }else if(con == 'works_1'){ startRequest('works_1'); }else if(con == 'works_2'){ startRequest('works_2'); } } }window.onload = function(){ startRequest('works_0');}

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>

本文来自博客，转载请标明出处：http://blog.csdn.net/liuyong0818/archive/2009/04/21/4098062.aspx

专利

最新回复(0)