【免费】ajax实例演示(ajax实例演示)资源-CSDN文库

共187个文件

jsp：59个

html：41个

js：27个

3星 · 超过75%的资源需积分: 0 36 浏览量 2008-10-08 12:52:13 上传评论收藏 3.74MB RAR 举报

**Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这种技术的最大优点是，用户可以一边浏览网页，一边进行数据交互，提高了用户体验。** ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许JavaScript在后台与服务器通信。通过创建XMLHttpRequest对象、打开连接、发送请求、接收响应等步骤，实现页面的局部更新。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.txt', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); ``` ### 2. Ajax请求类型 Ajax支持多种HTTP请求方法，如GET、POST、PUT、DELETE等。GET用于获取数据，POST用于提交数据，PUT用于更新数据，DELETE用于删除数据。 ### 3. 数据格式虽然名字中包含XML，但Ajax实际处理的数据格式不仅限于XML，还包括JSON、HTML、文本等。JSON由于其轻量级、易读性，成为最常用的数据交换格式。 ### 4. JSONP(JSON with Padding) 跨域问题是Ajax的一个限制，而JSONP是一种绕过同源策略的解决方案，通过动态插入`<script>`标签来实现跨域数据请求。 ```javascript function handleResponse(data) { // 处理返回的数据 } document.head.appendChild( Object.assign(document.createElement('script'), { src: 'http://example.com/data?callback=handleResponse', }) ); ``` ### 5. jQuery和Ajax jQuery库简化了Ajax操作，提供了`$.ajax()`, `$.get()`, `$.post()`等函数，使代码更简洁易懂。 ```javascript $.ajax({ url: 'data.json', type: 'GET', dataType: 'json', success: function(data) { // 处理返回的JSON数据 }, }); ``` ### 6. Promise和Ajax 现代浏览器中的XMLHttpRequest支持Promise，可以使用链式调用来处理异步操作。 ```javascript fetch('data.json') .then(response => response.json()) .then(data => { // 处理返回的JSON数据 }); ``` ### 7. Axios库 Axios是一个基于Promise的HTTP库，可用于浏览器和node.js中，它提供了一种更方便的方式来发送Ajax请求。 ```javascript axios.get('data.json').then(response => { // 处理返回的数据 }); ``` ### 8. 响应式设计和Ajax 结合Ajax，可以实现响应式设计，根据不同的设备或窗口大小加载不同的数据，提高页面性能。 ### 9. 错误处理在Ajax请求中，需要处理可能出现的错误，如网络中断、服务器错误等。可以通过监听`onerror`和`onreadystatechange`事件来进行错误处理。 ### 10. 轮询和长轮询在实时性需求较高的应用中，可以使用Ajax轮询或长轮询来实时获取服务器数据。 Ajax技术在Web开发中起着关键作用，通过它，我们可以构建更加交互性和高效的应用程序。无论是原生XMLHttpRequest，还是jQuery、Promise或第三方库如Axios，都为开发者提供了强大的工具来实现Ajax功能。

资源详情

资源评论

资源推荐

收起资源包目录

ajax实例演示(ajax实例演示) （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