Json、Ajax、i18n

最新推荐文章于 2023-05-25 14:56:48 发布

鲨瓜2号

最新推荐文章于 2023-05-25 14:56:48 发布

阅读量786

点赞数 1

分类专栏： # JavaWeb 文章标签： json ajax 前端 servlet

本文链接：https://blog.csdn.net/aetawt/article/details/122957192

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、什么是JSON ？JSON的作用？

二、JSON在客户端【JavaScript 】中的使用

1、JSON 的定义

2、JSON的访问

3、JSON 中俩个常用的方法

三、JSON在服务器【 java】中的使用

1、javaBean 和 json 的互转

一、什么是JSON ？JSON的作用？

1、JavaScript Object Notation，简称JSON（数据交换格式【JSON，xml 】）

2、JSON是一种轻量级的标准的数据交换格式。体积小，易解析

3、在实际开发中，有俩种数据交换格式：JSON 和 XML， XML体积较大，解析麻烦但是语法严谨

4. [] 和 {} 在JS中有什么区别 [] 是数组，{} 是JSON

作用：

JSON 的主要作用：一种标准的数据交换格式，目前非常流行-，俩个系统交换数据大多使用JSON

数据交换指的是客户端和服务器之间业务数据的传递格式。

二、JSON在客户端【JavaScript 】中的使用

1、JSON 的定义

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

			// json的定义
			//json对象中不仅可以保存进本数据类型，还可以保存数组，json对象。
			var jsonObj = {
				"key1":1,
				"key2":"key2_value",
				"key3":true,
				"key4":[11,"arr",false],
				"key5":{
					"key5_1":"key5_1_value",
					"key5_2":"key5_2_value"
				},
				"key6":[{ //json中保存数组，数组保存json对象。
					"key6_1":"key6_1_value",
					"key6_2":"key6_2_value"
				},
					{ //json中保存数组，数组保存json对象。
						"key6_3":"key6_3_value",
						"key6_4":"key6_4_value"
					}
				]
			};

2、JSON的访问

json 就是一个对象，其中的 key 相当于 json 中的键。

json的访问通过：json对象.key 的方式。

	// json的访问
			//通过 对象.key 的方式访问。
			document.write(jsonObj.key1+"<br>");
			document.write(jsonObj.key2+"<br>");

			document.write("<hr>");
			//访问数组中全部的值 【11,arr,false】
			document.write(jsonObj.key4+"<br>");
			//也可以访问指定的下标
			document.write(jsonObj.key4[2]+"<br>");
			//对数组进行遍历
			for (var i= 0; i<jsonObj.key4.length;i++){
				document.write(jsonObj.key4[i]+"<br>");
			}
			document.write("<hr>");

			// 访问json 对象中的 json 对象 {key5_1_value,key5_2_value}
			document.write(jsonObj.key5.key5_1+"<br>");
			document.write(jsonObj.key5.key5_2+"<br>");
			document.write("<hr>");

			//访问数组中的JSON对象
			//数组中的每一个元素都是 json 对象。
			document.write(jsonObj.key6[0].key6_1+"<br>");
			document.write(jsonObj.key6[0].key6_2+"<br>");

			document.write(jsonObj.key6[1].key6_3+"<br>");
			document.write(jsonObj.key6[1].key6_4+"<br>");

访问结果：

3、JSON 中俩个常用的方法

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

JSON.stringify()

把 json 对象转换成为 json 字符串

JSON.parse()

把 json 字符串转换成为 json 对象

在使用时，JSON一定是大写的。！！！


			// json对象转字符串
			var jsonString = JSON.stringify(jsonObj);
			document.write(jsonString+"<br>");
			// json字符串转json对象
			var  jsonObj2 =  JSON.parse(jsonString);
			document.write(jsonObj2+"<br>");

三、JSON在服务器【 java】中的使用

提前导入 gson.jar 包

1、javaBean 和 json 的互转

准备User实体类：

public class User {
    private Integer id ;
    private String name ;

    public User(Integer id, String name) {
        this.id = id;
        this.name = name;
    }

