[JavaWeb]AJAX 和 i18n 国际化

Posted 2022-04-02 Spring-_-Bear

一、AJAX

1. AJAX 的定义

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

2. 原生 JavaScript 的 AJAX 请求示例

1. 浏览器端发起 AJAX 请求

   <script type="text/javascript">
       function ajaxRequest() 
           // 1、首先创建 XMLHttpRequest
           var xmlHttpRequest = new XMLHttpRequest();
           // 2、调用 open 方法设置请求参数
           xmlHttpRequest.open("GET", "http://localhost:8080/json/ajaxServlet?action=javascriptAjax", true);
           // 4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
           xmlHttpRequest.onreadystatechange = function () 
               if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) 
                   var personJson = JSON.parse(xmlHttpRequest.responseText);
                   document.getElementById("div01").innerhtml = "姓名：" + personJson.name + "<br/>" + "年龄：" + personJson.age;
               
           ;
           // 3、调用 send 方法发送请求
           xmlHttpRequest.send();
       
   </script>
   

2. 服务器端接收客户端的 AJAX 请求并给浏览器端返回数据

   public class AjaxServlet extends BaseServlet 
       protected void javascriptAjax(HttpServletRequest request, HttpServletResponse response) throws IOException 
           request.setCharacterEncoding("UTF-8");
           response.setContentType("text/html; charset=UTF-8");
   
           System.out.println("已收到 Ajax 请求");
           Person person = new Person("Spring-_-Bear", 22);
           Gson gson = new Gson();
           String personJsonString = gson.toJson(person);
           response.getWriter().write(personJsonString);
       
   
   

3. AJAX 请求的特点说明

1. ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术，浏览器地址栏的地址不会发生变化
2. 同步请求：浏览器的 ajax 请求必须等服务器执行完后才执行浏览器 ajax 请求后的代码
3. 异步请求：浏览器无需等服务器处理完 ajax 请求即可执行 ajax 请求后的代码

4. jQuery 的 ajax 方法

1. $.ajax() 方法

   // ajax请求
   $("#ajaxBtn").click(function () 
       $.ajax(
           // url 表示请求的地址
           url: "http://localhost:8080/json/ajaxServlet",
           // data 表示发送给服务器的数据，格式有两种类型 1、name=value&name=value 2、key:value
           data: "action=jQueryAjax",
           // type 表示请求的方法类型 GET 或 POST
           type: "GET",
           // success 请求成功，响应的回调函数，function 函数中一定要有参数接收来自服务器的数据
           success: function (dataFromServer) 
               $("#msgFromServer").text(dataFromServer);
           ,
           // dataType 返回内容格式，常用的数据类型有 text、xml、json
           dataType: "text"
       )
   );
   

5. $.get() 、$.post() 和 $.getJSON() 方法

// ajax--get请求
$("#getBtn").click(function () 
    // 1. url		请求的 url 地址
	// 2. data      发送给服务器的数据
	// 3. callback  请求成功的回调函数
	// 4. type      返回内容格式
    $.get(
        "http://localhost:8080/json/ajaxServlet", 
        "action=jQueryGetAjax", 
        function (data) 
        	$("#msgFromServer").html("姓名：" + data.name + "<br/>" + "年龄：" + data.age)
    	, 
        "json");
);

6. jQuery 的 serialize 方法

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

// serialize 方法使用
$("#submit").click(function () 
    $.getJSON("http://localhost:8080/json/ajaxServlet", "action=jQuerySerializeAjax&" + $("#form01").serialize(), function (data) 
        $("#msgFromServer").html("用户名：" + data.username + "<br/>" + "密码：" + data.password)
    );
);

二、i18n

1. i18n 的定义及三要素

1. 国际化（Internationalization）这个单词以 I 开头，以 N 结尾，I 和 N 之间还含有 18 个英文字母，简称 i18n
2. Locale 表示不同的时区、位置、语言（zh_CN 中文，中国）、（en_US 英文，美国）
3. 国际化配置文件命名规则：baseName_locale.properties（中文：i18n_zh_CN.properties）、（英文：i18n_en_US.properties）
4. ResourceBundle 资源包：ResourceBundle.getBundle() 根据给定的 baseName 和 Locale 读取相应的配置文件，得到文字信息

2. i18n 国际化基础示例

public void test()
Locale locale = Locale.CHINA;
//  Locale locale = Locale.US;
Resource bundle = ResourceBundle.getBundle("i18n",locale);

System.out.println("username" + bundle.getString("username"));

3. 通过请求头实现国际化

4. 使用 JSTL 标签库 fmt 实现国际化

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%-- 使用标签设置 Locale 信息 --%>
<fmt:setLocale value="$param.local"/>
<%-- 使用标签设置 baseName --%>
<fmt:setBundle basename="i18n"/>
<%-- 使用标签输出相应信息> --%>
<fmt:message key="username"/>