使用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{
httprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
return httprequest
}
//发送请求
var ajaxObject;
function getPictures(category){
ajaxObject=createAjaxObj();
ajaxObject.onreadystatechange=function()//请求状态变化时调用
{
changStateFunction(category);
}
var submitURL="picture?cate="+category;//请求发送的地址
ajaxObject.open('GET',submitURL,true);//建立连接
ajaxObject.send(null);//发送请求
var elmt=document.getElementById(category);
elmt.innerHTML="Loading..."//请求未完成时显示的状态
}
function changStateFunction(category){
if(ajaxObject.readyState==4)
{
if(ajaxObject.status==200)
parasData(category);
}
}
//处理返回结果
var name=[];
var src=[];
var description=[];
function parasData(category){
var xmlData=ajaxObject.responseXML;//得到返回的XML数据
var pictures=xmlData.getElementsByTagName("item");//获得所有item元素
for(var i=0;i<pictures.length;i++){
name[i]=pictures[i].getElementsByTagName("name")[0].firstChild.nodeValue;
src[i]=pictures[i].getElementsByTagName("url")[0].firstChild.nodeValue;
description[i]=pictures[i].getElementsByTagName("description")[0].firstChild.nodeValue;
}
var result="";
for(var i=0;i<name.length;i++)//将数组中的值起出,显示成HTML代码
{
result+='<a href=""><img src="images/'+src[i]+'"alt="'+description[i]+'">'+name[i]+'</a>';
}
var elmt=document.getElementById(category);
elmt.innerHTML=result;
}
<5>Ajax/WEB-INF目录下web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
version="2.4"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>picture</servlet-name>
<servlet-class>book.albumshow.pictureServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>picture</servlet-name>
<url-pattern>/picture</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>show.html</welcome-file>
</welcome-file-list>
</web-app>
<6>Ajax/WEB-INF/class目录下pictureServlet.java
package book.albumshow;
import java.sql.*;
import java.util.Vector;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
publicclass pictureServlet extends HttpServlet{
publicvoid doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,java.io.IOException{
String category=request.getParameter("cate");
String sql="select * from album where active_status='Y' and album_category='"
+category.toUpperCase()+ "'";
Connection con=null;
Statement stmt=null;
ResultSet rs=null;
Vector vData=new Vector();
response.setContentType("text/xml");
java.io.PrintWriter out=response.getWriter();
try{
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://localhost:3306/albumshow";
con=DriverManager.getConnection(url,"tang","admin");
stmt=con.createStatement();
rs=stmt.executeQuery(sql);
AlbumEO album;
while (rs.next()){
album=new AlbumEO();
album.setAlbumID(rs.getInt("ALBUM_ID"));
album.setAlbumName(rs.getString("ALBUM_NAME"));
album.setAlbumURL(rs.getString("ALBUM_URL"));
album.setAlbumDescription(rs.getString("ALBUM_DESC"));
album.setAlbumCategory(rs.getString("ALBUM_CATEGORY"));
album.setActiveStatus(rs.getString("ACTIVE_STATUS"));
vData.add(album);
}
out.print(parasToXML(vData));
}catch(Exception e){
e.printStackTrace();
}finally{
try{
if(stmt!=null)
stmt.close();
if(con!=null)
con.close();
}catch(SQLException sqle){
}
}
}
publicvoid doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,java.io.IOException{
doPost(request,response);
}
public String parasToXML(Vector v){
StringBuffer buf=new StringBuffer();
buf.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
buf.append("<pictures>");
for(int i=0;i<v.size();i++){
AlbumEO album=(AlbumEO)v.get(i);
buf.append("<item>");
buf.append("<name>"+album.getAlbumName()+"</name>");
buf.append("<url>"+album.getAlbumURL()+"</url>");
buf.append("<description>"+album.getAlbumDescription()+"</description>");
buf.append("</item>");
}
buf.append("</pictures>");
return buf.toString();
}
}
<7>Ajax/WEB-INF/class目录下AlbumEO.java
package book.albumshow;
publicclass AlbumEO{
public AlbumEO()
{
}
protectedintalbumID;
protected String albumName;
protected String albumURL;
protected String albumDescription;
protected String albumCategory;
protected String activeStatus;
public String getActiveStatus() {
returnactiveStatus;
}
publicvoid setActiveStatus(String activeStatus) {
this.activeStatus = activeStatus;
}
public String getAlbumCategory() {
returnalbumCategory;
}
publicvoid setAlbumCategory(String albumCategory) {
this.albumCategory = albumCategory;
}
public String getAlbumDescription() {
returnalbumDescription;
}
publicvoid setAlbumDescription(String albumDescription) {
this.albumDescription = albumDescription;
}
publicint getAlbumID() {
returnalbumID;
}
publicvoid setAlbumID(int albumID) {
this.albumID = albumID;
}
public String getAlbumName() {
returnalbumName;
}
publicvoid setAlbumName(String albumName) {
this.albumName = albumName;
}
public String getAlbumURL() {
returnalbumURL;
}
publicvoid setAlbumURL(String albumURL) {
this.albumURL = albumURL;
}
}
<8>在Ajax/images目录下还要放上相应的图片在这不罗嗦了,程序中还要用到数据库,数据库的建立也不在罗嗦了,以上给出的程序是给大家一个大概的流程,其实只要是为了知道Ajax工作的大概流程就够了,望能给新接触Ajax的未来之星有所帮助,高手的话就勉了 ~_~~~_~
posted on 2007-10-15 21:53
javapon 阅读(356)
评论(0) 编辑 收藏 所属分类:
Ajax