    public User() {
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

    // javaBean 和 json 的互转  
    @Test
    public void test1(){
        User user = new User(1,"张三");
        //创建 Gson 实例对象。
        Gson gson = new Gson() ;
        //javaBean --> json字符串
        String userToJsonString = gson.toJson(user);
        System.out.println(userToJsonString);
        // json字符串 --> javaBean
        //fromJson():参数一：json字符串   参数二：转换的对象类型
        User jsonStringToUser = gson.fromJson(userToJsonString, User.class);
        System.out.println(jsonStringToUser);
    }

// 输出结果
//{"id":1,"name":"张三"}
//json.User{id=1, name='张三'}

2、List 和 json 的互转

//<List<User>>这个泛型就是我们想要转换的类型。
public class UserType extends TypeToken<List<User>> {
}

如果 json 转换回一个 JavaBean 对象时，使用：对象.class 就行，但是集合必须使用 Type

第一种方法：

1、写一个类继承 TypeToken<> :泛型里写想要转换的数据类型

2、在 gson.fromJson(userListToJsonString,new UserType().getType());

第二种方法：

也可以使用匿名内部类的方式
gson.fromJson(userListToJsonString,new TypeToken< List<User>>(){}.getType());

// List 和 json 的互转
    @Test
    public void test2(){
        List<User> userList = new ArrayList<>();
        //创建 Gson 实例对象
        Gson gson = new Gson();
        userList.add(new User(1,"张三"));
        userList.add(new User(2,"李四"));

        //list --> json 字符串
        String userListToJsonString = gson.toJson(userList);
        System.out.println(userListToJsonString);

        // json 字符串 --> list
        // fromJson() 第二个参数：并不是简单的userList.getClass()了，因为他是一个集合。需要传入一个 Type 类型。
        //需要写一个类继承：TypeToken<想要转换的数据类型> 然后 new UserType().getType()
        List user = gson.fromJson(userListToJsonString,new UserType().getType());
        //使用匿名内部类
        // gson.fromJson(userListToJsonString,new TypeToken< List<User>>(){}.getType());
        System.out.println(user);
    }

//[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]
//[json.User{id=1, name='张三'}, json.User{id=2, name='李四'}]

3、map 和 json 的互转

 // map 和 json 的互转
    @Test
    public void test3(){
        Map<Integer,User> userMap = new HashMap<>();
        Gson gson = new Gson() ;
        userMap.put(1,new User(1,"张三"));
        userMap.put(2,new User(2,"李四"));

        // map --> json字符串
        String userMapToJsonString = gson.toJson(userMap);
        System.out.println(userMapToJsonString);

        // json 字符串 --> map
        Map<Integer,User> jsonStringToUserMap =  gson.fromJson(userMapToJsonString, new TypeToken<Map<Integer, User>>(){}.getType());
        System.out.println(jsonStringToUserMap);
        // {"1":{"id":1,"name":"张三"},"2":{"id":2,"name":"李四"}}
        // {1=json.User{id=1, name='张三'}, 2=json.User{id=2, name='李四'}}
    }

四、什么是 Ajax 请求？

AJAX 即 “ A synchronous J avascript A nd X ML ” （异步 JavaScript 和 XML ），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术 。

我们以前学的发送请求，整个页面都会发生变化，并且地址栏也会更新。

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

同步和异步的区别：

异步：并不会影响页面其他代码的执行，可以理解为多线程。

同步：页面中其他的代码必须等待 AJax 发送完请求并且收到回应完才能执行。

五、原生 AJAX 请求的示例

使用Ajax向Servlet发送请求步骤：

1、创建 XMLHttpRequest 对象

2、调用 open 方法设置请求参数

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

status

200: "OK"

404: 未找到页面

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

4、调用send方法发送请求

		<script type="text/javascript">

			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest
				var xmlHttpRequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
//				第一个参数：请求方式【GET，POST】，不区分大小写
//				第二个参数：url 【请求地址，绝对和相对路径都可以】
//				第三个参数：是否是异步请求【一般为 true 】
				xmlHttpRequest.open("GET","http://localhost:8080/json/javaScriptAjax?action=javaScriptAjax",true);
// 				3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
//				onreadystatechange : 当readystate属性状态改变时处理该事件。
//				readystate一共有五个状态 0-4
				xmlHttpRequest.onreadystatechange = function () {
					if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
						//获取 Servlet 响应过来的字符串。
						var jsonString = xmlHttpRequest.responseText;
						// json字符串 --> json对象
						var jsonObj = JSON.parse(jsonString);
						document.getElementById("div01").innerText = "编号：" + jsonObj.id + ",姓名：" + jsonObj.name
					}
				};
// 				4、调用send方法发送请求
				xmlHttpRequest.send();

			}
		</script>

像上面那种原生的【JavaScript】 Ajax 请求很少用，一般使用 jQuery 中Ajax请求。

六、jQuery 中的 Ajax 请求

