12、JSON、AJAX、i18n

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

<script type="text/javascript">
	// json的定义
	var jsonObj = {
		"key1":12,
		"key2":"abc",
		"key3":true,
		"key4":[11,"arr",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":6621,
			"key6_2_2":"key6_2_2_value"
		}],
	}
</script>

1.1.2 json的访问

json 本身是一个对象。

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

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

json 对象.key

json访问示例：

<script type="text/javascript">
		alert(typeof(jsonObj));//object json就是一个对象
		alert(jsonObj.key1);//12
		alert(jsonObj.key2);//abc
		alert(jsonObj.key3);//true
		alert(jsonObj.key4);//11,arr,false   得到数组
		// json中数组的遍历
		for(var i = 0;i<jsonObj.key4.length;i++){
			alert(jsonObj.key4[i]);
		}
		alert(jsonObj.key5);//[object Object]
		alert(jsonObj.key5.key5_2);//key5_2_value
		//取出每一个元素都是json对象
		var jsonItem = jsonObj.key6[0];
		alert(jsonItem.key6_1_2);//key6_1_2_value
</script>

1.1.3 json的两个常用方法

json 的存在有两种形式

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

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

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

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

<script type="text/javascript">
	//把json对象转换成为json字符串，类似于java中对象的toString
	var jsonObjString = JSON.stringify(jsonObj);//{"key1":12,"key2":true,"key3":"abc","key4":[11,"arr",false]}
	alert(jsonObjString);

	//把json字符串，转换成为json对象
	var jsonObj2 = JSON.parse(jsonObjString);
	alert(jsonObj2);//[object Object]
</script>

1.2 JSON在java中的使用

以使用Gson JAR包进行转换

GSON是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库。可以将一个Json字符转成一个Java对象，或者将一个Java转化为Json字符串

两个方法：

• public String toJson(Objcet obj)方法，可以将对象转化为json字符串
• public T fromJson(String jsonStr,T.class)方法，可以将json字符串转化为Java对象

首先需要导入gson-2.2.4.jar包

1.2.1 javaBean和json的互转

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

1.2.2 List和json的互转

TypeToken介绍：

TypeToken，它是json提供的数据类型转换器，可以支持各种数据集合类型转换。
先调用TypeToken的构造器得到匿名内部类，再由该匿名内部类对象调用getType()方法得到要转换成的type

方法一：

class PersonListType extends TypeToken<ArrayList<Person>>{

}
public class JsonTest {
    //2.List和json的互转
    @Test
    public void test2(){
        List<Person> personList = new ArrayList<>();
        personList.add(new Person(1,"国哥"));
        personList.add(new Person(2,"康师傅"));
        Gson gson = new Gson();
        
        //把List转换为json字符串
        String personListJsonString = gson.toJson(personList);
        System.out.println(personListJsonString);//[{"id":1,"name":"国哥"},{"id":2,"name":"康师傅"}]
        //将json字符串转换为List
        List<Person> list= gson.fromJson(personListJsonString, new PersonListType().getType());
        System.out.println(list);
    }
}

方法二：（匿名内部类）

//2.List和json的互转
@Test
public void test2(){
    List<Person> personList = new ArrayList<>();
    personList.add(new Person(1,"国哥"));
    personList.add(new Person(2,"康师傅"));

    Gson gson = new Gson();

    //把List转换为json字符串
    String personListJsonString = gson.toJson(personList);
    System.out.println(personListJsonString);
    //将json字符串转换为List
    List<Person> list= gson.fromJson(personListJsonString, new TypeToken<ArrayList<Person>>(){}.getType());//使用匿名内部类
    System.out.println(list);
}

1.2.3 map和json的互转

//3.map和json的互转
@Test
public void test3(){
    Map<Integer,Person> personMap = new HashMap<>();
    personMap.put(1,new Person(1,"国哥好帅"));
    personMap.put(2,new Person(1,"康师傅也好帅"));

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

    //将json字符串转换为map集合
    Map<Integer,Person> personMap2= gson.fromJson(personMapJsonString, new TypeToken<Map<Integer, Person>>(){}.getType());
    System.out.println(personMap2);
}

二、AJAX请求

2.1 AJAX 简介

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

同步和异步处理的问题：

• 同步处理：

    请求：发送二次请求时，只能等上次请求响应后，才能执行
    效率：就算我们需要刷新局部，也必须刷新整个页面
  

