JSON、AJAX、i18n

一、JSON

1、什么是JSON？

JSON是一种轻量级的数据交换格式，易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对json的支持。

json是一种轻量级的数据交换格式。

	轻量级指的是跟xml做对比

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

2、JSON在JavaScript中的使用

1）json的定义

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

		<script type="text/javascript">
			// json的定义
			var jsonObj={
				"key1":12,
				"key2":"abc",
				"key3":true,
				"key4":[11,"aca",false],
				"key5":{
					"key5_1":551,
					"key5_2":"key5_2_value",
				},
				"key6":[{
					"key6_1_1":6611,
					"key6_1_2":"key6_1_2_value",
				},{
					"key6_2_1":true,
					"key6_2_2":[12,"ada",true],
				}]
			};
			// json的访问
			// json对象转字符串
			// json字符串转json对象
		</script>

2）json的访问

json本身是一个对象。

json中的key可以理解为是对象中的一个属性。

json中的key访问就跟访问对象的属性一样：json对象.key

		<script type="text/javascript">
			// json的定义
			var jsonObj={
				"key1":12,
				"key2":"abc",
				"key3":true,
				"key4":[11,"aca",false],
				"key5":{
					"key5_1":551,
					"key5_2":"key5_2_value",
				},
				"key6":[{
					"key6_1_1":6611,
					"key6_1_2":"key6_1_2_value",
				},{
					"key6_2_1":true,
					"key6_2_2":[12,"ada",true],
				}]
			};
			// json的访问
			alert(jsonObj.key1);

			for (var i=0;i<jsonObj.key4.length;i++){
				alert(jsonObj.key4[i]);
			};
			// json对象转字符串
			// json字符串转json对象
		</script>

3）json的两个常用方法 - - - json对象和json字符串之间的转换

json的存在形式有两种：

①  对象的形式存在，叫它json对象。
② 字符串的形式存在，叫它json字符串

一般要操作json中的数据的时候，需要json对象的格式。

一般要在客户端和服务器之间进行数据交换的时候，使用json字符串。

JSON.stringify()		把json对象转换成为json字符串

JSON.parse()			把json字符串转换成为json对象

		<script type="text/javascript">
			// json的定义
			var jsonObj={
				"key1":12,
				"key2":"abc",
				"key3":true,
				"key4":[11,"aca",false],
				"key5":{
					"key5_1":551,
					"key5_2":"key5_2_value",
				},
				"key6":[{
					"key6_1_1":6611,
					"key6_1_2":"key6_1_2_value",
				},{
					"key6_2_1":true,
					"key6_2_2":[12,"ada",true],
				}]
			};
			
			// json的访问
			alert(jsonObj.key1);

			for (var i=0;i<jsonObj.key4.length;i++){
				alert(jsonObj.key4[i]);
			};
			
			// json对象转字符串
			// 把json对象转换成为json字符串
			var jsonString=JSON.stringify(jsonObj); //特别像Java中对象的toString
			alert(jsonString);

			// 把json字符串转换成为json对象
			var jsonObject2=JSON.parse(jsonString);
			alert(jsonObject2);   //jsonObject2与上面的jsonObject内容一样，访问也是一样的
			
			// json字符串转json对象
			
		</script>

3、JSON在java中的使用

在java中操作json要导入json的jar包

1）JavaBean和json的互转

	//1）JavaBean和json的互转
    @Test
    public void test1(){
        Person person = new Person(1, "GUO");
        // 创建Gson对象实例
        Gson gson = new Gson();

        // toJson方法将JavaBean转为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);
    }

2）List和json的互转

注意：

在把json字符串转换回list时

采用ArrayList list = gson.fromJson(personListJsonString, personArrayList.getClass());
	不能转换为正确的Person类型

故要通过创建一个类PersomListType来继承gson中的TypeToken，才可以正确返回Person类型。

list转json要使类型转换正确如下：

方式一：需要继承TypeToken类

方式二：使用匿名类的匿名对象

PersonListType类代码如下： 只需继承操作

public class PersonListType extends TypeToken<ArrayList<Person>> {
}

List和json互转测试代码如下;

	//2）List和json的互转
    @Test
    public void test2(){
        ArrayList<Person> personArrayList = new ArrayList<>();

        personArrayList.add(new Person(1,"abc"));
        personArrayList.add(new Person(2,"vvv"));

        // 创建Gson对象实例
        Gson gson = new Gson();

        // 把List转换为json字符串
        String personListJsonString = gson.toJson(personArrayList);
        System.out.println(personListJsonString);

        //把json字符串转换为List,使用匿名类的匿名对象来省去创建继承TypeToken类的类
        //ArrayList list = gson.fromJson(personListJsonString, new PersonListType().getType());
        ArrayList list = gson.fromJson(personListJsonString, new TypeToken<ArrayList<Person>>(){}.getType());
        System.out.println(list);

        Object o = list.get(0);
        System.out.println(o);

    }

