史上最详细Ajax学习笔记

港控/mmm° 2023-10-05 23:39 133阅读 0赞

1、Ajax快速入门

1.1、AJAX介绍

  • AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
  • 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
  • 一般的网页如果需要更新内容，必需重新加载个页面。

  • 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。

    在这里插入图片描述

1.2、原生JS实现AJAX

  • 代码实现

    1. import javax.servlet.ServletException;
    2. import javax.servlet.annotation.WebServlet;
    3. import javax.servlet.http.HttpServlet;
    4. import javax.servlet.http.HttpServletRequest;
    5. import javax.servlet.http.HttpServletResponse;
    6. import java.io.IOException;
    7. @WebServlet("/userServlet")
    8. public class UserServlet extends HttpServlet {
    10.     @Override
    11.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    13.         //设置请求和响应的乱码
    14.         req.setCharacterEncoding("UTF-8");
    15.         resp.setContentType("text/html;charset=UTF-8");
    17.         //1.获取请求参数
    18.         String username = req.getParameter("username");
    20.         //模拟服务器处理请求需要5秒钟
    21.         /*try {
    22.             Thread.sleep(5000);
    23.         } catch (InterruptedException e) {
    24.             e.printStackTrace();
    25.         }*/
    27.         //2.判断姓名是否已注册
    28.         if("zhangsan".equals(username)) {
    30.             resp.getWriter().write("<font color='red'>用户名已注册</font>");
    31.         }else {
    33.             resp.getWriter().write("<font color='green'>用户名可用</font>");
    34.         }
    35.     }
    37.     @Override
    38.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    40.         doGet(req,resp);
    41.     }
    42. }

    html代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>用户注册</title>
    6. </head>
    7. <body>
    8.     <form autocomplete="off">
    9.         姓名：<input type="text" id="username">
    10.         <span id="uSpan"></span>
    11.         <br>
    12.         密码：<input type="password" id="password">
    13.         <br>
    14.         <input type="submit" value="注册">
    15.     </form>
    16. </body>
    17. <script>
    18.     //1.为姓名绑定失去焦点事件
    19.     document.getElementById("username").onblur = function() {
    21.         //2.创建XMLHttpRequest核心对象
    22.         let xmlHttp = new XMLHttpRequest();
    24.         //3.打开链接
    25.         let username = document.getElementById("username").value;
    26.         xmlHttp.open("GET","userServlet?username="+username,true);
    27.         //xmlHttp.open("GET","userServlet?username="+username,false);
    29.         //4.发送请求
    30.         xmlHttp.send();
    32.         //5.处理响应
    33.         xmlHttp.onreadystatechange = function() {
    35.             //判断请求和响应是否成功
    36.             if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    38.                 //将响应的数据显示到span标签
    39.                 document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
    40.             }
    41.         }
    42.     }
    43. </script>
    44. </html>

1.3、原生JS实现AJAX详解

  • 核心对象：XMLHttpRequest

    用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 打开链接：open(method,url,async)

    method：请求的类型 GET 或 POST。

    url：请求资源的路径。

    async：true(异步) 或 false(同步)。

  • 发送请求：send(String params)

    params：请求的参数(POST 专用)。

  • 处理响应：onreadystatechange

    readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。

    status：200-响应已全部 OK。

  • 获得响应数据形式

    responseText：获得字符串形式的响应数据。

    responseXML：获得 XML 形式的响应数据。

1.4、JQuery的GET方式实现AJAX

  • 核心语法：$.get(url,[data],[callback],[type]);

    • url：请求的资源路径。
    • data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
    • callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
    • type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

  • 代码实现

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>用户注册</title>
    6. </head>
    7. <body>
    8.     <form autocomplete="off">
    9.         姓名：<input type="text" id="username">
    10.         <span id="uSpan"></span>
    11.         <br>
    12.         密码：<input type="password" id="password">
    13.         <br>
    14.         <input type="submit" value="注册">
    15.     </form>
    16. </body>
    17. <script src="js/jquery-3.3.1.min.js"></script>
    18. <script>
    19.     //1.为用户名绑定失去焦点事件
    20.     $("#username").blur(function () {
    22.         let username = $("#username").val();
    23.         //2.jQuery的GET方式实现AJAX
    24.         $.get(
    25.             //请求的资源路径
    26.             "userServlet",
    27.             //请求参数
    28.             "username=" + username,
    29.             //回调函数
    30.             function (data) {
    32.                 //将响应的数据显示到span标签
    33.                 $("#uSpan").html(data);
    34.             },
    35.             //响应数据形式
    36.             "text"
    37.         );
    38.     });
    39. </script>
    40. </html>