• 异步处理：

    请求：aJax请求不会影响其他请求
    效率：局部刷新
  

2.2 javaScript 原生 Ajax 请求

2.2.1 原生的 Ajax 请求使用步骤

1、我们首先要创建 XMLHttpRequest 对象
2、调用 open 方法设置请求参数
3、调用 send 方法发送请求
4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。

代码示例：

<!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/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
// 				3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlHttpRequest.onreadystatechange = function(){
					//当 readyState 等于 4 且状态为 200 时，表示响应已就绪
					if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
						alert(xmlHttpRequest.responseText);
						var jsonObj = JSON.parse(xmlHttpRequest.responseText);
						//把响应的数据显示在页面上
						document.getElementById("div01").innerHTML = "编号："+jsonObj.id+",姓名："+jsonObj.name;
					}
				}
// 				4、调用send方法发送请求
				xmlHttpRequest.send();
			}
		</script>
	</head>
	<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
	</body>
</html>

创建一个 AjaxServlet 程序接收请求：

public class AjaxServlet extends BaseServlet {
    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html; charset=UTF-8");
        System.out.println("Ajax请求过来了");
        Person person = new Person(1,"国哥");

        //json格式字符串
        Gson gson = new Gson();
        String personJson = gson.toJson(person);
        resp.getWriter().write(personJson);
    }
}

2.2.2 XMLHttpRequest介绍

XMLHttpRequest的介绍：

• XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。
• XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。
• 获取XMLHttpRequest对象：
  var xmlHttpRequest= new XMLHttpRequest(); //目前主流浏览器都支持
  注意：XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

XMLHttpRequest对象的方法：

方法	描述
open(method,url,async)	规定请求的类型、URL以及是否异步处理请求 - method：请求的类型：get或post - url：文件在服务器上的位置 - async：true（异步）或false（同步）
send(string)	将请求发送到服务器 - string：仅用于post请求

XMLHttpRequest对象的属性：

2.3 jQuery中的AJAX请求

2.3.1 $.ajax()方式

$.ajax({
	type:"请求方式",
	url:"请求路径",
	data:"请求携带参数数据",
	/*格式有两种：
		一：name=value&name=value
		二：{key:value}*/
	dataType:"服务器预期返回值类型，如：'text','json','xml','html'",
	/*常用的数据类型有：
		text 	表示纯文本
		xml 	表示xml数据
		json 	表示json对象*/
	success:function(){
		//请求成功时，被回调
	},
	error:function(){
		//请求失败时，被回调
	}
});

// ajax请求
$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		data:"action=jQueryAjax",//写成{action:"jQueryAjax"}也可
		type:"GET",
		success:function(data){
			$("#msg").html("编号："+data.id+",姓名："+data.name);
		},
		dataType:"json"
	});
});

$.ajax()也可以发送异步请求，只需要把async参数设置为false 即可，默认是true。

<script type="text/javascript">
	function asynfalse(){
		$.ajax({
			type:"post",
			url:"http://localhost:8090/t1",
			async:false, //表示为异步请求
			success:function(data){
				consle.log(data);
			}
		});
	}
</script>

2.3.2 $.get()和 $.post()方式

$.get(url, [data], [callback], [type])

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

// 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");
});

$.post(url, [data], [callback], [type])

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

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

2.3.3 $.getJSON()方式

$.getJSON(url, [data], [callback])

url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数

通过 HTTP GET 请求载入 JSON 数据（get请求，返回类型为json类型）

代码示例：

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

2.3.4 表单序列化 serialize()

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

// ajax请求
$("#submit").click(function(){
	// 把参数序列化
	var formData = $("#form01").serialize();
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&"+formData,function(data){
		console.log(data);
		$("#msg").html("Serialize 姓名："+data.username+",密码："+data.password);
	})
});

servlet代码：

protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("jQuerySerialize == 方法调用了");
    String username = req.getParameter("username");
    String password = req.getParameter("password");
    Map<String,String> form = new HashMap<String,String>();

    form.put("username",username);
    form.put("password",password);
    Gson gson = new Gson();
    String formJsonString = gson.toJson(form);
    System.out.println(formJsonString);
    resp.getWriter().write(formJsonString);
}

好的博客：
AJAX总结
javaweb学习总结(三十一)——国际化(i18n)