Javaweb知识之AJAX(包含axios)

深碍√TFBOYSˉ_ 2023-09-23 20:08 140阅读 0赞

目录

一、概念

1.概念:

2.AJAX的作用:

二、使用步骤

三、升级封装版(Axios)

1.概念

2.使用步骤

一、概念

1.概念

AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML

2.AJAX的作用

1.与服务器进行数据交换,通过AJAX可以给服务器发送请求,并获取服务器响应的数据。使用了AJAX和服务器进行通信,就可以使用HTML+AJAX来替换JSP页面了

2.异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术(局部刷新),如:联想搜索、用户名是否可用校验,等等。

二、使用步骤

要写一个前端页面和一个后端页面。完成前后端分离

后端 :

1.创建一个Servlet

  1. package com.project.JavaScript;
  2. import javax.servlet.*;
  3. import javax.servlet.http.*;
  4. import javax.servlet.annotation.*;
  5. import java.io.IOException;
  6. @WebServlet("/ajax")
  7. public class ajax extends HttpServlet {
  8. @Override
  9. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  10. //1.创建一个响应数据
  11. response.getWriter().write("hello ajax");
  12. }
  13. @Override
  14. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  15. this.doGet(request, response);
  16. }
  17. }

前端:

2.在webapp里面创建一个HTML文件

里面固定的写法在w3school里面有:AJAX - XMLHttpRequest 对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script>
  9. //1.创建核心对象
  10. var xhttp;
  11. if (window.XMLHttpRequest) {
  12. xhttp = new XMLHttpRequest();
  13. } else {
  14. // code for IE6, IE5
  15. xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  16. }
  17. //2.发送请求 这里的GET后面路径要更改:更改为对应Ajax的完整访问路径
  18. xhttp.open("GET", "http://localhost:8080/maven_java_war/ajax", true);
  19. xhttp.send();
  20. //3.获取响应
  21. xhttp.onreadystatechange = function() {
  22. if (this.readyState == 4 && this.status == 200) {
  23. alert(this.responseText);
  24. }
  25. };
  26. </script>
  27. </body>
  28. </html>

运行结果:

在运行这个html时候,打开f12或者检查,在Network里面查看是xhr就说明是ajax

三、升级封装版(Axios)

1.概念

Axios对原生的AJAX进行封装,简化书写

官网是:起步 | Axios 中文文档 | Axios 中文网

2.使用步骤

(1)下载获取axios.js文件

(2)创建一个后端的servlet

  1. package com.project.JavaScript;
  2. import javax.servlet.*;
  3. import javax.servlet.http.*;
  4. import javax.servlet.annotation.*;
  5. import java.io.IOException;
  6. @WebServlet("/axioshello")
  7. public class axioshello extends HttpServlet {
  8. @Override
  9. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  10. System.out.println("get...");
  11. //1.接收请求参数
  12. String username = request.getParameter("username");
  13. System.out.println(username);
  14. //2.设置响应的数据
  15. response.getWriter().write("hello axios");
  16. }
  17. @Override
  18. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  19. System.out.println("post...");
  20. this.doGet(request, response);
  21. }
  22. }

(3)webapp里面创建一个js包,把获取到的axios.js文件复制到里面去

(4)在webapp里面创建一个HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <!--引入的js文件-->
  9. <script src="js/axios.js"></script>
  10. <!--1.get请求-->
  11. <script>
  12. axios.get("http://localhost:8080/maven_java_war/axioshello?username=zhangsan").then(function (resp) {
  13. alert(resp.data);
  14. })
  15. //post请求
  16. axios.post("http://localhost:8080/maven_java_war/axioshello","username=lisi").then(function (resp) {
  17. alert(resp.data);
  18. })
  19. </script>
  20. </body>
  21. </html>

运行结果:

get…
post…
get…
zhangsan
lisi

发表评论

表情:
评论列表 (有 0 条评论,140人围观)

还没有评论,来说两句吧...

相关阅读

    相关 javawebAjax笔记

    Ajax是运用JAvaScript和XML(可扩展语言)实现浏览器与服务器通信的一种技术 Ajax实现浏览器与服务器异步交互的技术,用户的请求不需要重新刷新整个页面,只需刷新