ToB企服应用市场:ToB评测及商务社交产业平台

标题: Ajax异步调用 [打印本页]

作者: 张国伟    时间: 2024-11-12 05:20
标题: Ajax异步调用
一、概述

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)

使用第一个参数
  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.     }
  10.     @Override
  11.     protected void doPut(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  12.         super.doPut(req, resp);
  13.     }
  14. }
复制代码
第三个参数
回调函数,该函数在哀求数据加载完成后执行。回调函数用于获取本次哀求的相关信息,它有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企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4