JAVAWEB——原生ajax和JSON的使用及练习，JSON插件的使用

一、AJAX

1. 什么是同步，什么是异步

• 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端处于等待状态。
• 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以做其他的事情。无非一直等待整个页面刷新完毕。

2.全局刷新和局部刷新

• 全局刷新：整个浏览器被新的数据覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。
• 局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容。
  其余的页面无需加载和渲染。网络中数据传输量少，给用户的体验感好。

3. Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

ajax是用来做局部刷新的，局部刷新使用的核心对象是异步对象（XMLHttpRequest）
这个异步对象是存在浏览器内存中，使用JavaScript语法创建和使用XMLHttpRequestt对象。

4.原生Ajax的运行步骤

1）创建异步对象

var xmlHttp = new XMLHttpRequest();

2）给异步对象绑定事件 onreadystatechange

当异步对象发起请求，获取了数据都会出发这个事件。onreadystatechange，这个事件需要指定一个函数，在函数中处理状态的变化。

例如：我们定义一个按钮，那么我们绑定点击事件之后，事件之内也应该书写一个函数来处理数据变化。

btn.onclick fun1(){
		function fun1(){
			alert("按钮点击事件");
		}
	}

一般地，我们会配合异步对象，也就是第一步中写的var xmlHttp = new XMLHttpRequest()中的xmlHttp对象的状态变化，来响应事件

xmlHttp.onreadystatechange = function(){
		//处理请求的状态变化	
		if(xmlHttp.readyStata ==4 && xmlHttp.status == 200){
			//可以处理服务器端的数据，更新当前页面
			var data =xmlHttp.responseText;
			document.getElementById("name").value="data";
		}
	}

异步对象的属性 readyStata 表示异步对象请求的状态变化

• 0：创建对象时，new XMLHttpRequest();
• 1: 初始异步请求对象，xmlHttp.open();
• 2: 发送请求，xmlHttp.send();
• 3: 从服务器端获取了数据，此时3。注意3是异步对象内部使用，表示获取了原始的数据（开发不用）
• 4：异步对象把接受的数据处理完成后，此时开发人员在4的时候处理数据
  在4的时候，开发人员做什么？更新当前页面，在页面中展示数据。

异步对象的status属性，表示网络请求的状况的：

• 200：需要时当status==200时，表示网络请求是成功的。
• 404：请求失败。

3）初始异步请求对象

异步的方法open().

xmlHttp.open(请求方式get|post,"服务器端的访问地址"，同步|异步请求(默认为true表异步))

例如：

xmlHttp.open("get","loginServlet?name =zhangsan&password=123",true);

4）使用异步对象发送请求

xmlHttp.send()

获取服务器端返回的数据，使用异步对象的属性 responseText
使用例子：xmlHttp.responseText

二、Json数据格式（重要）

1. json作用及好处：

• 使用ajax进行前后台数据交换
• 移动端与服务端的数据交换

2. Json的格式和解析

Json有两种格式：

• 对象格式：{"key1":obj,"key2":obj,"key3":obj...}
• 数组/集合格式：[obj,obj,obj...]

例如：user对象用json数据格式表示

{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

例如：List 用json数据格式表示

[{"pid":"10","pname":"小米4C"},{},{}]

注意：对象格式和数组格式可以互相嵌套

注意：json的key是字符串 json的value是Object

json的解析：json是js的原生内容，也就意味着js可以直接取出json对象中的数据

案例：

在js中，可以把json格式的字符串，转换为json对象，json中的key，就是json对象的属性名
	//eval是执行括号中的代码，把json字符串转换为json对象
	var jsonObj =eval("("+data=")");
	doucument.getElementById("name").value=jsonObj.name;
	doucument.getElementById("age").value=jsonObj.age;

三、JSON练习

练习一：对象创建方式

<script language="JavaScript">
	/**
	 *  {key:value,key:value}
	 *  
	 * class Person{
	 * 	  String firstname = "张";
	 *    String lastname = "三";
	 *    Integer age = 100;
	 * }
	 */
	 //对象创建方式
	var Person={
		 "firstname":"张",
		 "lastname":"三丰",
		 "age":100		 
	 }
	 //取firstname
	 alert(Person.firstname);
	 //取lastname
	 alert(Person.lastname);
	 //取age
	 alert(Person.age);
  </script>

练习二：数组创建方式

<script language="JavaScript">
	 //数组创建方式
	 var Persons=[
		 { "firstname":"张", "lastname":"三", "age":100},
		 {"firstname":"李", "lastname":"四", "age":25},
	 ];
	 //取出firstname=李
	 alert(Persons[1].firstname);
	 //取出100
	 alert(Person[0].age)
  </script>

练习三：对象+数组创建方式

<script language="JavaScript">
	 //对象+数组方式
	var json={
			 "student":[
				 {"name":"zhangsan","age":18,addr="安徽"},
				 {"name":"lisi","age":20,addr="北京"},
				 {"name":"wangwu","age"21,addr="上海"}	
			 ]
			 };
	//取出lisi的名字
	alert(json.student[1].name);
	//取出王五的年龄
	alert(json.student[2].age);
  </script>

练习四：对象+多个数组创建方式

 <script language="JavaScript">
	 //对象+多个数组实现方式
	 var json={
			 "student":[
				 {"name":"zhangsan","age":18,addr="安徽"},
				 {"name":"lisi","age":20,addr="北京"},
				 {"name":"wangwu","age"21,addr="上海"}	
			 ]
			 },"teacher":[
				 {"name":"sjf","age":28,addr="安徽"},
				 {"name":"yjw","age":30,addr="北京"},
				 {"name":"jj","age"26,addr="上海"}	
			 ]
			 };
	 
		alert(json.teacher[0].name);
		alert(json.teacher[1].age);
  </script>

练习五：对象+数组混搭模式

<script language="JavaScript">
 	/**
	 *   "param1":"value1",
	 *   "param2":{},
	 *"param3":[{key:value,key:value},{key:value,key:value}]
	 * }
	 */
	 var json={
		"key1":"value1",
		"key2":{"firstname":"张","lastname":"三","age":100"},
		"key3":[
			{"name":"sjf","age":28,addr="安徽"},
			{"name":"yjw","age":30,addr="北京"},
			{"name":"jj","age"26,addr="上海"}		
		] 
	 };
	  
	 alert(json.key2.lastname);
	 alert(json.key3.);
  </script>

五、JSON插件

=插件的作用：
将java的对象或集合转成json形式字符串

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种（也就是jar包）：

• gson（google出品）
• fastjson（阿里巴巴出品）速度快，不是最符合json处理规范
• jackson性能好，规范好
• json-lib

在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名

以jackson为例

例如：

Person p = new Person();
ObjectMapper om = new ObjectMapper()
//writeValueAsString：把参数的java对象转为json格式的字符串
String json = om.writeValueAsString("对象名");
System.out.print("转换的json=="+json)