JavaWeb---JSON、AJAX、i18n

科技2022-07-13 153

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 定义示例：

var jsonObj = { "key1":11, "key2":"aaa", "key3":true, "key4":[11,"as",false], "key5":{ "key5_1":51, "key5_2":"key5_2_value" }, "key6":[{ "key6_1":61, "key6_2":"key6_6_value" },{ "key6_3":63, "key6_4":"key6_6_value" }] }

1.1.2、json 的访问

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

json 访问示例：

alert(typeof(jsonObj));//object类型，json就是一个对象 alert(jsonObj.key1);//11 alert(jsonObj.key3);//true alert(jsonObj.key4);//得到数组[11,"as",true] //json中数组值的遍历 for (var i = 0; i < jsonObj.key4.length; i++) { alert(jsonObj.key4[i]); } alert(jsonObj.key5.key5_1);//51 alert(jsonObj.key5.key5_2);//key5_2_value alert(jsonObj.key6);//得到json数组 //取出来每一个元素都是json对象 var jsonItem = jsonObj.key6[0]; alert(jsonItem.key6_2); alert(jsonItem.key6_1);

1.1.3、json 的两个常用方法

json 的存在有两种形式。

一种是：对象的形式存在，我们叫它 json 对象。一种是：字符串的形式存在，我们叫它 json 字符串。

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

示例代码：

1.2、JSON 在 java 中的使用

1.2.1、javaBean 和 json 的互转

//1.json和javaBean的互相转化 @Test public void test1(){ Person person = new Person(1, "smlz"); //创建Gson对象实例 Gson gson = new Gson(); //toJson方法可以把java对象转换成为json字符串 String personJsonString = gson.toJson(person); System.out.println(personJsonString); //fromJson把json字符串转换回java对象 //第一个参数是json字符串 //第二个参数是转换回去的java对象类型 Person person1 = gson.fromJson(personJsonString, Person.class); System.out.println(person1); }

1.2.2、List 和 json 的互转

//2.List和Json之间的相互转化 @Test public void test2(){ List<Person> personList = new ArrayList<>(); personList.add(new Person(1,"jack")); personList.add(new Person(2,"hjj")); Gson gson = new Gson(); //把List转换为json字符串 String personListJsonString = gson.toJson(personList); System.out.println(personListJsonString); //把json字符串转回List List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType()); System.out.println(list); Person person = list.get(0); System.out.println(person); }

1.2.3、map 和 json 的互转

//3.Map和Json之间的相互转化 @Test public void test3(){ Map<Integer,Person> personMap = new HashMap<>(); personMap.put(1,new Person(1,"jack")); personMap.put(2,new Person(2,"hjj")); Gson gson = new Gson(); //把Map转换为Json字符串 String personMapJsonString = gson.toJson(personMap); System.out.println(personMapJsonString); //把Json字符串转回Map Map<Integer,Person> personMap1 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer, Person>>() {}.getType());//使用匿名内部类的形式 System.out.println(personMap1); Person person = personMap1.get(1); System.out.println(person); }

2、AJAX 请求

2.1、什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。 Ajax 请求的局部更新，浏览器地址栏不会发生变化 ,局部更新不会舍弃原来页面的内容

2.2、原生 AJAX 请求的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中的JavaScriptAjax function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 xmlHttpRequest.open("GET","http://localhost:8080/json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true); // 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。 xmlHttpRequest.onreadystatechange = function(){ if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ var jsonObj = JSON.parse(xmlHttpRequest.responseText); // alert(xmlHttpRequest.responseText); document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " 姓名：" + jsonObj.name; } } // 3、调用send方法发送请求 xmlHttpRequest.send(); } </script> </head> <body> <button onclick="ajaxRequest()">ajax request</button> <div id="div01"> </div> </body> </html>

2.3、jQuery 中的 AJAX 请求

$.ajax 方法

url 表示请求的地址type 表示请求的类型 GET 或 POST 请求data 表示发送给服务器的数据(格式有两种：一：name=value&name=value 二：{key:value})success 请求成功，响应的回调函数dataType 响应的数据类型(常用的数据类型有： text 表示纯文本 ,xml 表示 xml 数据, json 表示 json 对象) // ajax请求 $("#ajaxBtn").click(function(){ $.ajax({ url:"http://localhost:8080/json_ajax_i18n/ajaxServlet", data:"action=jQueryAjax", type:"GET", success:function (data) { alert("服务器返回的数据是：" + data); $("#msg").html("编号：" + data.id + ",姓名：" + data.name); }, dataType: "json" }); });

$.get 方法和$.post 方法

url : 请求的 url 地址 data : 发送的数据 callback : 成功的回调函数 type : 返回的数据类型

$.getJSON 方法

url : 请求的 url 地址 data : 发送给服务器的数据 callback : 成功的回调函数

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

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、国际化相关要素介绍

4.3、国际化资源 properties 测试

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

i18n_zh_CN.properties 中文

国际化测试代码：

public class I18nTest { @Test public void testLocale(){ //获取你系统默认的语言，国家信息 Locale locale = Locale.getDefault(); System.out.println(locale); //获取中文，中文常量的locale对象 System.out.println(Locale.CHINA); //获取英文，英文常量的local对象 System.out.println(Locale.US); } @Test public void testI18n(){ //先获得我们需要的Locale对象 Locale locale = Locale.CHINA; //通过指定的basename和Local对象，读取相应的配置文件 ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale); System.out.println("username=" + bundle.getString("username")); System.out.println("password=" + bundle.getString("password")); System.out.println("sex=" + bundle.getString("sex")); System.out.println("age=" + bundle.getString("age")); } }

4.4、JSTL 标签库实现国际化

<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <%-- 1.使用标签设置locale信息 --%> <fmt:setLocale value="${ param.locale }"/> <%-- 2.使用标签设置baseName --%> <fmt:setBundle basename="i18n"/> <%-- 3.使用标签输出国际化信息 --%> <%-- <fmt:message key=""/>--%> <a href="i18n_fmt.jsp?locale=zh_CN">中文</a>| <a href="i18n_fmt.jsp?locale=en_US">english</a> <center> <h1><fmt:message key="register"/></h1> <table> <form> <tr> <td><fmt:message key="username"/></td> <td><input name="username" type="text" /></td> </tr> <tr> <td><fmt:message key="password"/></td> <td><input type="password" /></td> </tr> <tr> <td><fmt:message key="sex"/></td> <td><input type="radio" /><fmt:message key="boy"/><input type="radio" /><fmt:message key="girl"/></td> </tr> <tr> <td><fmt:message key="email"/></td> <td><input type="text" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="reset" value="<fmt:message key="reset"/>" /> <input type="submit" value="<fmt:message key="submit"/>" /></td> </tr> </form> </table> <br /> <br /> <br /> <br /> </center> </body> </html>

Processed: 0.009, SQL: 8