devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

javaweb学习（day13-数据交换和异步请求)

作者：盐析白兔 | 2024-04-24 17:35:49

赞

踩

javaweb学习（day13-数据交换和异步请求)

一、JSON

1.介绍

 1.1 在线文档

  • JSon 在线文档：https://www.w3school.com.cn/js/js_json_intro.asp
  • Ajax 在线文档：https://www.w3school.com.cn/js/js_ajax_intro.asp

1.2 JSON 介绍 

  • JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 [老韩解读：即 java 、php、asp.net , go 等都可以使用 JSON]
  • JSON 具有自我描述性，更易理解, 一句话，非常的好用

1.3 快速入门 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>json 快速入门案例</title>
  6.     <script type="text/javascript">
  7.         window.onload=function () {
  8.             var myJson = {
  9.                 "key1": "林然", // 字符串
  10.                 "key2": 123, // Number
  11.                 "key3": [1, "hello", 2.3], // 数组
  12.                 "key4": {"age": 12, "name": "jack"}, //json 对象
  13.                 "key5": [ //json 数组
  14.                     {"k1": 10, "k2": "milan"}, {"k3": 30, "k4": "smith"}
  15.                 ]
  16.             };
  17. //访问 json 的属性
  18.             console.log("key1= " + myJson.key1);
  19. // 访问 json 的数组属性
  20.             console.log("key3[1]= " + myJson.key3[1]); // hello
  21. // 访问 key4 的 name 属性
  22.             console.log("name= " + myJson.key4.name); // jack
  23. // 访问 key5 json 数组的第一个元素
  24.             console.log("myJson.key5[0]= " + myJson.key5[0]); //[object, object]
  25.             console.log("myJson.key5[0].k2= " + myJson.key5[0].k2)// milan
  26.         }
  27.     </script>
  28. </head>
  29. <body>
  30.     <h1>json 快速入门</h1>
  31.  
  32. </body>
  33. </html>

 2 JSON 对象和字符串对象转换

2.1 示例

  • JSON.stringify(json)功能: 将一个 json 对象转换成为 json 字符串
  • JSON.parse( jsonString )功能 :将一个 json 字符串转换成为 json 对象
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JSON 对象和字符串对象转换</title>
  6.     <script type="text/javascript">
  7.         window.onload=function () {
  8.             // 一个 json 对象
  9.             var jsonObj = {"name": "学习", age: 10};
  10.         //JSON 是一个 build-in 对象,内建对象,有方法可以使用
  11.             console.log(JSON)
  12.         // 把 json 对象转换成为字符串对象
  13.             var jsonStr = JSON.stringify(jsonObj);
  14.             console.log(jsonStr);
  15.         // 把 json 对象的字符串，转换成为 json 对象
  16.             var jsonObj2 = JSON.parse(jsonStr);
  17.             console.log(jsonObj2);
  18.         }
  19.     </script>
  20. </head>
  21. <body>
  22. <h1>JSON 对象和字符串对象转换</h1>
  23. </body>
  24. </html>

 2.2 注意事项和细节

  • JSON.springify(json 对 象) 会 返 回对 应 string, 并 不 会影 响 原 来 json 对 象, 演 示
  • JSON.parse(string) 函数会返回对应的 json 对象, 并不会影响原来 string
  • 在定义 Json 对象时, 可以使用 ' ' 表示字符串, 比如 var json_person = {"name": "jack", "age": 100}; 也可以写成 var json_person = {'name': 'jack', 'age': 100}; 但是在把原生字符串转成 json 对象时, 必须使用 "", 否则会报错 比如： var str_dog = "{'name':'小黄狗', 'age': 4}"; 转 json 就会报错
  • JSON.springify(json 对象) 返回的字符串, 都是 "" 表示的字符串, 所以在语法格式正确的情况下, 是可以重新转成 json 对象的.