3）map和json的互转

map转json要使类型转换正确如下：

方式一：需要继承TypeToken类

方式二：使用匿名类的匿名对象

PersonMapType类代码如下： 只需继承操作

public class PersonMapType extends TypeToken<HashMap<Integer,Person>> {
}

Map和json互转测试代码如下;

	//3）map和json的互转
    @Test
    public void test3(){
        HashMap<Integer, Person> personHashMap = new HashMap<>();

        personHashMap.put(1,new Person(1,"aaa"));
        personHashMap.put(2,new Person(2,"bbb"));

        Gson gson = new Gson();
        //把map集合转换成为json字符串
        String personMapJsonString = gson.toJson(personHashMap);
        System.out.println(personMapJsonString);

       //把json字符串转换为map集合,使用匿名类的匿名对象可以省去创建
        //Map<Integer,Person> personMap2=gson.fromJson(personMapJsonString, new PersonMapType().getType());
        Map<Integer,Person> personMap2=gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());
        System.out.println(personMap2);

        Person person = personMap2.get(1);
        System.out.println(person);
    }

二、AJAX请求

1、什么是AJAX请求

AJAX即"Asynchronous Javascript And XML"（异步JavaScript和XML），是一种创建交互时网页应用的页面开发技术。

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

解释：局部更新和异步发起请求

下面示例中，只是改变了div1中的内容,后面的table没有改变，内容依然可以显示，地址栏也没有发生变化。

Ajax请求的局部更新： ---不同于a标签的访问方式
	① 浏览器地址栏不会发生变化
	② 局部更新不会舍弃原来页面的内容
Ajax的异步请求：
	不再是从上到下的执行，如果有两种输出，哪一步先执行完成就可以先输出。

2、原生JavaScript的AJAX请求示例

使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax方法

步骤如下：

① 首先要创建XMLHttpRequest
② 调用open方法设置请求参数
③ 在send方法前绑定onreadystatechange事件，处理请求完成后的操作
④ 调用send方法发送请求

ajax.html代码如下：

<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方法设置请求参数   请求的方法、请求的地址、是否是异步处理请求-true为异步
				xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlhttprequest.onreadystatechange=function (){
					if (xmlhttprequest.readyState==4 && xmlhttprequest.status==200){

						// 把json字符串转换为json对象
						var jsonObj=JSON.parse(xmlhttprequest.responseText)

						// 把响应的数据显示在页面上
						document.getElementById("div01").innerHTML= "编号：" + jsonObj.id + ",姓名："+jsonObj.name;
					}
				}
// 				3、调用send方法发送请求
				xmlhttprequest.send();

				alert("最后一行执行代码");
			}
		</script>
	</head>
	<body>
		<a href="http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">a标签的访问，不同于ajax，它的地址栏会发生改变，并且页面之后的内容也不会再显示</a> <br/>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
		
		<table >
			<tr>
				<td>1.1</td>
				<td>1.2</td>
			</tr>
			<tr>
				<td>2.1</td>
				<td>2.2</td>
			</tr>
		</table>
		
	</body>
</html>

AjaxServlet继承BaseServlet类的代码如下：

public class AjaxServlet extends BaseServlet {


    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("Ajax请求过来了");

        Person person = new Person(1, "aaa");

        //将对象转为json格式的字符串  把json字符串添加到响应中
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        response.getWriter().write(personJsonString);
    }
}

工具类BaseServlet的代码如下：

public abstract class BaseServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //解决post请求中文乱码问题
        //一定要在获取请求参数之前调用才有效
        request.setCharacterEncoding("UTF-8");
        //解决响应中文乱码问题
        response.setContentType("text/html;charset=UTF-8");
        
        String action = request.getParameter("action");

        try {
            // 获取action业务鉴别字符串，获取相应的业务方法反射现象
            Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);

            // 调用目标业务方法
            method.invoke(this,request,response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

3、jQuery中的AJAX请求

① $.ajax方法

url				表示请求的地址
type			表示请求的类型GET或POST请求
data			表示发送给服务器的数据
	格式有两种：
		① &key=value1&key=value2
		② {key:["value1","value2"]}		jQuery会自动为不同值对应同一个名称
success			请求成功，响应的回调函数
dataType		响应的数据类型
	常用的数据类型：
		text	表示纯文本
		xml		表示xml数据
		json	表示json对象

		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					
					$.ajax({
						url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
						//data:"action=jQueryAjax",
						data:{action:"jQueryAjax"},
						type:"GET",
						success:function (data){
							alert("服务器返回的数据是："+data);

							var jsonObj=JSON.parse(data);  //把json字符串转换为json对象

							$("#msg").html("编号："+jsonObj.id+"，姓名："+jsonObj.name);
						},
						dataType:"text"		//如果返回的是json对象类型，会自动转为json对象
					});
			});
		</script>

