JavaWeb_JSON篇

Posted 葡萄籽-June

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaWeb_JSON篇相关的知识,希望对你有一定的参考价值。

JSON篇

JSON学习内容时主要抱着以下疑问进行学习,以下面的内容作为学习思路与路线,从而更清楚的理解JSON。



提示:以下是本篇文章正文内容,下面案例可供参考

一、什么是JSON ?

JSON (javascript Object Notation) 是一种轻量级数据交换格式

特性
(1)它基于JavaScript Programming Language, Standard ECMA-262 3rd
Edition - December 1999 的一个子集。
(2)JSON 采用完全独立于语言的文本格式(可以应用于包括C, C++, C#, Java, JavaScript, Perl, Python 等)。
(3)易于人阅读和编写,同时也易于机器解析和生成。
这些特性使JSON 成为理想的数据交换语言。
【注】轻量级主要是与XML进行对比。

二、JSON 在JavaScript 中的使用?

2.1. JSON 对象定义和基本使用

在标准的json 格式中,json 对象由在括号括起来,对象中的属性也就是json 的key 是一个字符串,所以一定要使用双引号引起来。每组key 之间使用逗号进行分隔。

2.1.1 JSON 的定义

Json 定义格式
var 变量名= {
“keyNum” : value , // Number 类型
“keyStr” : “value” , // 字符串类型
“keyArr” : [] , // 数组类型
“keyJsonObj” : {}, // json 对象类型
“keyJsonArr” : [{},{}] // json 数组
};

2.1.2 JSON 对象的访问

json 对象(是一个对象)。它的的key 就是对象的属性。
若要访问一个对象的属性,只需要使用【对象名.属性名】的方式访问即可。

<script type="text/javascript">
// json 的定义
var jsons = {
"keyStr":"String", // 字符串类型
"keyNum":11, // Number
"keyArr":[11,"21341","53"], // 数组
"keyJson":{ // json 类型
"keyJson_1" : 12,
"keyJson_2" : "kkk"
},
"keyJsonArr":[{ // json 数组
"keyJsonArr_1_1" : 123,
"keyJsonArr_1_2" : "abc"
},{
"keyJsonArr_2_1" : 1234,
"keyJsonArr_2_2" : "str2_2"
}]
};


// 访问json 的属性
alert(jsons.keyStr); // "String"
// 访问json 的数组属性
alert(jsons.keyArr[1]); // "21341"
// 访问json 的json 属性
alert(jsons.keyJsonArr.keyJsonArr_1);//123
// 访问json 的json 数组
alert(jsons.keyJsonArr[0].keyJsonArr_1_2);//"abc"
</script>

2.2 JSON 中两个常用的方法

JSON 对象和字符串对象的相互转换

  • JSON.stringify( json ); ——此方法可以把一个json 对象转换成为json 字符串
  • JSON.parse( jsonString ); ——此方法可以把一个json 字符串转换成为json 对象
<script type="text/javascript">
// 一个json 对象
var obj = {
"a" : 12,
"c" : "str"
};
// 把json 对象转换成为字符串对象
var objStr = JSON.stringify(obj);
//
alert(objStr);
// 把json 对象的字符串,转换成为json 对象
var jsonObj = JSON.parse(objStr);
alert(jsonObj);
</script>

三、JSON在java 中的使用?

JSON 在 Java 中使用,我们需要使用到一个第三方的包——gson.jar

Gson 是Google 提供的用来在Java 对象和JSON 数据之间进行映射的Java 类库。
可以将一个JSON 字符串转成一个Java 对象,或者反过来。JSON 在java 中的操作。

常见的有三种情况。
1、java 对象和json 的转换
2、java 对象list 集合和json 的转换
3、map 对象和json的转换

3.1. javaBean 和 JSON 的相互转换

javaBean

public class GsonTest {
	static class Person {
		private int age;
		private String name;
	public Person() {
	// TODO Auto-generated constructor stub
	}
	public Person(int age, String name) {
		this.age = age;
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String toString() {
		return "Person [age=" + age + ", name=" + name + "]";
	}

	// 要把复杂的json 字符串转换成为java 对象。需要继承TypeToken 类。
	// 并把返回的类型当成TypeToken 的泛型注入
	static class PersonType extends TypeToken<List<Person>> {
	}

	public static void main(String[] args) {
		// json 操作,一定要先new 一个gson 对象。
		Gson gson = new Gson();
		// java 对象--json
		Person person = new Person(12, "wzg168");
		// 把对象转成为json 字符串
		String personjson = gson.toJson(person);
		System.out.println(personjson);
		// 把json 字符串转换成为java 对象
		Person p = gson.fromJson(personjson, Person.class);
		System.out.println(p);
		System.out.println("------------------------------------------");
		
		
	}
}

3.2. List 和 JSON 的相互转换


// 2、java 对象list 集合和json 的转换
		List<Person> list = new ArrayList<Person>();
		for (int i = 0; i < 3; i++) {
			list.add(new Person(10 * i, "name-" + i));
		}
		String jsonListString = gson.toJson(list);
		System.out.println(jsonListString);
		// 把json 数组转换成为List 对象
		// List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());
		// 我们也可以使用匿名内部类
		List<Person> ps = gson.fromJson(jsonListString, new TypeToken<List<Person>>() {}.getType());
		System.out.println(ps);
		System.out.println("------------------------------------------");

3.3. Map 和 JSON 的相互转换

// 3、map 对象和json 的转换
		Map<String, Person> mapPerson = new HashMap<String, GsonTest.Person>();
		// 添加person 到map 中
		mapPerson.put("p1", new Person(1, "person-1"));
		mapPerson.put("p2", new Person(2, "person-2"));
		// 把map 转换成为json 对象
		String jsonMapString = gson.toJson(mapPerson);
		System.out.println(jsonMapString);
		// 通过使用匿名内部类的方式
		Map<String, Person> map = gson.fromJson(jsonMapString,
		new TypeToken<HashMap<String, Person>>() {}.getType());
		System.out.println(map);

四、什么是Ajax 请求?

AJAX 即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器异步发起请求。局部更新页面的技术。

4.1 javaScript 原生Ajax请求

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

1)创建一个html 页面,发起请求。代码如下:

<!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">
	function ajaxRequest() {
		// 1、我们首先要创建XMLHttpRequest
		var xhr = new XMLHttpRequest();
		// 2、调用open 方法设置请求参数
		xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
		// 4、在send 方法前绑定onreadystatechange 事件,处理请求完成后的操作。
		xhr.onreadystatechange = function() {
			// 判断请求完成,并且成功
			if (xhr.readyState == 4 && xhr.status == 200) {
				document.getElementById("div01").innerHTML = xhr.responseText;
			}
		}
		// 3、调用send 方法发送请求
		xhr.send();
	}
</script>
</head>
<body>
	<button onclick="ajaxRequest()">ajax request</button>
	<div id="div01">
	</div>
</body>
</html>

2)创建一个AjaxServlet 程序接收请求

import com.google.gson.Gson;
public class AjaxServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;
	protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
	System.out.println("ajax 请求过来了a--" + request.getParameter("a"));
	Random random = new Random(System.currentTimeMillis());
	// 使用随机数,可以让客户端看到变化
	response.getWriter().write(
		new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
}

3)在web.xml 文件中的配置:

<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>

通过上面的代码我们发现。编写原生的JavaScript 我们自己要写很多的代码。而且还要考虑浏览器兼容问题。所以使用起来非常的不方便。
那我们怎么处理Ajax 请求呢?一般会使用JavaScript 的框架来解决这个问
题,比如说我们前面学到的Jquery 框架,它就有很好的Ajax 解决方案。

五、JQuery 的Ajax 请求

5.1 四个Ajax 请求方法

5.1.1 $.ajax 方法

$.ajax 请求参数:

url: 请求的地址
type : 请求的方式get 或post
data : 请求的参数string 或json
success : 成功的回调函数
dataType : 返回的数据类型常用json 或text

5.1.2 $.get 方法

下面的方法必须遵守参数的顺序。

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

5.1.3 $.post 方法

同$.get。

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

5.1.4 $.getJSON 方法

url : 待载入页面的URL 地址
data : 待发送Key/value 参数
callback : 载入成功时回调函数

5.2 一个表单序列化方法:serialize()

serialize() 方法可以把一个form 表单中所有的表单项,
都以字符串 name=value&name=value 的形式进行拼接,省去很多不必要的工作。

5.3 展示

由于 $ .get、$ .post 和 getJSON 这三个方法的底层都是直接或者间接地使用$ .ajax()方法来实现的异步请求的调用。所以我们以$ .ajax()方法的使用为示例进行展示:

1)Jquery_Ajax_request.html 的代码如下:

<!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>Demo</title>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			// ajax 请求
			$("#ajaxBtn").click(function(){
				$.ajax({
					url : "ajaxServlet", // 请求地址
					error:function(){ // 请求失败回调
						alert("请求失败");
					},
					success:function(data){ // 请求成功回调
						alert( data );
					},
					type:"POST", // 请求的方式
					dataType:"json", // 返回的数据类型为json 对象
					data:{ // 请求的参数
						action:"jqueryAjax",
						a:12,
						date: new Date()
					}
				});
			});
			// ajax--get 请求
			$("#getBtn").click(function(){
				$.get(
					"ajaxServlet",{
						action:"jqueryGet",
						a:12,
						date:new Date()
					},function(data){alert(data);},"json"
				);
			});
			// ajax--post 请求
			$("#postBtn").click(function(){
				// post 请求
				$.post(
					"ajaxServlet", // 请求路径
					{ // 请求参数
						action:"jqueryPost",
						a:12,
						date:new Date()
					},
					function(data){ alert( data ) }, // 成功的回调函数
					"text" // 返回的数据类型
				);
			});
			// ajax--getJson 请求
			$("#getJsonBtn").click(function(){
				// 调用
				$.getJSON(
					"ajaxServlet", // 请求路径
					{ // 请求参数
						action:"jqueryGetJSON",
						a:12,
						date:new Date()
					},
					function(data){ alert( data ) } // 成功的回调函数
				);
			});
			// ajax 请求
			$("#submit").click(function(){
				// 把参数序列化
				var data = $("#form01").serialize();
				alert(data);
			});
		});
</script>
</head>
<body>
	<div>
		<button id="ajaxBtn">$.ajax 请求</button>
		<button id="getBtn">$.get 请求</button>
	<button id="postBtn">$.post 请求</button>
	<button id="getJsonBtn">$.getJSON 请求</button>
	</div>
	<br配置 VScode 编辑器 (前端篇)

Python代码阅读(第19篇):合并多个字典

Python代码阅读(第26篇):将列表映射成字典

Python代码阅读(第41篇):矩阵转置

Python代码阅读(第40篇):通过两个列表生成字典

Python代码阅读(第25篇):将多行字符串拆分成列表