ajax经典案例源码(Jsp)资源-CSDN文库

共187个文件

jsp：59个

html：41个

js：27个

ajax

源码

5星 · 超过95%的资源需积分: 9 175 浏览量 2008-10-31 22:03:38 上传评论 1 收藏 3.74MB RAR 举报

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这使得网页更加互动，用户体验更佳，因为它减少了等待时间和网络流量。本压缩包包含了一系列使用JSP（JavaServer Pages）实现的Ajax经典案例源码，涵盖了多种实用功能，如多级联动菜单、动态树形列表、无刷新回帖等。 1. **多级联动菜单**：这种效果常用于网站导航，用户选择一级菜单后，二级菜单会根据一级菜单的选择动态加载，无需跳转页面。通过Ajax向服务器请求数据，返回各级菜单的选项，实现实时更新。 2. **动态树形列表**：树形结构的数据在网站管理界面中常见，如文件目录结构。Ajax可以用来实时获取子节点信息，用户点击父节点时，其子节点动态展开或收缩，提高了操作效率。 3. **无刷新回帖**：在论坛或社交媒体中，用户发表评论或回复时，无需刷新整个页面，新帖子能立即显示出来。Ajax在此过程中负责发送用户输入的数据到服务器，并将新产生的帖子信息返回，插入到相应位置。 4. **文件上传进度条显示**：在文件上传过程中，提供进度条让用户了解上传状态，增强用户体验。Ajax可以实时获取上传进度信息并更新界面，让用户知道上传是否成功以及剩余时间。 5. **大量数据动态查询**：对于大数据量的展示，例如搜索结果，Ajax可以帮助分页加载数据，只请求和显示当前需要的部分，避免一次性加载所有数据导致页面卡顿。 6. **购物车**：在电商网站上，用户添加商品到购物车、修改数量或删除商品，都可以通过Ajax实现，保持购物车状态实时同步，同时不影响其他页面的操作。 7. **聊天室**：聊天室的实时通信功能依赖于Ajax的长轮询或WebSocket技术，用户发送的消息能即时推送给其他在线用户，且接收新消息时无需刷新页面。 8. **灯箱效果**：图片预览功能，点击小图后，大图会在当前页面以弹出窗口的形式显示，用户可以关闭窗口继续浏览页面。Ajax在此处理图片请求，实现平滑过渡。 9. **自动保存草稿**：在表单填写过程中，如文章编辑，Ajax可定时将用户输入内容发送至服务器保存为草稿，防止因意外情况丢失用户的工作。 10. **考试系统**：在在线考试场景下，Ajax可以确保题目加载、提交答案、计时等功能的顺畅运行，提高考试系统的响应速度和用户体验。以上这些实例展示了Ajax在网页交互中的广泛应用，通过学习和理解这些源码，开发者可以更好地掌握Ajax技术，提升Web应用的性能和用户体验。在实际项目中，结合JSP或其他服务器端技术，Ajax可以创造出更多富有创新性的功能。

资源推荐

资源详情

资源评论

收起资源包目录

ajax 经典案例源码(Jsp) （187个子文件）

DBUtils.class 2KB

Product.class 2KB

ShoppingCart.class 2KB

UploadListener.class 2KB

UploadInfo.class 1KB

MonitoredDiskFileItemFactory.class 1KB

MonitoredOutputStream.class 1KB

XMLUtils.class 1KB

MonitoredDiskFileItem.class 1KB

UploadMonitor.class 981B

OutputStreamListener.class 237B

thickbox.css 3KB

bbs.css 1KB

address.css 1KB

task.css 1KB

tree.css 613B

tree.css 463B

loadingAnimation.gif 7KB

title.gif 3KB

rating.gif 725B

insert.gif 111B

task.html 16KB

calendar.html 13KB

index.html 13KB

address.html 10KB

calc.html 8KB

query_step.html 6KB

word_guess.html 6KB

wishes.html 6KB

auto_login.html 5KB

slideshow.html 5KB

suggest.html 5KB

chatroom.html 5KB

word_tip.html 5KB

select_menu.html 5KB

menu.html 5KB

slider.html 4KB

auto_save.html 4KB

online_dict.html 4KB

album.html 3KB

stock.html 3KB

quick_search.html 3KB

read_rss.html 3KB

server_test.html 3KB

tab_page.html 3KB

read_source.html 3KB

thickbox.html 3KB

postalcode.html 2KB

mail_list.html 2KB

server_time.html 2KB

spell_check.html 2KB

google_ajax_search.html 2KB

upload.html 2KB

explain.html 1KB

intro.html 659B

index.html 617B

amazon.html 426B

tree.html 410B

page1.html 284B

test1.html 151B

sample.html 73B

mysql-connector-java-5.0.4-bin.jar 484KB

dom4j-1.6.1.jar 307KB

commons-httpclient-3.0.1.jar 273KB

jaxen-1.1-beta-6.jar 239KB

dwr.jar 181KB

commons-io.jar 60KB

commons-logging.jar 52KB

commons-codec-1.3.jar 46KB

commons-fileupload.jar 31KB

json_simple.jar 14KB

pic004.jpg 186KB

pic005.jpg 147KB

pic002.jpg 132KB

pic001.jpg 102KB

pic003.jpg 81KB

preview_pic005.jpg 8KB

preview_pic004.jpg 7KB

preview_pic002.jpg 7KB

preview_pic001.jpg 7KB

preview_pic003.jpg 6KB

rico.js 88KB

jquery.js 48KB

prototype.js 46KB

