JSON、AJAX、i18n

JSON、AJAX、i18n

一、什么是 JSON?

json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。

1、JSON 在 JavaScript 中的使用

json 的定义
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" 
			 }] 
};

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

alert(typeof(jsonObj));
alert(jsonObj.key1);
alert(jsonObj.key2);
alert(jsonObj.key3);
alert(jsonObj.key4);
alert(jsonObj.key5.key5_1);
alert( jsonObj.key6 );
var jsonItem = jsonObj.key6[0];
alert( jsonItem.key6_1_1 );

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

var jsonObjString = JSON.stringify(jsonObj);
alert(jsonObjString);
var jsonObj2 = JSON.parse(jsonObjString); 
alert(jsonObj2.key1);

2、JSON 在 java 中的使用

javaBean 和 json 的相互转换
Gson.toJson() 方法可以把 java 对象转换成为 json 字符串
Gson.fromJson() 方法可以把 json 字符串转换回 Java 对象，第一个参数是 json 字符串，第二个参数是转换回去的 Java 对象类型

@Test 
public void test1(){ 
	Person person = new Person(1,"张三!"); 
	Gson gson = new Gson(); 
	String personJsonString = gson.toJson(person); 	
	System.out.println(personJsonString); 
	Person person1 = gson.fromJson(personJsonString, Person.class); 
	System.out.println(person1); 
}

List 和 json 的相互转换
Gson.toJson() 方法可以把 List 转换为 json 字符串
Gson.fromJson() 方法可以把 json 字符串转换回 List ，第一个参数是 json 字符串，第二个参数是转换回去的 List 类型

@Test 
public void test2() { 
	List<Person> personList = new ArrayList<>(); 
	personList.add(new Person(1, "张三")); 
	personList.add(new Person(2, "李四")); 
	Gson gson = new Gson(); 
	String personListJsonString = gson.toJson(personList); 
	System.out.println(personListJsonString);
	List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType()); 
	System.out.println(list); 
	Person person = list.get(0); 
	System.out.println(person); 
}

map 和 json 的相互转换
Gson.toJson() 方法可以把 map 集合转换为 json 字符串
Gson.fromJson() 方法可以把 json 字符串转换回 map 集合，第一个参数是 json 字符串，第二个参数是转换回去的 map 集合类型

@Test 
public void test3(){ 
	Map<Integer, Person> personMap = new HashMap<>(); 
	personMap.put(1, new Person(1, "张三")); 
	personMap.put(2, new Person(2, "李四")); 
	Gson gson = new Gson(); 
	String personMapJsonString = gson.toJson(personMap); 
	System.out.println(personMapJsonString);
	Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType()); 
	System.out.println(personMap2); 
	Person p = personMap2.get(1); 
	System.out.println(p); 
}

二、AJAX 请求

1、什么是 AJAX 请求

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

2、原生 AJAX 请求的示例

3、jQuery 中的 AJAX 请求

$.ajax 方法
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种：
一：name=value&name=value
二：{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型
常用的数据类型有：
text 表示纯文本，
xml 表示 xml 数据
json 表示 json 对象

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

$.get 方法和 $.post 方法
url 请求的 url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型

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

$.getJSON 方法
url 请求的 url 地址
data 发送给服务器的数据
callback 成功的回调函数

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

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

$("#submit").click(function(){ 
	// 把参数序列化 
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) { 
		$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name); 
	}); 
});

三、i18n 国际化