1.5、JQuery的POST方式实现AJAX

  • 核心语法：$.post(url,[data],[callback],[type]);

    • url：请求的资源路径。
    • data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
    • callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
    • type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

  • 代码实现

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>用户注册</title>
    6. </head>
    7. <body>
    8.     <form autocomplete="off">
    9.         姓名：<input type="text" id="username">
    10.         <span id="uSpan"></span>
    11.         <br>
    12.         密码：<input type="password" id="password">
    13.         <br>
    14.         <input type="submit" value="注册">
    15.     </form>
    16. </body>
    17. <script src="js/jquery-3.3.1.min.js"></script>
    18. <script>
    19.     //1.为用户名绑定失去焦点事件
    20.     $("#username").blur(function () {
    22.         let username = $("#username").val();
    23.         //2.jQuery的POST方式实现AJAX
    24.         $.post(
    25.             //请求的资源路径
    26.             "userServlet",
    27.             //请求参数
    28.             "username=" + username,
    29.             //回调函数
    30.             function (data) {
    32.                 //将响应的数据显示到span标签
    33.                 $("#uSpan").html(data);
    34.             },
    35.             //响应数据形式
    36.             "text"
    37.         );
    38.     });
    39. </script>
    40. </html>

1.6、JQuery的通用方式实现AJAX

  • 核心语法：$.ajax({name:value,name:value,…});

    • url：请求的资源路径。
    • async：是否异步请求，true-是，false-否 (默认是 true)。
    • data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
    • type：请求方式，POST 或 GET (默认是 GET)。
    • dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
    • success：请求成功时调用的回调函数。
    • error：请求失败时调用的回调函数。

  • 代码实现

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>用户注册</title>
    6. </head>
    7. <body>
    8.     <form autocomplete="off">
    9.         姓名：<input type="text" id="username">
    10.         <span id="uSpan"></span>
    11.         <br>
    12.         密码：<input type="password" id="password">
    13.         <br>
    14.         <input type="submit" value="注册">
    15.     </form>
    16. </body>
    17. <script src="js/jquery-3.3.1.min.js"></script>
    18. <script>
    19.     //1.为用户名绑定失去焦点事件
    20.     $("#username").blur(function () {
    22.         let username = $("#username").val();
    23.         //2.jQuery的通用方式实现AJAX
    24.         $.ajax({
    26.             //请求资源路径
    27.             url:"userServletxxx",
    28.             //是否异步
    29.             async:true,
    30.             //请求参数
    31.             data:"username="+username,
    32.             //请求方式
    33.             type:"POST",
    34.             //数据形式
    35.             dataType:"text",
    36.             //请求成功后调用的回调函数
    37.             success:function (data) {
    39.                 //将响应的数据显示到span标签
    40.                 $("#uSpan").html(data);
    41.             },
    42.             //请求失败后调用的回调函数
    43.             error:function () {
    45.                 alert("操作失败...");
    46.             }
    47.         });
    48.     });
    49. </script>
    50. </html>

1.7、小结

  • **AJAX(Asynchronous JavaScript And XML)：**异步的 JavaScript 和 XML。
  • 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部 分内容进行局部更新。

  • 同步和异步

    • 同步：服务器端在处理过程中，无法进行其他操作。
    • 异步：服务器端在处理过程中，可以进行其他操作。
  • GET 方式实现：$.get();

  • POST 方式实现：$.post();

    • url：请求的资源路径。
    • data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
    • callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
    • type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

  • 通用方式实现：$.ajax();

    • url：请求的资源路径。
    • async：是否异步请求，true-是，false-否 (默认是 true)。
    • data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
    • type：请求方式，POST 或 GET (默认是 GET)。
    • dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
    • success：请求成功时调用的回调函数。
    • error：请求失败时调用的回调函数。

2、JSON的处理

