Ajax异步调用

张国伟  金牌会员 | 2024-11-12 05:20:32 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 819|帖子 819|积分 2457

一、概述

Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。Ajax是一种Web应用技能，该技能是在JavaScript、DOM、服务器配合下，实现浏览器向服务器发送异步哀求。
Ajax技能用于页面的局部更新，同步调用会对客户使用造成影响，好比当你想获取一张图片时，页面需要通过一系列哀求，之后浏览器把整个页面重新发送，花费时间长。异步调用便办理了这个我题目。Ajax异步哀求方式不向服务器发出哀求，会得到数据后再更新页面（通过DOM操纵修改页面内容），整个过程不会发生页面跳转或刷新操纵。
二、jQuery框架

要实现Ajax异步刷新就需要使用到JavaScript和DOM技能，但使用JavaScript实现Ajax异步刷新比力复杂，而且需要考虑到跨域等题目，因此，人们在Web项目开辟过程中提供了很多框架，对Ajax做了一系列封装简化，使操纵更方便快捷。此中，最常用的框架为jQuery。
2.1 jQuery底子知识

官网下载后，添加再web目次下，之后在需要的HTMl和JSp中引入即可。
引入方式：
   <script src="jquery-3.7.1.js"></script>
  jQuery的常用操纵包罗选择器的使用、元素对象的操纵、事件的绑定、链式编程.
jQuery中的load()方法

load(url,data,callback)


  • url:必选，指定加载资源的路径
  • data:可选，发送至服务器的数据
  • callback:可选，哀求完成时执行的函数
使用第一个参数
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5.     <script src="/jquery-3.7.1.js"></script>
  6. </head>
  7. <body>
  8. <button id="btn">加载数据</button>
  9. <div id="box"></div>
  10. <script type="text/javascript">
  11.     $('#btn').click(function (){
  12.         $('#box').load('http://localhost:8080/jQuery/data.jsp')
  13.     });
  14. </script>
  15. </body>
  16. </html>
复制代码
 data.jsp
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5. </head>
  6. <body>
  7. <h3>静夜思</h3>
  8. <h6>唐 李白</h6>
  9. <pre>
  10.   床前明月光，
  11.   疑似地上霜。
  12.   举头望明月，
  13.   低头思故乡。
  14. </pre>
  15. </body>
  16. </html>
复制代码
运行结果

第二个参数
demo02.jsp
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>Title</title>
  6.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  7.     <script>
  8.         $(document).ready(function() {
  9.             $('#btn').click(function () {
  10.                 $('#box').load('http://localhost:8080/loadServlet', {username: 'zhangsan', password: '123'});
  11.             });
  12.         });
  13.     </script>
  14. </head>
  15. <body>
  16. <button id="btn">加载数据</button>
  17. <div id="box"></div>
  18. </body>
  19. </html>
复制代码
对应转发的servlet类
  1. @WebServlet("/loadServlet")
  2. public class LoadServlet extends HttpServlet {
  3.     @Override
  4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  5.         String username = req.getParameter("username");
  6.         String password = req.getParameter("password");
  7.         resp.setContentType("text/html;charset=UTF-8");
  8.         resp.getWriter().println("注册成功！<br> 用户名： " + username + ", 密码：" + password);
  9.     }
  11.     @Override
  12.     protected void doPut(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  13.         super.doPut(req, resp);
  14.     }
  15. }
复制代码
第三个参数
回调函数，该函数在哀求数据加载完成后执行。回调函数用于获取本次哀求的相关信息，它有3个默认参数，分别表示相应数据、哀求状态和XMLHttpRequest对象。 此中，哀求状态共有5种，分别为success（成功）、notmodified（未修改）、error（错误）、timeout（超时）和parsererror（剖析错误）。
在demo02.jsp中举行修改
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>Title</title>
  6.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  7.     <script>
  8.         $(document).ready(function() {
  9.             $('#btn').click(function () {
  10.                 $('#box').load('http://localhost:8080/loadServlet', {username: 'itcast', password: 123},
  11.                     function(responseData, status, xhr){
  12.                         console.log(responseData);        // 输出请求的数据
  13.                         console.log(status);                // 输出请求状态
  14.                         console.log(xhr);                // 输出XMLHttpRequest对象
  15.                     })
  16.             });
  17.         });
  18.     </script>
  19. </head>
  20. <body>
  21. <button id="btn">加载数据</button>
  22. <div id="box"></div>
  23. </body>
  24. </html>
复制代码
发送GET和POST哀求

浏览器向服务器发送的哀求包罗GET哀求和POST哀求，为此，jQuery提供了$.get()方法和$.post()方法，分别用于发送GET哀求和POST哀求。
$.get()方法哀求
和load（）类似，但多了一个dataType，其预期的服务器相应的数据范例（ xml、html、text、script、json、jsonp）
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5.     <script src="/jquery-3.7.1.js"></script>
  6. </head>
  7. <body>
  8. <button id="btn">加载数据</button>
  9. <div id="box"></div>
  10. <script>
  11.     $('#btn').click(function() {
  12.         $.get('http://localhost:8080/jQuery/data.jsp', function(data) {
  13.             $('#box').html(data);
  14.         }, 'html');
  15.     });
  16. </script>
  17. </body>
  18. </html>
复制代码

调用$.get()方法发送数据 

$.post()方法发送数据

在jQuery中，发送GET哀求调用$.get()方法，发送POST哀求调用$.post()方法，两个方法使用方式完全雷同，替换两者的方法名就可以在GET哀求和POST哀求方式之间切换。
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5.     <script src="/jquery-3.7.1.js"></script>
  6. </head>
  7. <body>
  8. <button id="btn">加载数据</button>
  9. <div id="box"></div>
  10. <script>
  11.     $('#btn').click(function() {
  12.         var userData = {username: 'itcast', password: 123};
  13.         $.get('http://localhost:8080/loadServlet',userData,
  14.             function(data) { $('#box').html(data); }, 'html');
  15.     });
  16. </script>
  17. </body>
复制代码
运行结果










免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张国伟

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表