JavaWeb学习之JSON和AJAX

JSON和AJAX

JSON

• 什么是JSON
  JSON是一种轻量级的数据交换格式（JavaScript Object Notation），它便于人们的阅读和编写，也易于机器解析和生成。JSON完全独立于语言，很多语言都提供了对JSON的支持。
  JSON的轻量级是与xml格式的数据交换格式来比较的，这种数据交换指的是服务器与客户端之间业务数据的传递格式。

JSON在JavaScript（客户端）中的使用

• json的定义
  json是由键值对组成，由大括号包围，每个键由引号包围，键值之间用冒号分隔，键值对之间用逗号分隔。

//json中的value可以是基本数据类型，也可以是数组、对象，甚至是json对象或者json数组
var jsonObj = {
	"key1":12,
	"key2":"abcvc",
	"key3":[1,"a",true],
	"key4":{
		"key4_1":12
		"key4_2":"abcvc"
	},
	"key5":[{
		"key5_1":12,
		"key5_2":"abcvc"
	},
	{
		"key5_3":12,
		"key5_4":"abcvc"
	}]
}

• json的访问
  json本身就是一个对象，因此访问时可以直接使用json对象.key值的方式来对json中的数据进行访问。

alert(jsonObj.key1);
alert(jsonObj.key2);
alert(jsonObj.key3);
alert(jsonObj.key4[0]);

• json的两个常用方法
  json的存在有这两种形态：json对象和json字符串。当需要对json中的数据进行访问使用时，需要使用json对象；而当json在客户端和服务器之间进行数据传递时，则需要用到json字符串的形式。
  将json字符串转换为json对象可以使用方法：JSON.parse(json字符串)
  将json对象转换为json字符串可以使用方法：JSON.stringify(json对象)

JSON在java（服务器）中的使用

json在java中的使用需要用到第三方Gson包中的Gson类

• javaBean和json的相互转换

//已经定义好了一个一个命名Person的JavaBean类(id,name,age)
Person p = new Person(1,"小明",18);

Gson gson = new Gson();
//将JavaBean类转换为json字符串需要用到toJson方法
String jsonString = gson.toJson(p);
//将json字符串转换为JavaBean需要用到fromJson方法
Person person = gson.from(jsonStrting , Person.class);

• json字符串和List的互转
  当需要实现json字符串和复杂的java类之间的相互转换时，推荐使用TypeToken继承类，并将所需转换的类型添加到该类的泛型中。如需要转换为List<Person>，可以定义一个继承了TypeToken<List<Person>>的类，并调用getType()方法并将其作为参数放入fromJson()方法中

//定义了一个PersonList类继承TypeToken<List<Person>>类

List<Person> list = new ArrayList<>();
list.add(p);
list.add(p);
list.add(p);
//将List转换为Json字符串
String jsonString = gson.toJson(list);

//将json字符串转换为List
List<person> list = gson.fromJson(jsonString , new PersonList().getType);
//当然更推荐使用匿名内部类
List<Person> list2 = gson.fromJson(jsonString , new TypeToken<List<Person>>(){}.getType());

• json字符串和Map的相互转换
  和List的转换类似，都是要使用TypeToken来完成

Map<String , Person> map = new HahMap<>();
map.put(···)；
map.put(···)；
map.put(···)；

//把Map集合转换为json字符串
String mapString = gson.toJson(map);

//把json字符串转换为Map集合
Map<String , Person> map2 = gson.fromJson(mapString , new TypeToken<Map<String , Person>>(){}.getType());

AJAX

什么是AJAX请求

AJAX即Asychronous JavaScript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术——即AJAX是一种浏览器通过js 异步发起请求，并局部更新页面的技术。

• 原生Ajax请求

<script>
	function ajaxRequest(){
		//1.首先需要创建XMLHttpRequest对象
		var request = new XMLHttpRequest();
		//2.调用open方法将请求方式和请求地址传递进去
		request.open("GET","http://localhost:8080/book/servlet1?action=asas");
		//3.绑定onreadystatechange事件，是用于确定ajax请求和响应状态准备完毕
		request.onreadstatechange = function(){
			//只有当响应状态准备完毕后，才会获取响应信息
			if(request.readyState == 4 && request.status == 200){
				//	获取响应信息，并将其转换为json对象
				var jsonObj = JSON.parse(request.responseText);
			}
		}
		//4.调用send发送请求
		request.send();
	}
</script>

<button onclick="ajaxRequest()">ajax request</button>

• jQuery中的Ajax请求
  由于原生Ajax请求较为繁琐，我们使用jQuery中的Ajax请求方法来代替原生Ajax请求。jQuery中的ajax请求包含四个Ajax请求方法和一个表单序列化方法。

• $.ajax方法
  参数分别为

  • url：请求的地址
  • type：请求的方式
  • data：请求的参数（string或者json）
  • success：成功的回调函数
  • datatype：返回的数据类型（text或者json）

$.ajax({
	url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
	data:"action=jQueryAjax",
	type:"GET",
	success:function(data){
		//data表示响应返回的数据信息
		alert(data.id);
	}，
	//当datatype为json时，回调函数中的data参数为json对象，为text时则为字符串
	datatype:"json"
});

-$.get方法$.post方法
这两个方法的参数必须按照顺序输入：
- url：请求地址
- data：请求参数
- callback：请求成功回调函数
- type：返回的数据类型

//以get方法为例
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=1234",function(data){
	alert(data.id);
},"json");

• $.getJSON方法
  相比较上面的方法则更加的简洁：
  • url：请求地址
  • data：请求参数
  • callback：请求成功回调函数

$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=1234",function(data){
	alert(data.id);
});

• 表单序列化方法serialize()
  serialize()方法可以把表单中所有的表单项的内容都获取，并以name=value&name=value的方式拼接为字符串，我们以getJSON方法为例演示

$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		"action=1234&" + $("#form1").serialize(),
		function(data){
			alert(data.id);
});