接受请求的 Servlet ：

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求，并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串，将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }

    protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求，并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串，将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void jQueryAjax_get(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求，并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串，将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void jQueryAjax_post(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求，并相应一些内容

        User user = new User(1,"张三");

        //由于响应到浏览器中的数据都是 字符串，将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson() ;
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void jQueryAjax_Json(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //在Servlet中接受请求，并相应一些内容

        User user = new User(1, "张三");

        //由于响应到浏览器中的数据都是 字符串，将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson();
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
    protected void serialize(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取参数
        System.out.println("username = " +request.getParameter("username"));
        System.out.println("password = " + request.getParameter("password"));
        //在Servlet中接受请求，并相应一些内容
        User user = new User(1, "张三");

        //由于响应到浏览器中的数据都是 字符串，将 JavaBean 对象转换成为 字符串
        Gson gson = new Gson();
        String userJsonString = gson.toJson(user);
        response.getWriter().write(userJsonString);
    }
}

1、$.ajax() :通过 HTTP 请求加载远程数据。

$.ajax({

// 参数

});

参数

url: 请求地址。

type：请求方式，GET或POST

data：发送到服务器的数据。将自动转换为请求字符串格式。【请求参数】

有俩种格式：

1、name=value&name=value

2、{name:"value"}

dataType: 响应的数据类型

"json": 返回 JSON 对象。

"xml" : 返回的是 xml 数据

"text": 返回纯文本字符串

success：回调函数，请求成功后执行的函数。需要有一个参数接受返回的数据；数据类型取决于 dataType 设置的数据类型

// ajax请求
				$("#ajaxBtn").click(function(){
					$.ajax({
						url:"http://localhost:8080/json/javaScriptAjax",
						type:"GET",
						data:"action=jQueryAjax",
						success:function (data) {
							//json 字符串 --> json对象
							var jsonObj = JSON.parse(data);
							// $("#msg").html("编号:" + data.id + ", 姓名:" + data.name);
							$("#msg").html("编号:" + jsonObj.id + ", 姓名:" + jsonObj.name);
						},
						// dataType:"json" //data 是 json对象。
						dataType:"text" //data 是 字符串 对象。

					});
				});

2、$.get 和 $.post

$.get 和 $.post 参数是一样的，不同的是：$.get 指定发送的是 GET请求。$.post 指定发送的是POST请求。

参数

url 请求的 url 地址

data 发送的数据【请求参数】

callback 成功的回调函数

type 返回的数据类型

             // ajax--get请求
            $("#getBtn").click(function () {
                $.get("http://localhost:8080/json/javaScriptAjax", "action=jQueryAjax_get", function (data) {
                    $("#msg").html("$.get 编号:" + data.id + ", 姓名:" + data.name);
                }, "json");
            });  
             // ajax--post请求
            $("#postBtn").click(function () {
                // post请求
                $.post("http://localhost:8080/json/javaScriptAjax", "action=jQueryAjax_post", function (data) {
                    $("#msg").html("$.post 编号:" + data.id + ", 姓名:" + data.name);
                }, "json");
            });

3、$.getJSON : 发送的请求是 GET，并且返回数据类型是 Json 对象。

参数

url 请求的 url 地址

data 发送的数据【请求参数】

callback 成功的回调函数

            // ajax--getJson请求
            $("#getJSONBtn").click(function () {
                $.getJSON("http://localhost:8080/json/javaScriptAjax", "action=jQueryAjax_Json", function (data) {
                    $("#msg").html("$.getJSON 编号:" + data.id + ", 姓名:" + data.name);
                });
            });

4、表单序列化 serialize()

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

            // ajax请求
            $("#submit").click(function () {
                // 把参数序列化
                //获取表单中所有的 value 值。自动以 name=value&name=value 进行拼接
                var serialize = $("#form01").serialize();
                //发送请求
                //"action=serialize&" 使用serialize获取参数时，前面是不带 & ，需要自己写上。
                $.getJSON("http://localhost:8080/json/javaScriptAjax", "action=serialize&"+serialize, function (data) {
                    $("#msg").html("$.getJSON 编号:" + data.id + ", 姓名:" + data.name);
                });
            });

在拼接 serialize() 获取的参数时，前面是没有连接符：& 的，需要自己加上。

七、i18n

1、什么是 i18n 国际化？

国际化（Internationalization）指的是同一个网站可以支持多种不同的语言，以方便不同国家，不同语种的用户访问。

国际化的英文 Internationalization ，但是由于拼写过长，老外想了一个简单的写法叫做 I18N ，代表的是 Internationalization 这个单词，以 I 开头，以 N 结尾，而中间是 18 个字母，所以简写为 I18N 。以后我们说 I18N 和国际化是一个意思。

2、i18n 的三要素介绍

查看所有的地区语言：

    @Test
    public void test01(){
        //可查看所有支持的语言，
        Locale[] availableLocales = Locale.getAvailableLocales();
        for (Locale locale : availableLocales) {
            System.out.println(locale);
        }
    }

获取指定 Locale 对象：

    @Test
    public void test02(){
        //获取指定的Locale对象
        Locale locale_ch = Locale.CHINA ;
        System.out.println(locale_ch); //zh_CN

        Locale locale_us = Locale.US ;
        System.out.println(locale_us);//en_US
    }

t通过不同的 Local 对象读取不同语言的配置文件：

    // 通过读取不同的配置文件，获取不同语言的信息。
    @Test
    public void test03(){
        //获取指定的Locale对象
        Locale locale_ch = Locale.CHINA ;
        //获取资源绑定器
        ResourceBundle bundle = ResourceBundle.getBundle("i18n",locale_ch);
        System.out.println("username = " + bundle.getString("username"));
        System.out.println("password = " + bundle.getString("password"));
        System.out.println("age = " + bundle.getString("age"));
        System.out.println("sex = " + bundle.getString("sex"));
        /*
        username = 用户名
        password = 密码
        age = 年龄
        sex = 性别
         */
    }

 // 通过读取不同的配置文件，获取不同语言的信息。
    @Test
    public void test03(){
        //获取指定的Locale对象
        Locale locale_ch = Locale.US ;
        //获取资源绑定器
        ResourceBundle bundle = ResourceBundle.getBundle("i18n",locale_ch);
        System.out.println("username = " + bundle.getString("username"));
        System.out.println("password = " + bundle.getString("password"));
        System.out.println("age = " + bundle.getString("age"));
        System.out.println("sex = " + bundle.getString("sex"));
        /*
        username = username;
        password = password;
        age = age ;
        sex = sex ;
         */
    }

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

	<%
		/*获取请求头中的的语言信息*/
		Locale locale = request.getLocale();
		System.out.println(locale);
		// 输出结果 zh_CN
	%>

这个默认的语言信息是从哪里来的呢？

从请求头中的 Accept-Language 中得到的，zh-CN 表示语言，q=0.9 表示权重，越大优先级越高。可以从浏览器的设置中增加语言。位置靠前的语言权重最高。优先级就越高。

当 US 靠前时，默认语言就是 US、

通过请求头中的 Accept-Language 参数设置不同语言的页面：

<body>
	<%
		/*获取请求头中的的语言信息*/
		Locale locale = request.getLocale();
		// 获取资源绑定器
		ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);

	%>
	<a href="">中文</a>|
	<a href="">english</a>
	<center>
		<%--获取配置文件中的信息--%>
		<h1><%=bundle.getString("register")%></h1>
		<table>
		<form>
			<tr>
				<td><%=bundle.getString("username")%></td>
				<td><input name="username" type="text" /></td>
			</tr>
			<tr>
				<td><%=bundle.getString("password")%></td>
				<td><input type="password" /></td>
			</tr>
			<tr>
				<td><%=bundle.getString("sex")%></td>
				<td><input type="radio" /><%=bundle.getString("boy")%><input type="radio" /><%=bundle.getString("girl")%></td>
			</tr>
			<tr>
				<td><%=bundle.getString("email")%></td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="reset" value="<%=bundle.getString("reset")%>" />&nbsp;&nbsp;
				<input type="submit" value="<%=bundle.getString("submit")%>" /></td>
			</tr>
			</form>
		</table>
		<br /> <br /> <br /> <br />
	</center>
	国际化测试：
	<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
	<br /> 2、通过左上角，手动切换语言
</body>

4、通过选择语言类型实现国际化

像这种修改浏览器设置来实现国际化，对用户不是很友好。

一般是点击 中文|English 切换中英文。

<body>
<%--使用EL表达式--%>
<%--	<%
		/*获取请求头中的的语言信息*/
		Locale locale =null ;
		String country = request.getParameter("country");
		if ("ch".equals(country)){
			locale = Locale.CHINA;
		}else if ("usa".equals(country)){
			locale = Locale.US;
		}else{
			locale = Locale.getDefault();
		}
		// 获取资源绑定器
		ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);

	%>--%>

<%--使用JSTL标签库--%>

<%--设置 Locale--%>
<fmt:setLocale value="${param.country}"/>
<%--设置bundle--%>
<fmt:setBundle basename="i18n"/>

<a href="i18n.jsp?country=zh_CN">中文</a>|
<a href="i18n.jsp?country=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"/> "/>&nbsp;&nbsp;
                    <input type="submit" value="<fmt:message key="submit"/> "/></td>
            </tr>
        </form>
    </table>
    <br/> <br/> <br/> <br/>
</center>
国际化测试：
<br/> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
<br/> 2、通过左上角，手动切换语言
</body>
</html>