表现层：
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
<title>电子相册 </title>
<script type="text/javascript">
var selected = 0;
//定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
//该函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//这是一个 启动AJAX异步 通信的方法
function getPhoto(){
//创建一个XMLHttpRequest对象
createXMLHttpRequest();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor;
//通过GET方法向指定的URL建立服务器的调用
xmlHttp.open("GET","/getPhoto.action?selected="+selected);
//发送请求
xmlHttp.send(null);
}
//这是一个用来处理状态改变的函数
function processor(){
//定义一个变量用于存放从服务器返回的响应结果
var responseContext;
if(xmlHttp.readyState == 4){//如果响应完成
if(xmlHttp.status == 200){//如果返回成功
//取出服务器的响应内容
responseContext = xmlHttp.responseText;
document.all.photo.src = responseContext;
}
}
}
//"响应上一张
function prev(){
selected = (selected-1+5)%5;
getPhoto();
}
//"响应下一张
function next(){
selected = (selected+1+5)%5;
getPhoto();
}
</script>
</head>
<body>
<center>
<table border="0" bgcolor="#c0c0c0" width="300px" height="240px">
<tr><td colspan="2" align="center"><h2>电子相册</h2></td>
</tr>
<tr><td colspan="2" align="center"><img id="photo" src="/images/photo/photo1.gif"></td>
</tr>
<tr>
<td align="center"><span onClick="prev();" style="cursor:hand;">上一张 </span></td>
<td align="center"><span onClick="next();" style="cursor:hand;">下一张 </span></td>
</tr>
</table>
</center>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
${photoUrl}
控制层
package com.dicorp.ajax.ajax_web.actions;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Properties;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/*import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
*/
/*import org.jdom.Document;
import org.jdom.Element;
import org.jdom.output.Format;
import org.jdom.output.XMLOutputter;
import org.w3c.dom.CDATASection;
import org.w3c.dom.Comment;
import org.w3c.dom.ProcessingInstruction;
import org.w3c.dom.Text;
*/
import com.dicorp.ajax.ajax_web.createXMLUtils.CreateCounterXMLUtil;
import com.opensymphony.webwork.ServletActionContext;
import com.opensymphony.webwork.interceptor.ServletRequestAware;
import com.opensymphony.webwork.interceptor.ServletResponseAware;
import com.opensymphony.xwork.Action;
import com.opensymphony.xwork.ActionContext;
import javax.xml.transform.*;
import javax.xml.transform.dom.*;
import javax.xml.transform.stream.*;
import org.w3c.dom.*;
import java.io.*;
import java.net.URI;
import javax.xml.parsers.*;
import java.util.*;
public class GetPhotoAction implements Action ,ServletResponseAware,ServletRequestAware{
private String selected;
private HttpServletResponse response;
private HttpServletRequest request;
private String photoUrl ;
/* (non-Javadoc)
* @see com.opensymphony.xwork.Action#execute()
*/
public String execute() throws Exception {
String[] photos = {
"/images/photo/photo1.gif",
"/images/photo/photo2.gif",
"/images/photo/photo3.gif",
"/images/photo/photo4.gif",
"/images/photo/photo5.gif",
};
System.out.println("&**&*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+selected);
int index = Integer.parseInt(selected);
System.out.println("&**&*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"+ photos[index]);
photoUrl = photos[index];
return SUCCESS;
}
public String getPhotoUrl() {
return photoUrl;
}
public void setPhotoUrl(String photoUrl) {
this.photoUrl = photoUrl;
}
public String getSelected() {
return selected;
}
public void setSelected(String selected) {
this.selected = selected;
}
public void setServletResponse(HttpServletResponse response) {
this.response = response;
}
public void setServletRequest(HttpServletRequest request) {
this.request = request;
}
}
分享到：
相关推荐
这个“ASP.NET AJAX实现电子相册源码”项目，提供了创建动态、响应式的在线相册功能，其中包含了数据库文件，意味着它可能涉及到数据存储和检索，使得用户可以上传、浏览和管理他们的照片。 首先，让我们深入理解...
2. **异步上传**：用户在上传图片到电子相册时，也可以利用AJAX实现异步上传。上传过程中用户仍然可以继续浏览其他内容，无需等待上传完成。 3. **分页加载**：在电子相册中使用AJAX分页加载，可以在用户翻页时动态...
在本项目"用Ajax实现简单相册"中，我们将探讨如何利用Ajax来创建一个动态展示图片的相册，提高用户体验，减少服务器负载，以及实现页面无刷新浏览。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest，它...
通过学习和实践这部分内容，开发者可以构建出功能丰富、用户体验优秀的Ajax相册系统。 综上所述，Ajax技术为构建交互性强、响应迅速的相册系统提供了可能。通过理解其工作原理，熟练掌握相关API，并结合现代前端...
【Ajax电子相册】是一种利用Ajax（异步JavaScript和XML）技术实现的在线相册应用。它通过在后台与服务器进行数据交换，无需用户手动刷新整个网页，即可动态地加载和展示图片，提供了更为流畅、高效的用户体验。在...
总结起来，这个C#调用WebService实现的Ajax电子相册项目充分利用了XML的数据存储能力，WebService的跨平台通信特性，Ajax的页面无刷新功能，以及Jquery的DOM操作和动画功能。这些技术的结合，使得电子相册在保持高...
**Ajax技术详解与相册模块实现** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，极大地...
在电子相册系统中，Ajax被用来提升用户体验，例如，用户无需刷新整个页面即可实现照片的上传、删除、评论等功能，使得操作更加流畅。 5. **数据库**：电子相册系统需要持久化存储用户的数据，如用户信息、照片、...
《电子相册——基于JSP、Servlet、JavaBean与Ajax技术的实现》 电子相册是一种常见的网络应用，它允许用户在线存储、管理和分享个人照片。本项目是基于J2EE平台开发的一个完整实例，利用了JSP、Servlet、JavaBean、...
这个"电子相册，js实现的demo"就是一个用JavaScript语言编写的示例项目，它旨在展示如何利用JavaScript技术来构建一个交互式的电子相册。在计划中，这个demo未来将被封装成.NET库，方便开发者在.NET平台上快速集成和...
分类：添加，删除（AJAX），修改（AJAX），获取列表和分页（某个用户个人分类），设置代表照片（AJAX实现） 照片：添加，删除（AJAX），修改（AJAX），获取列表和分页（某个用户个人照片和分类中的照片） 评论：填写...
总之，使用jQuery实现电子相册是一种高效且灵活的方法，能够带来流畅的用户体验。通过合理地组织HTML结构，利用jQuery的API进行动态操作，以及考虑兼容性和用户体验优化，我们可以创建出一款功能完善的电子相册。
在本系统中，AJAX起到了关键的角色，它使得用户在浏览相册时可以实现无刷新操作，如滚动加载更多图片、点击图片查看大图等。通过XMLHttpRequest对象，JavaScript可以向服务器发送异步请求，并在接收到响应后更新DOM...
### 使用AJAX实现简单相册的关键技术点 #### 一、AJAX简介 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX ...
在电子相册系统中，`AJAX`主要用于实现照片的无刷新上传和浏览，提高了系统的响应速度和用户体验。 1. **照片上传**：利用`AJAX`，用户可以在后台上传照片而无需离开当前页面。通过创建一个`XMLHttpRequest`对象，...
3. **JavaScript**：作为客户端脚本语言，JavaScript是实现3D墙电子相册功能的重要工具。它可以处理用户交互、动态更新内容、控制3D效果等。可能使用了JavaScript库如Three.js或Pixi.js来简化3D图形编程，这些库提供...
【jQuery电子相册】是一种基于JavaScript库jQuery实现的动态相册展示方式，它结合了JSP（JavaServer Pages）技术，使得在Web应用中展示图片变得更加互动和吸引人。jQuery库以其简洁API和丰富的插件库，使得创建复杂...
在电子相册中，只有登录用户才能查看和管理自己的相册，这部分功能会涉及到相关配置和代码实现。 5. **图像处理**： 电子相册可能涉及图像上传、缩略图生成、裁剪等操作。ASP.NET可以利用System.Drawing命名空间...
本系统利用Java技术栈，结合Spring、Hibernate、Servlet和jQuery，打造了一个高效、易用且功能完善的电子相册系统。下面将详细阐述这些关键技术在系统中的应用。 一、Spring框架 Spring作为Java企业级应用的核心...