javaweb-16-JSON、AJAX、i18n-《Java学习知识库》

admin
admin
admin
0
文章
0
评论
2025-11-02 01:21:23 编程 来源：ZONE.CI 全球网 0 阅读模式
  • 1、什么是 JSON?
    • 1.1、JSON 在 JavaScript 中的使用。
      • 1.1.1、json 的定义
      • 1.1.2、json 的访问
      • 1.1.3、json 的两个常用方法
    • 1.2、JSON 在 java 中的使用
      • 1.2.1、javaBean 和 json 的互转
      • 1.2.2、List 和 json 的互转
      • 1.2.3、map 和 json 的互转
  • 2、AJAX 请求
    • 2.1、什么是 AJAX 请求
    • 2.2、原生 AJAX 请求的示例：
    • 2.3、jQuery 中的 AJAX 请求
  • 3、书城项目第九阶段
    • 3.1、使用 AJAX 验证用户名是否可用
    • 3.2、使用 AJAX 修改把商品添加到购物车
  • 4、i18n 国际化（了解内容，暂时不学了）
    • 4.1、什么是 i18n 国际化？
    • 4.2、国际化相关要素介绍
    • 4.3、国际化资源 properties 测试
    • 4.4、通过请求头国际化页面

    1、什么是 JSON?

    JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python等）。 这样就使得 JSON 成为理想的数据交换格式。 json 是一种轻量级的数据交换格式。 轻量级指的是跟 xml 做比较。 数据交换指的是客户端和服务器之间业务数据的传递格式。

    1.1、JSON 在 JavaScript 中的使用。

    1.1.1、json 的定义

    json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间进行逗号进行分隔。json 定义示例：

    1. <script type="text/javascript">
    2.             // json的定义
    3.             var jsonObj={
    4.                 "key1":12,
    5.                 "key2":"abc",
    6.                 "key3":true,
    7.                 "key4":[11,"arr",false],
    8.                 "key5":{
    9.                     "key5_1":551,
    10.                     "key5_2":"key5_2_value"
    11.                 },
    12.                 "key6":[{
    13.                     "key6_1_1":6611,
    14.                     "key6_1_2":"key6_1_2_value"
    15.                 },{
    16.                     "key6_2_1":6621, 
    17.                     "key6_2_2":"key6_2_2_value" 
    18.                 }]
    19.             }
    20.         </script>

    1.1.2、json 的访问

    json 本身是一个对象。 json 中的 key 我们可以理解为是对象中的一个属性。 json 中的 key 访问就跟访问对象的属性一样： json 对象.key json 访问示例：

    1.       // json的访问
    2.             alert(typeof(jsonObj));// object json 就是一个对象
    3.             alert(jsonObj.key1); //12
    4.             alert(jsonObj.key2); // abc
    5.             alert(jsonObj.key3); // true
    6.             alert(jsonObj.key4);// 得到数组[11,"arr",false]
    7.             // json 中 数组值的遍历
    8.             for(var i = 0; i < jsonObj.key4.length; i++) {
    9.                 alert(jsonObj.key4[i]);
    10.             }
    11.             alert(jsonObj.key5.key5_1);//551
    12.             alert(jsonObj.key5.key5_2);//key5_2_value
    13.             alert( jsonObj.key6 );// 得到 json 数组
    14.             // 取出来每一个元素都是 json 对象
    15.             var jsonItem = jsonObj.key6[0];
    16.             // alert( jsonItem.key6_1_1 ); //6611
    17.             alert( jsonItem.key6_1_2 ); //key6_1_2_value

    1.1.3、json 的两个常用方法

    json 的存在有两种形式。 一种是：对象的形式存在，我们叫它 json 对象。 一种是：字符串的形式存在，我们叫它 json 字符串。 一般我们要操作 json 中的数据的时候，需要 json 对象的格式。 一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。 JSON.stringify() 把 json 对象转换成为 json 字符串 JSON.parse() 把 json 字符串转换成为 json 对象

    1.       // 把 json 对象转换成为 json 字符串 
    2.             var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java 中对象的 toString 
    3.             alert(jsonObjString)
    4.             // 把 json 字符串。转换成为 json 对象 
    5.             var jsonObj2 = JSON.parse(jsonObjString);
    6.             alert(jsonObj2.key1);// 12 
    7.             alert(jsonObj2.key2);// abc

    1.2、JSON 在 java 中的使用

    需要导入gson-2.2.4.jar

    1.2.1、javaBean 和 json 的互转

    1.     @Test
    2.     public void test1() {
    3.         Person person = new Person(1, "国哥好帅!");
    4.         // 创建 Gson 对象实例 
    5.         Gson gson = new Gson();
    6.         // toJson 方法可以把 java 对象转换成为 json 字符串 
    7.         String personJsonString = gson.toJson(person);
    8.         System.out.println(personJsonString);
    9.         // fromJson 把 json 字符串转换回 Java 对象 
    10.         // 第一个参数是 json 字符串 
    11.         // 第二个参数是转换回去的 Java 对象类型 
    12.         Person person1 = gson.fromJson(personJsonString, Person.class);
    13.         System.out.println(person1);

    1.2.2、List 和 json 的互转

    1. //1.2.2、List 和 json 的互转
    2.     @Test
    3.     public void test2() {
    4.         List<Person> personList = new ArrayList<>();
    5.         personList.add(new Person(1, "国哥"));
    6.         personList.add(new Person(2, "康师傅"));
    7.         Gson gson = new Gson();
    8.         // 把 List 转换为 json 字符串 
    9.         String personListJsonString = gson.toJson(personList);
    10.         System.out.println(personListJsonString);
    11.         List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
    12.         System.out.println(list);
    13.         Person person = list.get(0);
    14.         System.out.println(person);
    15.     }

    PersonListType类继承了TypeToken<>，使用其中的getType()方法。

    1.2.3、map 和 json 的互转

    1. //1.2.3、map 和 json 的互转
    2.     @Test
    3.     public void test3(){
    4.         Map<Integer,Person> personMap = new HashMap<>();
    5.         personMap.put(1, new Person(1, "国哥好帅"));
    6.         personMap.put(2, new Person(2, "康师傅也好帅"));
    7.         Gson gson = new Gson();
    8.         // 把 map 集合转换成为 json 字符串
    9.         String personMapJsonString = gson.toJson(personMap);
    10.         System.out.println(personMapJsonString);
    11.         //Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType());
    12.         Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
    13.                 TypeToken<HashMap<Integer,Person>>(){}.getType());
    14.         System.out.println(personMap2);
    15.         Person p = personMap2.get(1);
    16.         System.out.println(p);
    17.     }

    也可以直接使用匿名类的方法来调用getType()方法

    2、AJAX 请求

    2.1、什么是 AJAX 请求

    AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

    Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容

    2.2、原生 AJAX 请求的示例：

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4.     <meta http-equiv="pragma" content="no-cache"/>
    5.     <meta http-equiv="cache-control" content="no-cache"/>
    6.     <meta http-equiv="Expires" content="0"/>
    7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8.     <title>Insert title here</title>
    9.     <script type="text/javascript">
    10.         function ajaxRequest() {
    11.             // 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
    12. //                 1、我们首先要创建XMLHttpRequest 
    13.             var xmlhttprequest = new XMLHttpRequest();
    14. //                 2、调用open方法设置请求参数；true为异步，false为同步
    15.             xmlhttprequest.open("GET", "http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax", true)
    16.             //                 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
    17.             xmlhttprequest.onreadystatechange = function () {
    18.                 if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
    19.                   //如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
    20.                     var jsonObj = JSON.parse(xmlhttprequest.responseText);
    21.                     document.getElementById("div01").innerHTML="编号："+jsonObj.id+"，姓名："+jsonObj.name;
    23.                 }
    24.             };
    25. //                 3、调用send方法发送请求
    26.             xmlhttprequest.send();
    28.         };
    29.     </script>
    30. </head>
    31. <body>
    32. <button onclick="ajaxRequest()">ajax request</button>
    33. <div id="div01">
    34. </div>
    35. </body>
    36. </html>

    当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。

    1. var xmlHttpRequest; //定义一个变量,用于存放XMLHttpRequest对象
    2. createXMLHttpRequst(); //调用创建对象的方法
    3. //创建XMLHttpRequest对象的方法
    4. function createXMLHttpRequest(){
    5. 　　if(window.ActiveXObject) {//判断是否是IE浏览器
    6. 　　　　xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象
    7. 　　}else if(window.XMLHttpRequest){//判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
    8. 　　　　　xmlHttpRequest = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象
    9. 　　}
    10. }
    属性 描述
    responseText 获得字符串形式的响应数据。
    responseXML 获得 XML 形式的响应数据。 
    1. protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    2.         req.setCharacterEncoding("UTF-8");
    3.         resp.setContentType("text/html;charset=UTF-8");
    4.         System.out.println("AJAX请求过来了");
    5.         Person person = new Person(1,"国哥");
    6.         try {
    7.             Thread.sleep(3000);
    8.         } catch (InterruptedException e) {
    9.             e.printStackTrace();
    10.         }
    11.         Gson gson = new Gson();
    12.         String personJsonString = gson.toJson(person);
    13.         resp.getWriter().write(personJsonString);
    15.     }
    1.  readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
    2.  readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
    3.  readyState === 2 : 表示 send 方法已经执行完成
    4.  readyState === 3 : 表示正在解析响应内容
    5.  readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

    同步与异步的区别:同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以 使用页面。异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显 示出来 。

    创建完HTTP请求之后，应该就可以将HTTP请求发送给Web服务器了。然而，发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。1、未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。2、初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。3、发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。4、接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。5、完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。

    版权声明：本文为CSDN博主「谁是听故事的人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/chaopingyao/article/details/106481895

    2.3、jQuery 中的 AJAX 请求

    $.ajax 方法 url 表示请求的地址 type 表示请求的类型 GET 或 POST 请求 data 表示发送给服务器的数据 格式有两种： 一：name=value&name=value 二：{key:value} success 请求成功，响应的回调函数 dataType 响应的数据类型 常用的数据类型有： text 表示纯文本 xml 表示 xml 数据 json 表示 json 对象

    1. // ajax请求
    2. $("#ajaxBtn").click(function(){
    3.   $.ajax({
    4.     url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
    5.     // data:"action=jQueryAjax",
    6.     data:{action:"jQueryAjax"},
    7.     type:"GET",
    8.     success:function (data) {
    9.       // alert("服务器返回的数据是："+data);
    10.       // var jsonObj = JSON.parse(data)
    11.       alert(data)
    12.       $("#msg").html("编号"+data.id+"，姓名："+data.name);
    13.     },
    14.     dataType:"json"
    15.   });
    16.                 });

    $.get 方法和$.post 方法 （这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。）url 请求的 url 地址 data 发送的数据 callback 成功的回调函数 type 返回的数据类型

    1.         // ajax--get请求
    2.                 $("#getBtn").click(function(){
    3.                     // get请求
    4.                     $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
    5.                         $("#msg").html("get 编号"+data.id+"，姓名："+data.name);
    6.                     },"json");
    7.                 });
    9.                 // ajax--post请求
    10.                 $("#postBtn").click(function(){
    11.                     // post请求
    12.                     $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
    13.                         $("#msg").html("post 编号"+data.id+"，姓名："+data.name);
    14.                     },"json");
    15.                 });

    $.getJSON 方法 url 请求的 url 地址 data 发送给服务器的数据 callback 成功的回调函数

    1. // ajax--getJson请求
    2.                 $("#getJSONBtn").click(function(){
    3.                     // 调用
    4.                     $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerygetJSON",function (data) {
    5.                         $("#msg").html("jQuerygetJSON 编号"+data.id+"，姓名："+data.name);
    6.                     });
    7.                 });

    表单序列化 serialize() serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

    1.         // ajax请求
    2.                 $("#submit").click(function(){
    3.                     // 把参数序列化
    4.                     alert($("#form01").serialize());//可以省略
    5.                     $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&"+$("#form01").serialize(),function (data) {
    6.                         $("#msg").html("jQuerySerialize 编号"+data.id+"，姓名："+data.name);
    7.                     })
    8.                 });

    3、书城项目第九阶段

    3.1、使用 AJAX 验证用户名是否可用

    QQ截图20220416143918.pngUserServlet 程序中 ajaxExistsUsername 方法：

    1. protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    2.         // 获取请求的参数 username
    3.         String username = req.getParameter("username");
    4.         // 调用 userService.existsUsername();
    5.         boolean existsUsername = userService.existsUsername(username);
    6.         // 把返回的结果封装成为 map 对象
    7.         Map<String,Object> resultMap = new HashMap<>();
    8.         resultMap.put("existsUsername",existsUsername);
    9.         Gson gson = new Gson();
    10.         String json = gson.toJson(resultMap);
    11.         resp.getWriter().write(json);
    12.     }

    regist.jsp 页面中的代码：

    1.                 //1、获取用户名
    2.                 var username = this.value;
    3.                 $.getJSON("http://localhost:8080/book/userServlet", "action=ajaxExistsUsername&username="+username, function (data) {
    4.                     if (data.existsUsername) {
    5.                         $("span.errorMsg").text("用户名已存在！");
    6.                     } else {
    7.                         $("span.errorMsg").text("用户名可用！");
    8.                     }
    9.                 });

    3.2、使用 AJAX 修改把商品添加到购物车

    QQ截图20220416151016.png

    4、i18n 国际化（了解内容，暂时不学了）

    4.1、什么是 i18n 国际化？

     国际化（Internationalization）指的是同一个网站可以支持多种不同的语言，以方便不同国家，不同语种的用户访问。  关于国际化我们想到的最简单的方案就是为不同的国家创建不同的网站，比如苹果公司，他的英文官网是：http://www.apple.com 而中国官网是 http://www.apple.com/cn  苹果公司这种方案并不适合全部公司，而我们希望相同的一个网站，而不同人访问的时候可以根据用户所在的区域显示不同的语言文字，而网站的布局样式等不发生改变。  于是就有了我们说的国际化，国际化总的来说就是同一个网站不同国家的人来访问可以显示出不同的语言。但实际上这种需求并不强烈，一般真的有国际化需求的公司，主流采用的依然是苹果公司的那种方案，为不同的国家创建不同的页面。所以国际化的内容我们了解一下即可。  国际化的英文 Internationalization，但是由于拼写过长，老外想了一个简单的写法叫做 I18N，代表的是 Internationalization这个单词，以 I 开头，以 N 结尾，而中间是 18 个字母，所以简写为 I18N。以后我们说 I18N 和国际化是一个意思。

    4.2、国际化相关要素介绍

    QQ截图20220416153713.png

    4.3、国际化资源 properties 测试

    1.  @Test
    2.     public void testLocale(){
    3.         // 获取你系统默认的语言。国家信息
    4. //        Locale locale = Locale.getDefault();
    5. //
    6. //        System.out.println(locale);
    8. //        for (Locale availableLocale : Locale.getAvailableLocales()) {
    9. //            System.out.println(availableLocale);
    10. //        }
    12.         // 获取中文，中文的常量的 Locale 对象
    13.         System.out.println(Locale.CHINA);
    14.         // 获取英文，美国的常量的 Locale 对象
    15.         System.out.println(Locale.US);
    16.     }

    配置两个语言的配置文件： i18n_en_US.properties 英文 

    1. username=username 
    2. password=password 
    3. sex=sex 
    4. age=age 
    5. regist=regist 
    6. boy=boy 
    7. email=email 
    8. girl=girl 
    9. reset=reset 
    10. submit=submit

    i18n_zh_CN.properties 中文

    1. username=用户名 
    2. password=密码 
    3. sex=性别 
    4. age=年龄 
    5. regist=注册 
    6. boy=男 
    7. girl=女 
    8. email=邮箱 
    9. reset=重置 
    10. submit=提交

    国际化测试代码：

    1.     @Test
    2.     public void testI18n(){
    3.         // 得到我们需要的 Locale 对象
    4.         Locale locale = Locale.US;
    5.         // 通过指定的 basename 和 Locale 对象，读取 相应的配置文件
    6.         ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);
    8.         System.out.println("username：" + bundle.getString("username"));
    9.         System.out.println("password：" + bundle.getString("password"));
    10.         System.out.println("Sex：" + bundle.getString("sex"));
    11.         System.out.println("age：" + bundle.getString("age"));
    12.         //中文乱码解决
    13.         /*
    14.         System.out.println("username：" + new String(bundle.getString("username").getBytes("ISO8859-1"),"UTF-8"));
    15.         System.out.println("password：" + new String(bundle.getString("password").getBytes("ISO8859-1"),"UTF-8"));
    16.         System.out.println("Sex：" + new String(bundle.getString("sex").getBytes("ISO8859-1"),"UTF-8"));
    17.         System.out.println("age：" + new String(bundle.getString("age").getBytes("ISO8859-1"),"UTF-8"));
    18.         */
    19.     }

    4.4、通过请求头国际化页面

    16尚硅谷_JSON、Aajx、i18n王振国 - 课堂笔记.pdf

    版权声明

    本站仅做备份收录，仅供研究与教学参考之用。
    读者将信息用于其他用途的，全部法律及连带责任由读者自行承担，本站不承担任何责任。

    ZONE.CI 全球网 | 安全领域涉猎者-乌云独行地带
    ZONE.CI 全球网
    安全领域涉猎者-乌云独行地带
    以太坊cppgolang区别 编程

    以太坊cppgolang区别

    以太坊是一种去中心化的开源平台，它采用智能合约技术，旨在构建和运行不受干扰的分布式应用程序。作为目前最受欢迎的区块链平台之一，以太坊提供了多种编程语言的支持，其
    12-282 评论
    progolang 编程

    progolang

    Go语言（Golang）是由Google开发的一门静态类型编程语言。作为一名专业的Golang开发者，我深知这门语言的优势和特点。在本文中，我将介绍Golang
    12-281 评论
    golangn个发送者 编程

    golangn个发送者

    Golang是一种开源的编程语言，由Google团队开发，旨在提高程序的并发性和简化软件开发过程。在Go语言中，有时需要向多个接收者发送信息。本文将介绍如何在G
    12-280 评论
    golang技能图谱 编程

    golang技能图谱

    从互联网行业的快速发展到人工智能技术的日益成熟，各种编程语言也应运而生。而在这众多的编程语言中，Golang（即Go）作为一门强大且高效的开发语言备受关注。Go
    12-281 评论
    ZONE.CI 全球网 | 安全领域涉猎者-乌云独行地带
    安全领域涉猎者-乌云独行地带
    ZONE.CI 全球网
    评论：0   参与：  11