AjaxServlet程序中的jQueryAjax方法代码如下：

	protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryAjax方法被调用");

        Person person = new Person(1, "aaa");

        //将对象转为json格式的字符串  把json字符串添加到响应中
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        response.getWriter().write(personJsonString);
    }

② $.get方法和 $.post方法 - - -在$.ajax基础上再次封装的

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

		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// ajax--get请求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data){
						$("#msg").html("get  编号："+data.id+"，姓名："+data.name);
					},"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data){
						$("#msg").html("post  编号："+data.id+"，姓名："+data.name);
					},"json");
					
				});
			});
		</script>

AjaxServlet程序中的jQueryGet和jQueryPost方法代码如下：

	protected void jQueryGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryGet方法被调用");

        Person person = new Person(1, "aaa");

        //将对象转为json格式的字符串  把json字符串添加到响应中
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        response.getWriter().write(personJsonString);
    }


    protected void jQueryPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryPost方法被调用");

        Person person = new Person(1, "aaa");

        //将对象转为json格式的字符串  把json字符串添加到响应中
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        response.getWriter().write(personJsonString);
    }

③ $.getJSON方法 - - - 是GET请求，返回的是JSON数据

url				请求的url地址
data			发送的数据
callback		成功的回调函数

		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					// 调用
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data){
						$("#msg").html("getJSON  编号："+data.id+"，姓名："+data.name);
					});
				});
			});
		</script>

AjaxServlet程序中的jQueryGetJSON方法代码如下：

	protected void jQueryGetJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryGetJSON方法被调用");

        Person person = new Person(1, "aaa");

        //将对象转为json格式的字符串  把json字符串添加到响应中
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        response.getWriter().write(personJsonString);
    }

补- - -表单序列化：实现局部更新，即提交后地址栏不变、后面的代码依然显示。

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

		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#submit").click(function(){
					// 把参数序列化

					alert($("#form01").serialize()); 	// $("#form01").serialize()获取表单项的内容，并且完成拼接

					// 把拼接好的表单项内容作为参数发给服务器---注：要在访问方法后加个&
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data){
						$("#msg").html("Serialize  编号："+data.id+"，姓名："+data.name);
					});
				});
			});
		</script>

AjaxServlet程序中的jQuerySerialize方法代码如下：

protected void jQuerySerialize(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQuerySerialize方法被调用");

        // 获取请求参数，来验证Serialize加入到请求中
        System.out.println("用户名：" + request.getParameter("username"));
        System.out.println("密码：" + request.getParameter("password"));


        Person person = new Person(1, "aaa");

        //将对象转为json格式的字符串  把json字符串添加到响应中
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        response.getWriter().write(personJsonString);
    }

三、i18n(国际化)- - - 了解内容

1、国际化相关要素介绍

2、i18n示例

① 简单测试如下：

public class I18nTest {

    @Test
    public void testLocale(){

       // 获取系统默认的语言，国家信息
        Locale locale = Locale.getDefault();
        System.out.println(locale);

        // 获取中文，中国的常量的Locale对象
        System.out.println(Locale.CHINA);
        // 获取英文，美国的常量的Locale对象
        System.out.println(Locale.US);
    }

    @Test
    public void testI18n(){
        //得到需要的Locale对象
        Locale locale = Locale.US;
        //通过指定的basename和Locale对象，读取相应的配置文件
        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"));
    }
}

其中i18n_zh_CN的配置文件如下：

username=姓名
password=密码
sex=性别
age=年龄
regist=性别
boy=男
girl=女
email=邮箱
reset=注册
submit=提交

其中i18n_en_US的配置文件如下：

username=username
password=password
sex=sex
age=age
regist=regist
boy=boy
girl=girl
email=email
reset=reset
submit=submit

② i18n.jsp代码测试如下：

<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ 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>

	<%
		//从请求头中获取Local信息（语言类型）
		Locale locale = null;

		String country = request.getParameter("country");
		if ("cn".equals(country)){
			locale=Locale.CHINA;
		}else if ("usa".equals(country)){
			locale=Locale.US;
		}else {
			locale=request.getLocale();
		}

		System.out.println(locale);

		// 获取资源包，（根据指定的baseName和Locale读取语言信息）
		ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
	%>

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

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

i18n_fmt.jsp代码如下：

<%@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、使用标签输出国际化信息 ↓--%>
	<a href="i18n_fmt.jsp?locale=zh_CN">中文</a>|
	<a href="i18n_fmt.jsp?locale=en_US">english</a>
	<center>
		<h1><fmt:message key="regist"/></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>
</body>
</html>