3 JSON 在 Java 中应用场景 

  • Javabean 对象和 json 字符串 的转换
  • List 对象和 json 字符串 的转换
  • map 对象和 json 字符串 的转换

 Book类

  1. package com.hspedu.json;
  2.  
  3. public class Book {
  4.     private Integer id;
  5.     private String name;
  6.  
  7.     public Book(Integer id, String name) {
  8.         this.id = id;
  9.         this.name = name;
  10.     }
  11.  
  12.     public Integer getId() {
  13.         return id;
  14.     }
  15.  
  16.     public void setId(Integer id) {
  17.         this.id = id;
  18.     }
  19.  
  20.     public String getName() {
  21.         return name;
  22.     }
  23.  
  24.     public void setName(String name) {
  25.         this.name = name;
  26.     }
  27.  
  28.     @Override
  29.     public String toString() {
  30.         return "Book{" +
  31.                 "id=" + id +
  32.                 ", name='" + name + '\'' +
  33.                 '}';
  34.     }
  35. }

转换实例

  1. package com.hspedu.json;
  2.  
  3. import com.google.gson.Gson;
  4. import com.google.gson.reflect.TypeToken;
  5.  
  6. import java.lang.reflect.Type;
  7. import java.util.ArrayList;
  8. import java.util.HashMap;
  9. import java.util.List;
  10. import java.util.Map;
  11.  
  12. public class JavaJson {
  13.     public static void main(String[] args) {
  14.  
  15.         //演示javabean 和json字符串的转换
  16.         Book book = new Book(100, "林然");
  17.         //演示把一个java转成一个json字符串
  18.         //创建一个Gson对象作为工具使用
  19.         Gson gson = new Gson();
  20.         // 把对象转成为 json 字符串
  21.         String strBook = gson.toJson(book);
  22.         System.out.println(strBook);
  23.         // 把 json 字符串转换成为 java 对象
  24.         Book book1 = gson.fromJson(strBook, Book.class);
  25.         System.out.println(book1);
  26.  
  27.         //演示List对象->json字符串
  28.         List<Book> bookList=new ArrayList<>();
  29.         bookList.add(new Book(200,"红楼梦"));
  30.         bookList.add(new Book(300,"西游记"));
  31.         //将 list 转成 json 字符串
  32.         String strBookList = gson.toJson(bookList);
  33.         System.out.println("bookListStr=" + strBookList);
  34.         将 json 字符串转成 List 集合方式 1
  35.  
  36.         //1. 要把复杂的 json 字符串转换成为 java 对象。需要继承 TypeToken 类
  37.         //2. TypeToken 是一个自定义泛型类,在创建时，需要指定具体类型,这里我们指定为 List<Book>
  38.         // ,如果同学们忘记了，回去看 java 基础的泛型知识点
  39.         //3. TypeToken 是由 gson 包提供的
  40.         //返回类型的完整路径，然后进行底层反射
  41.  
  42.         //因为TypeToken的无参构造器是protrcted,而new TypeToken<List<Book>>()就是在调用无参构造器
  43.         //为什么new TypeToken<List<Book>>() {    }使用就可以，这里就涉及到匿名内部类的知识
  44.         Type type = new TypeToken<List<Book>>() {    }.getType();
  45.         List<Book> booklist2 = gson.fromJson(strBookList, type);
  46.         System.out.println("bolist2"+booklist2);
  47.  
  48.         //map对象转成json字符串
  49.         Map<String, Book> bookMap = new HashMap<>();
  50.         bookMap.put("k1",new Book(400,"射雕英雄传"));
  51.         bookMap.put("k2",new Book(500,"水浒传"));
  52.         String strBookMap = gson.toJson(bookMap);
  53.         System.out.println("strBookMap="+strBookMap);
  54.  
  55.         Type type1 = new TypeToken<Map<String, Book>>() {
  56.         }.getType();
  57.         Map<String,Book> bookMap2 = gson.fromJson(strBookMap, type1);
  58.         System.out.println("bookMap2"+bookMap2);
  59.  
  60.  
  61.     }
  62. }

二、Ajax

1.介绍 

1.1 Ajax 是什么 

  • AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
  • Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术 

1.2 应用场景 

  • 搜索引擎根据用户输入关键字，自动提示检索关键字
  • 动态加载数据，按需取得数据【树形菜单、联动菜单...】
  • 改善用户体验。【输入内容前提示、带进度条文件上传...】
  • 电子商务应用。 【购物车、邮件订阅...】
  • 访问第三方服务。【访问搜索服务、rss 阅读器】
  • 页面局部刷新

 1.3 Ajax 原理示意图

