使用Ajax可以无刷新即可向服务器提交数据,Ajax真的是很是厉害,或许WEB未来的世界是属于Ajax的~~~~~以下是基于Ajax的一个小相册实现无刷新即可浏览图片~~先看在火狐浏览器下的效果
更多效果请到我的相册--Ajax相册中查看.以下是相册的主要代码~~~~工程名为Ajax
<1>Ajax目录下show.html
<html>
<head>
<title>Album Show</title>
<link rel="stylesheet" type="text/css" href="new.css" />
<script src="all.js" type="text/javascript"></script>
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" onMouseMove="getPictures('landscape')">Landscapes</a>
<ul>
<li id="landscape">
</li>
</ul>
</li>
<li><a class="hide" onMouseMove="getPictures('tree')">Trees</a>
<ul>
<li id="tree">
</li>
</ul>
</li>
<li><a class="hide" onMouseMove="getPictures('bird')">Birds</a>
<ul>
<li id="bird">
</li>
</ul>
</li>
<li><a class="hide" onMouseMove="getPictures('people')">Peoples</a>
<ul>
<li id="people">
</li>
</ul>
</li>
<li><a class="hide" onClick="switchStyle('style.css','new.css')">Switch Style</a>
</li>
</ul>
</div>
</body>
</html>
<2>Ajax目录下new.css
.menu{
z-index:1;
margin:0px auto;
width:625px;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative
}
.menu UL{
border-top-width:0px;
padding-right:0px;
padding-left:0px;
padding-bottom:0px;
padding-top:0px;
border-left-width:0px;
border-bottom-width:0px;
margin:0px;
list-style-type:none;
border-right-width:0px
}
.menu UL LI{
float:left
}
.menu UL LI A{/*选项卡连接设置*/
border-right:#fff 1px solid;
border-top:#fff 1px solid;
display:block;
font-size:11px;
background:#7cfc00;
float:left;
border-left:#fff 0px solid;
width:124px;
color:#000;
line-height:30px;
border-bottom:#fff 0px solid;
height:30px;
text-align:center;
text-decoration:none
}
.menu UL LI A:visited{/*鼠标移出到选项卡上时,恢复初始状态*/
border-right:#fff 1px solid;
border-top:#fff 1px solid;
display:block;
font-size:11px;
background:#32cd32;/*11111111111111111111111*/
float:left;
border-left:#fff 0px solid;
width:124px;
color:#000;
line-height:30px;
border-bottom:#fff 0px solid;
height:30px;
text-align:center;
text-decoration:none
}
.menu UL LI UL{/*设置图片区域为不可见状态*/
display:none
}
.menu UL LI:hover A{/*当鼠标移动到选项卡时*/
background:#3cb371;/*2222222222222222222222*/
color:#fff
}
.menu UL LI:hover UL{/*当鼠标移动到选项卡时*/
display:block;
left:0px;
position:absolute;
top:31px;
text-align:left
}
.menu UL LI:hover UL LI{/*图片显示区域*/
border-right:#3cb371 20px solid;/*222222222222222222222*/
padding-right:60px;
border-top:#3cb371 20px solid;
padding-left:60px;
background:#66cdaa;/*33333333333333333333*/
padding-bottom:40px;
border-left:#3cb371 20px solid;
width:464px;
color:#000;
padding-top:40px;
border-bottom:#3cb371 20px solid;
position:relative;
height:365
}
.menu UL LI:hover UL LI A IMG{/*图片未放大之前的设置*/
border-top-width:0px;
border-left-width:0px;
border-bottom-width:0px;
margin:5px;
width:100px;
height:75px;
border-right-width:0px
}
.menu UL LI:hover UL LI A{/*图片连接器的设置*/
border-right:#888 1px solid;
border-top:#888 1px solid;
background:#eee;
float:left;
margin:1px;
border-left:#888 1px solid;
width:110px;
border-bottom:#888 1px solid;
height:85px
}
.menu UL LI:hover UL LI A:hover{
position:relative
}
.menu UL LI:hover UL LI A:hover IMG{
border-right:#888 1px solid;
padding-right:5px;
border-top:#888 1px solid;
padding-left:5px;
background:#ccc;
left:-50px;
padding-bottom:5px;
border-left:#888 1px solid;
width:200px;
padding-top:5px;
border-bottom:#888 1px solid;
position:absolute;
top:-38px;
height:150px
}
<3>Ajax目录下style.css
style.css的代码和new.css中的基本都一样只是把new.css中注释处/*11111111*/与/*2222222*/与/*33333333*/中的颜色值更改下就行,为了是改变不同风给而已,分别更改为:#c95081 #f7c4d9 #efdae7
<4>Ajax目录下all.js
function switchStyle(file1,file2){
var cssfile=document.getElementsByTagName("link")[0];
if(cssfile.getAttribute("href")==file1)
cssfile.setAttribute("href",file2);
else
cssfile.setAttribute("href",file1);
}
//创建XMLHttpRequest对象
function createAjaxObj(){
var httprequest=false
if(window.XMLHttpRequest)
{
httprequest=new XMLHttpRequest()
if(httprequest.overrideMimeType)
httprequest.overrideMimeType('text/xml')
}
else if(window.ActiveXObject)
{
try{
httprequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{