2.1、JSON回顾

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
  • 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的 提升网络传输效率。

在这里插入图片描述

2.2、JSON转换工具的介绍

  • 我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。
  • JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。
  • 可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。

  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。

      1. 导入 jar 包。
      2. 创建核心对象。
      3. 调用方法完成转换。

在这里插入图片描述

2.3、JSON转换练习

  1. 对象转 JSON, JSON 转对象。

    1. /*
    2.     JSON转换工具的使用
    3.  */
    4. public class ObjectMapperTest {
    6.     private ObjectMapper mapper = new ObjectMapper();
    7.     /*
    8.         1.User对象转json, json转User对象
    9.           json字符串 = {"name":"张三","age":23}
    10.           user对象 = User{name='张三', age=23}
    11.      */
    12.     @Test
    13.     public void test01() throws Exception{
    15.         //User对象转json
    16.         User user = new User("张三",23);
    17.         String json = mapper.writeValueAsString(user);
    18.         System.out.println("json字符串：" + json);
    20.         //json转User对象
    21.         User user2 = mapper.readValue(json, User.class);
    22.         System.out.println("java对象：" + user2);
    23.     }
    24. }

  2. Map转 JSON, JSON 转 Map。

    1. /*
    2.   2.map<String,String>转json, json转map<String,String>
    3.   json字符串 = {"姓名":"张三","性别":"男"}
    4.   map对象 = {姓名=张三, 性别=男}
    5. */
    6. @Test
    7. public void test02() throws Exception{
    9.     //map<String,String>转json
    10.     HashMap<String,String> map = new HashMap<>();
    11.     map.put("姓名","张三");
    12.     map.put("性别","男");
    13.     String json = mapper.writeValueAsString(map);
    14.     System.out.println("json字符串：" + json);
    16.     //json转map<String,String>
    17.     HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
    18.     System.out.println("java对象：" + map2);
    19. }

  3. Map转 JSON, JSON 转 Map。

    1. /*
    2.   3.map<String,User>转json, json转map<String,User>
    3.     json字符串 = {"黑马一班":{"name":"张三","age":23},"黑马二班":{"name":"李四","age":24}}
    4.     map对象 = {黑马一班=User{name='张三', age=23}, 黑马二班=User{name='李四', age=24}}
    5.  */
    6. @Test
    7. public void test03() throws Exception{
    9.     //map<String,User>转json
    10.     HashMap<String,User> map = new HashMap<>();
    11.     map.put("黑马一班",new User("张三",23));
    12.     map.put("黑马二班",new User("李四",24));
    13.     String json = mapper.writeValueAsString(map);
    14.     System.out.println("json字符串：" + json);
    16.     //json转map<String,User>
    17.     HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){
    18.       });
    19.     System.out.println("java对象：" + map2);
    20. }

  4. List转 JSON, JSON 转 List。

    1. /*
    2.   4.List<String>转json, json转 List<String>
    3.     json字符串 = ["张三","李四"]
    4.     list对象 = [张三, 李四]
    5. */
    6. @Test
    7. public void test04() throws Exception{
    9.     //List<String>转json
    10.     ArrayList<String> list = new ArrayList<>();
    11.     list.add("张三");
    12.     list.add("李四");
    13.     String json = mapper.writeValueAsString(list);
    14.     System.out.println("json字符串：" + json);
    16.     //json转 List<String>
    17.     ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
    18.     System.out.println("java对象：" + list2);
    19. }

  5. List转 JSON, JSON 转 List。

    1. /*
    2.   5.List<User>转json, json转List<User>
    3.     json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}]
    4.     list对象 = [User{name='张三', age=23}, User{name='李四', age=24}]
    5.      */
    6. @Test
    7. public void test05() throws Exception{
    9.     //List<User>转json
    10.     ArrayList<User> list = new ArrayList<>();
    11.     list.add(new User("张三",23));
    12.     list.add(new User("李四",24));
    13.     String json = mapper.writeValueAsString(list);
    14.     System.out.println("json字符串：" + json);
    16.     //json转List<User>
    17.     ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){
    18.       });
    19.     System.out.println("java对象：" + list2);
    20. }

2.4、小结

  • **Jackson：**开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。
  • 可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。
  • 常用类

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，133人围观）

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

相关阅读