传统的 WEB 应用 

Ajax

 在线文档：https://www.w3school.com.cn/js/js_ajax_intro.asp

2 应用实例-验证用户名是否存在

  • 在输入框输入用户名
  • 点击验证用户名, 使用 ajax 方式， 服务端验证该用户名是否已经占用了, 如果该用户 已经占用, 以 json 格式返回该用户信息
  • 假定用户名为 king , 就不可用, 其它用户名可以=》 后面我们接入 DB[Mysql+JDBC] 对页面进行局部刷新, 显示返回信息

 

 User类

  1. package com.hspedu.ajax.entity;
  2.  
  3. public class User {
  4.     private Integer id;
  5.     private String name;
  6.     private String email;
  7.     private String pwd;
  8.  
  9.     public User() {
  10.     }
  11.  
  12.     public User(Integer id, String name, String email, String pwd) {
  13.         this.id = id;
  14.         this.name = name;
  15.         this.email = email;
  16.         this.pwd = pwd;
  17.     }
  18.  
  19.     public Integer getId() {
  20.         return id;
  21.     }
  22.  
  23.     public void setId(Integer id) {
  24.         this.id = id;
  25.     }
  26.  
  27.     public String getName() {
  28.         return name;
  29.     }
  30.  
  31.     public void setName(String name) {
  32.         this.name = name;
  33.     }
  34.  
  35.     public String getEmail() {
  36.         return email;
  37.     }
  38.  
  39.     public void setEmail(String email) {
  40.         this.email = email;
  41.     }
  42.  
  43.     public String getPwd() {
  44.         return pwd;
  45.     }
  46.  
  47.     public void setPwd(String pwd) {
  48.         this.pwd = pwd;
  49.     }
  50. }

servlet

  1. package com.hspedu.ajax.servlet;
  2.  
  3. import com.google.gson.Gson;
  4. import com.hspedu.ajax.entity.User;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10. import java.io.IOException;
  11.  
  12. public class CheckUserServlet extends HttpServlet {
  13.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  14.         //System.out.println("CheckUserServlet被调用");
  15.         response.setContentType("text/html;charset=utf-8");
  16.         //接收数据
  17.         String username = request.getParameter("username");
  18.         System.out.println(username);
  19.         //假定用户名为king，就不可用，其他用户名可以
  20.         User user = new User(100, "king", "king@sohu.com", "666");
  21.         if("king".equals(username)){//不能使用king用户名
  22.  
  23.             //转成json格式
  24.  
  25.  
  26.             String strKing = new Gson().toJson(user);
  27.             System.out.println("1");
  28.             //返回
  29.             System.out.println(strKing);
  30.             response.getWriter().write(strKing);
  31.         }else {
  32.             response.getWriter().write("");
  33.         }
  34.  
  35.  
  36.     }
  37.  
  38.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  39.         doPost(request,response);
  40.     }
  41. }

 login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户注册</title>
  6.     <script type="text/javascript">
  7.         window.onload=function () {
  8.             var checkButton = document.getElementById("checkButton");
  9.             checkButton.onclick=function () {
  10.                 //alert("ok~")
  11.                 //1.创建XMLHttpRequest对象[ajax引擎对象]
  12.                 var xhr = new XMLHttpRequest();
  13.                 //获取用户填写的用户名
  14.                 var uname = document.getElementById("uname").value;
  15.                 //2.准备发送指定数据open ,send
  16.                     //(1)请求方式可以是“GET”，“POST”
  17.                     //(2)url
  18.                     //(3)true表示异步发送
  19.                 xhr.open("GET","/ajax/checkUserServlet?username="+uname,true);
  20.                 //在send函数调用前，给XMLHttpRequest绑定一个事件onreadystatechange
  21.                 //该事件表示，可以去指定一个函数，当数据有变化时，会触发这个事件
  22.                 //每当xhr对象readyState变化时，会触发这个事件
  23.  
  24.                 xhr.onreadystatechange=function(){
  25.  
  26.                     if(xhr.readyState==4 && xhr.status==200){
  27.                         //console.log("xhr=",xhr)
  28.                         var responseText=xhr.responseText;
  29.                         if(responseText.trim()!=""){
  30.                             document.getElementById("myres").value="用户名不可用";
  31.                         }else {
  32.                             document.getElementById("myres").value="用户名可用";
  33.                         }
  34.                     }
  35.                 }
  36.  
  37.  
  38.                 //3.正式发送ajax请求
  39.                 //如果是POST请求在send填写发送的数据
  40.                 xhr.send();
  41.  
  42.  
  43.             }
  44.  
  45.         }
  46.     </script>
  47. </head>
  48. <body>
  49.     <h1>用户注册</h1>
  50.     <form action="/ajax/checkUserServlet" method="post">
  51.         用户名字:<input type="text" name="username" id="uname">
  52.         <input type="button" id="checkButton" value="验证用户名">
  53.         <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  54.         用户密码:<input type="password" name="password"><br/><br/>
  55.         电子邮件:<input type="text" name="email"><br/><br/>
  56.         <input type="submit" value="用户注册">
  57.     </form>
  58.     <h1>返回的 json 数据</h1>
  59.     <div id="div1"></div>
  60. </body>
  61. </html>

