seo排名优化培训网站,2015做哪些网站致富,做女团学什么舞蹈视频网站,音乐网站开发目的在前二十天的学习中#xff0c;我们掌握了 JavaWeb 开发的核心技术#xff0c;包括 Servlet、JSP、会话管理、过滤器、监听器、文件操作、数据库交互、连接池、分页与排序等。今天我们将学习一项彻底改变 Web 应用交互方式的技术 ——AJAX#xff08;Asynchronous JavaScrip… 在前二十天的学习中我们掌握了 JavaWeb 开发的核心技术包括 Servlet、JSP、会话管理、过滤器、监听器、文件操作、数据库交互、连接池、分页与排序等。今天我们将学习一项彻底改变 Web 应用交互方式的技术 ——AJAXAsynchronous JavaScript and XML。传统的 Web 应用中每次数据交互都需要刷新整个页面用户体验较差。AJAX 通过在后台与服务器进行异步数据交换使网页可以在不重新加载整个页面的情况下实现部分内容的更新。这项技术是现代 Web 应用如 Gmail、Facebook、微博等实现流畅用户体验的基础。AJAX 概述什么是 AJAXAJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。Asynchronous异步指与服务器通信时浏览器不需要暂停等待服务器响应可以继续执行其他操作JavaScript核心编程语言用于发送请求、处理响应和更新页面And连接词XML早期主要用于数据交换的格式现在 JSON 更常用AJAX 的核心是XMLHttpRequest 对象XHR它允许浏览器与服务器进行异步通信。AJAX 的工作原理AJAX 的工作流程如下用户在网页上执行某个操作如点击按钮、输入文本JavaScript 捕获该事件创建 XMLHttpRequest 对象XMLHttpRequest 对象向服务器发送异步请求服务器处理请求返回数据通常是 JSON 或 XML 格式JavaScript 接收服务器返回的数据JavaScript 更新网页的部分内容而无需重新加载整个页面AJAX 的优势提升用户体验无需刷新整个页面减少等待时间和视觉干扰减少数据传输只传输需要更新的数据节省带宽提高交互性可以实现实时验证、自动完成等高级交互功能减轻服务器负担部分数据处理可以在客户端完成支持离线功能结合现代 API 可以实现数据本地存储和离线操作AJAX 的应用场景表单实时验证如用户名是否已存在动态加载数据如下拉列表联动、滚动加载更多实时搜索建议输入时自动提示匹配结果无刷新分页和排序实时数据展示如股票行情、在线聊天文件上传进度显示XMLHttpRequest 对象XMLHttpRequestXHR是 AJAX 的核心对象用于在后台与服务器交换数据。创建 XHR 对象不同浏览器创建 XHR 对象的方式略有差异标准写法如下
// 创建XMLHttpRequest对象
function createXHR() {var xhr;if (window.XMLHttpRequest) {// 现代浏览器IE7、Firefox、Chrome、Safari等xhr new XMLHttpRequest();} else {// 兼容IE6及以下版本xhr new ActiveXObject(Microsoft.XMLHTTP);}return xhr;
}
XHR 对象的常用属性属性描述readyState请求的状态码0 - 未初始化1 - 服务器连接已建立2 - 请求已接收3 - 请求处理中4 - 请求已完成且响应已就绪status服务器返回的 HTTP 状态码200 - 成功404 - 未找到500 - 服务器内部错误等statusText服务器返回的状态文本如 OK、Not FoundresponseText服务器返回的文本数据responseXML服务器返回的 XML 数据可作为 DOM 对象处理onreadystatechange每当readyState改变时触发的事件处理函数XHR 对象的常用方法方法描述open(method, url, async)初始化请求- method请求方法GET、POST 等- url请求地址- async是否异步true - 异步false - 同步send(data)发送请求- dataPOST 请求时的参数数据setRequestHeader(header, value)设置请求头信息需在open()之后、send()之前调用abort()取消当前请求getResponseHeader(header)获取指定响应头的值getAllResponseHeaders()获取所有响应头信息AJAX 的基本使用步骤使用 AJAX 与服务器交互的基本步骤创建 XMLHttpRequest 对象注册onreadystatechange事件处理函数使用open()方法初始化请求可选设置请求头信息使用send()方法发送请求在事件处理函数中处理服务器响应1. GET 请求示例GET 请求通常用于从服务器获取数据参数通过 URL 的查询字符串传递
// 发送GET请求
function sendGetRequest() {// 1. 创建XHR对象var xhr createXHR();// 2. 注册事件处理函数xhr.onreadystatechange function() {// 当请求完成且响应就绪if (xhr.readyState 4) {// 当HTTP状态码为200成功if (xhr.status 200) {// 处理响应数据var response xhr.responseText;console.log(服务器响应, response);document.getElementById(result).innerHTML response;} else {// 处理错误console.error(请求失败状态码, xhr.status);document.getElementById(result).innerHTML 请求失败 xhr.statusText;}}};// 3. 初始化请求带参数var username document.getElementById(username).value;// 对参数进行编码防止特殊字符问题var url GetDataServlet?username encodeURIComponent(username) t new Date().getTime();xhr.open(GET, url, true);// 4. 发送请求GET请求参数在URL中send()方法参数为nullxhr.send(null);
}
注意GET 请求的参数会显示在 URL 中安全性较低GET 请求有长度限制不同浏览器限制不同通常 2KB-8KB添加时间戳tnew Date().getTime()是为了避免浏览器缓存2. POST 请求示例POST 请求通常用于向服务器提交数据参数在请求体中传递
// 发送POST请求
function sendPostRequest() {// 1. 创建XHR对象var xhr createXHR();// 2. 注册事件处理函数xhr.onreadystatechange function() {if (xhr.readyState 4) {if (xhr.status 200) {var response xhr.responseText;console.log(服务器响应, response);document.getElementById(result).innerHTML response;} else {console.error(请求失败状态码, xhr.status);document.getElementById(result).innerHTML 请求失败 xhr.statusText;}}};// 3. 初始化请求var url PostDataServlet;xhr.open(POST, url, true);// 4. 设置请求头POST请求需要设置Content-Typexhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);// 5. 准备请求参数var username document.getElementById(username).value;var email document.getElementById(email).value;// 对参数进行编码var data username encodeURIComponent(username) email encodeURIComponent(email);// 6. 发送请求xhr.send(data);
}
POST vs GET特性GETPOST参数位置URL 查询字符串请求体长度限制有无由服务器配置决定缓存可被缓存通常不被缓存安全性低参数可见较高参数在请求体用途获取数据提交数据幂等性是多次请求结果相同否可能产生副作用处理 JSON 数据现代 Web 应用中JSONJavaScript Object Notation已成为 AJAX 数据交换的首选格式它比 XML 更轻量、更易解析。1. 服务器返回 JSON 数据在 Servlet 中返回 JSON 数据
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;WebServlet(/JsonDataServlet)
public class JsonDataServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 设置响应内容类型为JSONresponse.setContentType(application/json;charsetUTF-8);// 创建返回数据对象MapString, Object result new HashMap();try {// 获取请求参数String username request.getParameter(username);// 模拟数据库查询boolean exists admin.equals(username);// 构建响应数据result.put(success, true);result.put(message, exists ? 用户名已存在 : 用户名可用);result.put(exists, exists);} catch (Exception e) {result.put(success, false);result.put(message, 服务器错误 e.getMessage());}// 使用Jackson库将Java对象转换为JSON字符串ObjectMapper mapper new ObjectMapper();String json mapper.writeValueAsString(result);// 发送JSON响应response.getWriter().write(json);}
}
添加 Jackson 依赖Maven
dependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-databind/artifactIdversion2.13.3/version
/dependency
2. 客户端解析 JSON 数据客户端使用JSON.parse()方法解析 JSON 字符串
// 发送请求并处理JSON响应
function checkUsername() {var xhr createXHR();xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {// 解析JSON响应try {var result JSON.parse(xhr.responseText);var messageElement document.getElementById(message);if (result.success) {// 处理成功响应messageElement.textContent result.message;messageElement.style.color result.exists ? red : green;} else {// 处理错误响应messageElement.textContent 错误 result.message;messageElement.style.color red;}} catch (e) {console.error(JSON解析错误, e);document.getElementById(message).textContent 数据格式错误;}}};var username document.getElementById(username).value;var url JsonDataServlet?username encodeURIComponent(username) t new Date().getTime();xhr.open(GET, url, true);xhr.send(null);
}
3. 用户名实时验证示例结合上述代码实现一个用户名实时验证功能
% page contentTypetext/html; charsetUTF-8 pageEncodingUTF-8%
!DOCTYPE html
html
headtitle用户名实时验证/titlestyle.container { width: 500px; margin: 100px auto; }.form-group { margin: 20px 0; }label { display: inline-block; width: 100px; }input { padding: 8px; width: 250px; }#message { margin-left: 105px; height: 20px; }/style
/head
bodydiv classcontainerh2注册/h2div classform-grouplabel forusername用户名/labelinput typetext idusername onblurcheckUsername() onkeyupdebounceCheckUsername()/divdiv idmessage/divdiv classform-grouplabel forpassword密码/labelinput typepassword idpassword/divdiv classform-groupinput typebutton value注册 onclickregister()/div/divscript// 创建XHR对象的函数function createXHR() {var xhr;if (window.XMLHttpRequest) {xhr new XMLHttpRequest();} else {xhr new ActiveXObject(Microsoft.XMLHTTP);}return xhr;}// 防抖函数避免输入时频繁请求var timeout null;function debounceCheckUsername() {clearTimeout(timeout);// 延迟500毫秒执行避免输入过程中频繁请求timeout setTimeout(checkUsername, 500);}// 检查用户名函数前面已定义function checkUsername() {// ... 实现代码同上 ...}// 注册函数function register() {// ... 实现注册逻辑 ...}/script
/body
/html
AJAX 与表单提交使用 AJAX 提交表单可以避免页面刷新同时提供更灵活的错误处理和用户反馈。1. 基本表单提交
// 使用AJAX提交表单
function submitForm() {// 获取表单数据var username document.getElementById(username).value;var password document.getElementById(password).value;var email document.getElementById(email).value;// 简单验证if (!username || !password || !email) {alert(请填写完整信息);return;}// 创建XHR对象var xhr createXHR();// 处理响应xhr.onreadystatechange function() {if (xhr.readyState 4) {if (xhr.status 200) {try {var result JSON.parse(xhr.responseText);if (result.success) {// 注册成功alert(注册成功);// 可以跳转到登录页// window.location.href login.jsp;} else {// 注册失败alert(注册失败 result.message);}} catch (e) {alert(服务器响应格式错误);}} else {alert(请求失败状态码 xhr.status);}}};// 发送POST请求xhr.open(POST, RegisterServlet, true);xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);// 构建表单数据var data username encodeURIComponent(username) password encodeURIComponent(password) email encodeURIComponent(email);xhr.send(data);
}
2. 处理文件上传AJAX 也可以处理文件上传需要使用FormData对象
// 使用AJAX上传文件
function uploadFile() {// 获取文件输入元素var fileInput document.getElementById(file);var file fileInput.files[0];// 检查文件是否选择if (!file) {alert(请选择要上传的文件);return;}// 检查文件类型var allowedTypes [image/jpeg, image/png, image/gif];if (!allowedTypes.includes(file.type)) {alert(只允许上传JPG、PNG、GIF格式的图片);return;}// 检查文件大小限制5MBif (file.size 5 * 1024 * 1024) {alert(文件大小不能超过5MB);return;}// 创建FormData对象var formData new FormData();formData.append(file, file);formData.append(description, document.getElementById(description).value);// 创建XHR对象var xhr createXHR();// 处理上传进度xhr.upload.onprogress function(event) {if (event.lengthComputable) {var percent (event.loaded / event.total) * 100;document.getElementById(progressBar).style.width percent %;document.getElementById(progressText).textContent Math.round(percent) %;}};// 处理响应xhr.onreadystatechange function() {if (xhr.readyState 4) {if (xhr.status 200) {var result JSON.parse(xhr.responseText);if (result.success) {alert(上传成功);document.getElementById(result).innerHTML 文件路径 result.filePath br 预览img src result.filePath stylemax-width: 300px;;} else {alert(上传失败 result.message);}} else {alert(上传失败状态码 xhr.status);}}};// 发送请求xhr.open(POST, FileUploadServlet, true);// 上传文件时不要设置Content-Type浏览器会自动处理xhr.send(formData);
}
对应的 JSP 页面
div classform-grouplabel forfile选择文件/labelinput typefile idfile acceptimage/*
/div
div classform-grouplabel fordescription描述/labelinput typetext iddescription placeholder请输入文件描述
/div
div classprogress stylewidth: 360px; height: 20px; border: 1px solid #ccc; margin-left: 105px;div idprogressBar stylewidth: 0%; height: 100%; background-color: #4CAF50;/div
/div
div idprogressText stylemargin-left: 105px; margin-top: 5px;0%/div
div classform-groupinput typebutton value上传 onclickuploadFile()
/div
div idresult stylemargin-left: 105px; margin-top: 10px;/div
AJAX 异步分页案例结合之前的分页技术使用 AJAX 实现无刷新分页1. 分页 Servlet
WebServlet(/AjaxUserPageServlet)
public class AjaxUserPageServlet extends HttpServlet {private UserDAO userDAO new UserDAO();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType(application/json;charsetUTF-8);// 获取分页参数int currentPage 1;int pageSize 10;try {currentPage Integer.parseInt(request.getParameter(currentPage));pageSize Integer.parseInt(request.getParameter(pageSize));} catch (NumberFormatException e) {// 使用默认值}// 获取查询条件String username request.getParameter(username);// 获取排序参数String sortField request.getParameter(sortField);String sortOrder request.getParameter(sortOrder);// 查询分页数据PageBeanUser pageBean new PageBean(pageSize, currentPage);pageBean.setSortField(sortField);pageBean.setSortOrder(sortOrder);if (username ! null !username.trim().isEmpty()) {pageBean userDAO.getUsersByConditionSortAndPage(username.trim(), pageBean);} else {pageBean userDAO.getUsersByConditionSortAndPage(null, pageBean);}// 转换为JSON并响应ObjectMapper mapper new ObjectMapper();// 处理日期格式mapper.setDateFormat(new SimpleDateFormat(yyyy-MM-dd HH:mm:ss));String json mapper.writeValueAsString(pageBean);response.getWriter().write(json);}
}
2. 客户端分页实现
% page contentTypetext/html; charsetUTF-8 pageEncodingUTF-8%
!DOCTYPE html
html
headtitleAJAX分页示例/titlestyle/* 样式省略参考之前的分页页面 *//style
/head
bodydiv classcontainerh2用户列表AJAX分页/h2!-- 搜索栏 --div classsearch-barinput typetext idusername placeholder请输入用户名搜索input typebutton value搜索 onclickloadPage(1)select idpageSize onchangeloadPage(1)option value55条/页/optionoption value10 selected10条/页/optionoption value2020条/页/option/select/div!-- 数据表格 --tabletheadtrthID/ththa hrefjavascript:sortBy(username)用户名/a/ththa hrefjavascript:sortBy(email)邮箱/a/ththa hrefjavascript:sortBy(createTime)注册时间/a/ththa hrefjavascript:sortBy(status)状态/a/th/tr/theadtbody iduserTableBody!-- 数据将通过AJAX动态加载 --trtd colspan5 styletext-align: center;加载中.../td/tr/tbody/table!-- 分页导航 --div idpagination classpage-nav!-- 分页导航将通过AJAX动态生成 --/div!-- 加载状态提示 --div idloading styledisplay: none; text-align: center; padding: 20px;加载中.../div/divscript// 当前页码和分页参数var currentPage 1;var pageSize 10;var sortField createTime;var sortOrder DESC;// 页面加载完成后加载第一页数据window.onload function() {loadPage(1);};// 加载指定页数据function loadPage(pageNum) {// 显示加载状态document.getElementById(loading).style.display block;// 更新当前页码currentPage pageNum;// 获取查询条件var username document.getElementById(username).value.trim();pageSize document.getElementById(pageSize).value;// 创建XHR对象var xhr createXHR();// 处理响应xhr.onreadystatechange function() {if (xhr.readyState 4) {// 隐藏加载状态document.getElementById(loading).style.display none;if (xhr.status 200) {try {var pageBean JSON.parse(xhr.responseText);// 更新表格数据updateTable(pageBean.dataList);// 更新分页导航updatePagination(pageBean);} catch (e) {console.error(解析JSON失败, e);document.getElementById(userTableBody).innerHTML trtd colspan5 styletext-align: center; color: red;数据格式错误/td/tr;}} else {document.getElementById(userTableBody).innerHTML trtd colspan5 styletext-align: center; color: red;加载失败状态码 xhr.status /td/tr;}}};// 构建请求URLvar url AjaxUserPageServlet? currentPage pageNum pageSize pageSize username encodeURIComponent(username) sortField sortField sortOrder sortOrder t new Date().getTime();// 发送请求xhr.open(GET, url, true);xhr.send(null);}// 更新表格数据function updateTable(userList) {var tableBody document.getElementById(userTableBody);if (userList.length 0) {tableBody.innerHTML trtd colspan5 styletext-align: center;暂无数据/td/tr;return;}var html ;for (var i 0; i userList.length; i) {var user userList[i];html tr;html td user.id /td;html td user.username /td;html td user.email /td;html td user.createdTime /td;html td (user.status 1 ? span stylecolor: green;正常/span : span stylecolor: red;禁用/span) /td;html /tr;}tableBody.innerHTML html;}// 更新分页导航function updatePagination(pageBean) {var pagination document.getElementById(pagination);var html ;// 首页html a hrefjavascript:loadPage(1) (pageBean.currentPage 1 ? stylepointer-events: none; opacity: 0.5; : ) 首页/a;// 上一页html a hrefjavascript:loadPage( pageBean.prevPage ) (!pageBean.hasPrevPage ? stylepointer-events: none; opacity: 0.5; : ) 上一页/a;// 页码var startPage Math.max(1, pageBean.currentPage - 3);var endPage Math.min(pageBean.totalPage, pageBean.currentPage 3);// 调整页码范围if (endPage - startPage 6 pageBean.totalPage 6) {if (startPage 1) {endPage 7;} else if (endPage pageBean.totalPage) {startPage pageBean.totalPage - 6;}}for (var i startPage; i endPage; i) {if (i pageBean.currentPage) {html span classactive i /span;} else {html a hrefjavascript:loadPage( i ) i /a;}}// 下一页html a hrefjavascript:loadPage( pageBean.nextPage ) (!pageBean.hasNextPage ? stylepointer-events: none; opacity: 0.5; : ) 下一页/a;// 末页html a hrefjavascript:loadPage( pageBean.totalPage ) (pageBean.currentPage pageBean.totalPage ? stylepointer-events: none; opacity: 0.5; : ) 末页/a;// 分页信息html span共 pageBean.totalCount 条记录共 pageBean.totalPage 页当前第 pageBean.currentPage 页/span;pagination.innerHTML html;}// 排序功能function sortBy(field) {if (sortField field) {// 切换排序方向sortOrder sortOrder ASC ? DESC : ASC;} else {// 新的排序字段默认降序sortField field;sortOrder DESC;}// 重新加载第一页loadPage(1);}// 创建XHR对象的函数function createXHR() {var xhr;if (window.XMLHttpRequest) {xhr new XMLHttpRequest();} else {xhr new ActiveXObject(Microsoft.XMLHTTP);}return xhr;}/script
/body
/html
AJAX 最佳实践1. 错误处理完善的错误处理是 AJAX 应用的重要组成部分
// 健壮的AJAX错误处理
function safeAjaxRequest(url, method, data, successCallback, errorCallback) {// 参数验证if (!url || !method) {if (errorCallback) errorCallback(new Error(URL和请求方法不能为空));return;}var xhr createXHR();// 超时设置5秒xhr.timeout 5000;xhr.onreadystatechange function() {if (xhr.readyState 4) {if (xhr.status 200) {try {// 尝试解析JSONvar response JSON.parse(xhr.responseText);if (successCallback) successCallback(response);} catch (e) {if (errorCallback) {errorCallback(new Error(响应数据格式错误: e.message));} else {console.error(响应数据格式错误: , e);}}} else {var errorMsg 请求失败状态码: xhr.status;if (xhr.status 404) errorMsg 请求的资源不存在;if (xhr.status 500) errorMsg 服务器内部错误;if (errorCallback) {errorCallback(new Error(errorMsg));} else {console.error(errorMsg);}}}};// 网络错误处理xhr.onerror function() {var error new Error(网络错误无法连接到服务器);if (errorCallback) errorCallback(error);else console.error(error.message);};// 超时处理xhr.ontimeout function() {var error new Error(请求超时请稍后重试);if (errorCallback) errorCallback(error);else console.error(error.message);};// 发送请求xhr.open(method, url, true);if (method.toUpperCase() POST !(data instanceof FormData)) {xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);}xhr.send(data || null);// 返回xhr对象允许调用abort()return xhr;
}
2. 性能优化请求合并将多个小请求合并为一个大请求减少 HTTP 请求次数请求防抖对于频繁触发的事件如输入、滚动延迟发送请求缓存响应对不常变化的数据进行本地缓存减少重复请求压缩数据使用 gzip 压缩服务器响应减少传输数据量使用 HTTP/2支持多路复用提高并发请求效率预加载在空闲时预加载可能需要的数据3. 安全性考虑防止 XSS 攻击服务器对输出进行 HTML 转义客户端使用textContent而非innerHTML插入不可信内容防止 CSRF 攻击使用 CSRF 令牌验证请求来源检查 Referer 请求头数据验证客户端验证仅作为辅助必须在服务器端进行严格验证对所有用户输入进行过滤和转义限制请求频率服务器端实现限流机制防止恶意请求客户端添加请求间隔限制4. 用户体验优化加载状态反馈显示加载动画或进度条提供取消请求的选项错误提示友好使用用户易懂的语言描述错误提供解决问题的建议离线支持使用 Service Worker 缓存静态资源实现离线操作和数据同步进度指示对于耗时操作如下载、上传显示进度信息预估完成时间现代 AJAX 替代方案虽然原生 XMLHttpRequest 功能强大但使用起来比较繁琐。现代前端开发中有更便捷的替代方案1. Fetch APIFetch API 是现代浏览器提供的用于替代 XMLHttpRequest 的 API基于 Promise语法更简洁
// 使用Fetch API发送请求
fetch(JsonDataServlet?username encodeURIComponent(username)).then(response {if (!response.ok) {throw new Error(HTTP error, status response.status);}return response.json();}).then(data {console.log(成功:, data);// 处理数据}).catch(error {console.error(错误:, error);});
2. AxiosAxios 是一个流行的第三方 AJAX 库支持 Promise API提供了更多功能
// 使用Axios发送请求
axios.get(JsonDataServlet, {params: {username: username}
})
.then(response {console.log(成功:, response.data);// 处理数据
})
.catch(error {console.error(错误:, error);
});
在 JavaWeb 项目中使用 Axios只需引入 CDN
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
总结与实践知识点回顾AJAX 基础AJAX 允许在不刷新页面的情况下与服务器交换数据核心是 XMLHttpRequest 对象负责异步通信支持 GET 和 POST 等 HTTP 方法数据交互服务器通常返回 JSON 格式数据客户端使用 JSON.parse () 解析响应可以提交表单数据和上传文件高级应用实时验证如用户名唯一性检查异步分页无刷新加载分页数据文件上传带进度显示的文件上传最佳实践完善的错误处理和超时控制性能优化请求合并、防抖、缓存安全性考虑防止 XSS、CSRF 攻击良好的用户体验加载状态、友好提示实践任务实时聊天系统使用 AJAX 实现简单的实时聊天功能定期轮询服务器获取新消息支持发送消息和显示消息历史动态数据仪表盘实现数据的实时刷新添加图表展示使用 Chart.js支持数据筛选和时间范围选择无刷新购物车实现商品的添加、删除、数量修改实时计算总价和优惠信息支持本地存储购物车数据