共 187 条

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery.js"></script> <link href="task.css" type="text/css" rel="stylesheet"> <title>个人任务管理</title> <script type="text/javascript"> var currListId; //当前显示的任务列表 //登录系统 function login() { var userName = $("#userName").val(); //获取用户名 var password = $("#password").val(); //获取密码 //当用户名和密码都非空时自动登录 if (userName != "" && password != "") { $.post("taskservice.jsp", //服务器页面地址 { action: "login", //action参数 userName: userName, //用户名参数 password: password //密码参数 }, function(result) { //如果结果的首字符为1，表示登录成功 if (result.substr(0,1) == "1") { $("#userName").val(""); //清空userName文本框 $("#password").val(""); //清空password文本框 $("#login").hide(); //隐藏登录区域 $("#taskContainer").show(); //显示任务管理区域 getLists(); //获取任务列表 $("#loginInfo").html(result.substr(1)).show(); //显示登录用户信息 } else { alert(result.substr(1)); //提示登录错误信息 } } ); } else { alert("用户名和密码必须填写完整后才可以登录。"); } } //获取任务列表 function getLists() { $.getJSON("taskservice.jsp", //服务器页面地址 { action: "getLists" //action参数 }, function(json) { //回调函数 $("#lists").empty(); //清空现有列表 $(json).each(function(i) { //遍历结果数组 //创建任务列表项容器div var box = $(document.createElement("div")); box.addClass("box"); box.append("·"); //创建任务列表项span var spanNode = $(document.createElement("span")); spanNode.id("list" + json[i].id); //设置任务id spanNode.addClass("pointer"); //增加class样式 spanNode.addClass("list"); //增加class样式 spanNode.click(function(){ //设置鼠标点击响应函数 getTasks(json[i].id); //鼠标点击后获取列表内任务 }); spanNode.html(json[i].name); //设置显示的任务列表项名称 box.append(spanNode); //将任务列表项追加到容器中 //在任务列表项容器中继续追加DEL操作span $(box).append("<span class='operation pointer' onclick='delList(" + json[i].id + ")'>[ DEL ]</span>"); //在任务列表项容器中继续追加EDIT操作span $(box).append("<span class='operation pointer' onclick='editList(" + json[i].id + ")'>[ EDIT ]</span>"); $("#lists").append(box); //将任务列表项容器加入到列表中 }); //在列表中追加添加新列表表单 $("#lists").append("<div><input type='text' id='newListName'></div>"); $("#lists").append("<div><input type='button' value='添加新列表' onclick='addNewList()'></div>"); } ); } //获取列表中的所有任务 function getTasks(listId) { $.getJSON("taskservice.jsp", //服务器页面地址 { action: "getTasks", //action参数 listId: listId //列表id参数 }, function(json) { //回调函数 $("#tasks").empty(); //清空当前任务 $("#currentList").html($("#list" + listId).html()); //显示任务列表名称 currListId = listId; //设置当前任务列表编号 $(json).each(function(i) { //遍历结果数组 //创建任务容器div var box = $(document.createElement("div")); box.addClass("box"); box.append("·"); //创建任务span var spanNode = $(document.createElement("span")); spanNode.id("task" + json[i].id); //设置任务id spanNode.addClass("pointer"); //增加class样式 spanNode.addClass("task"); //增加class样式 spanNode.addClass("status" + json[i].status); //增加状态样式 spanNode.click(function() { //设置鼠标点击响应函数 changeTaskStatus(json[i].id) //鼠标点击后改变任务状态 }); spanNode.html(json[i].name); //设置显示的任务名称 box.append(spanNode); //将任务追加到容器中 //在任务容器中继续追加DEL操作span $(box).append("<span class='operation pointer' onclick='delTask(" + json[i].id + ")'>[ DEL ]</span>"); //在任务容器中继续追加DEL操作span $(box).append("<span class='operation pointer' onclick='editTask(" + json[i].id + ")'>[ EDIT ]</span>"); $("#tasks").append(box); //将任务容器加入到列表中 }); //在任务最后追加添加新任务表单 $("#tasks").append("<div><input type='text' id='newTaskName'></div>"); $("#tasks").append("<div><input type='button' value='添加新任务' onclick='addNewTask()'></div>"); } ); } //改变任务状态 function changeTaskStatus(taskId) { var taskNode = $("#task" + taskId); //获取任务节点 //根据当前状态改变为相反状态并提交服务器修改数据库 if (taskNode.attr("class").indexOf("status0") != -1) { taskNode.removeClass("status0"); //取消原有class样式 taskNode.addClass("status1"); //设置新class样式 $.post("taskservice.jsp", //服务器目标页面 { action: "changeTaskStatus", //action参数 taskId: taskId, //任务编号参数 status: 1 //目标状态 }, function(result) { //回调函数 displayStatus(result); //显示操作结果 } ); } else { taskNode.removeClass("status1"); //取消原有class样式 taskNode.addClass("status0"); //设置新class样式 $.post("taskservice.jsp", //服务器目标页面 { action: "changeTaskStatus", //action参数 taskId: taskId, //任务编号参数 status: 0 //目标状态 }, function(result) { //回调函数 displayStatus(result); //显示操作结果 } ); } } //添加新任务列表 function addNewList() { var listName = $("#newListName").val(); //获取列表名称 //进行列表名称的非空判断 if

评论收藏

内容反馈

zhuxiaolin0822

2013-05-23

讲解很详细，很不错的资料，找了好久终于找到了
ybc77107

2014-03-05

很好用啊，很正确
sandy8877

2012-07-18

适合初学者，资料是不错的。
jiangpandubu03

2012-03-25

终于找到了，以前看过这本书，想找源码再看看，在工程中用的到，终于找到了，初学ajax的人可以看看学习一下