到数据库去验证用户名是否可用 

三、JQuery 的 Ajax 请求 

1 JQuery Ajax 操作方法 

在线文档：https://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp 

 2 $.ajax 方法

 3 $.get 请求和$.post 请求

  • url: 请求的 URL 地址
  • data: 请求发送到服务器的数据
  • success: 成功时回调函数
  • type: 返回内容格式，xml, html, script, json, text
  • 说明：$.get 和 $.post 底层还是使用$.ajax()方法来实现异步请求，注意对于get和post请求是要按照一定的参数设置来完成的。

 4 $.getJSON

$.getJSON 常用参数 

url: 请求发送的哪个 URL
data: 请求发送到服务器的数据
success: 请求成功时运行的函数

说明：$.getJSON 底层使用$.ajax()方法来实现异步请求 

login2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户注册</title>
  6.     <script type="text/javascript" src="./script/jquery-3.6.0.min.js">
  7.     </script>
  8.  
  9.     <script type="text/javascript">
  10.         $(function () {
  11.            //绑定事件
  12.             $("#checkButton").click(function () {
  13.                //发出ajax请求
  14.                 //给指定参数时，需要在{}里面k-v
  15.                 $.ajax(
  16.                     {
  17.                         url:"/ajax/checkUserServlet2",
  18.                         type:"POST",
  19.                         data:{
  20.                             //这里我们直接给json
  21.                             username:$("#uname").val(),
  22.                             data:new Date()
  23.                         },
  24.                         error:function () {
  25.                             console.log("失败")
  26.                         },
  27.                         success:function (data,status,xhr) {
  28.                             console.log("成功");
  29.                             console.log("data=",data);
  30.                             console.log("status=",status);
  31.                             console.log("xhr=",xhr);
  32.                             if(data.name==""){
  33.                                 $("#myres").val("该用户名可用");
  34.                             }else {
  35.                                 $("#myres").val("该用户名不可用");
  36.                             }
  37.  
  38.  
  39.                         },
  40.                         dataType:"json"
  41.  
  42.                     }
  43.                 )
  44.                 //$.get()是顺序url,data,success回调函数，返回的数据格式
  45.             })
  46.         })
  47.  
  48.     </script>
  49. </head>
  50. <body>
  51. <h1>用户注册-JQUERY+AJax</h1>
  52. <form action="/ajax/checkUserServlet2" method="post">
  53.     用户名字:<input type="text" name="username" id="uname">
  54.     <input type="button" id="checkButton" value="验证用户名">
  55.     <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  56.     用户密码:<input type="password" name="password"><br/><br/>
  57.     电子邮件:<input type="text" name="email"><br/><br/>
  58.     <input type="submit" value="用户注册">
  59. </form>
  60. <h1>返回的 json 数据</h1>
  61. <div id="div1"></div>
  62. </body>
  63. </html>

 其余的代码还是一样的，在这个案例中，主要是换了一种方式去进行请求

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/480706
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号