AJAX和JSON详细解释，代码请看后续文章

今日内容

1. AJAX：异步交互技术，异步请求，局部刷新  浏览器端技术
2. JSON

AJAX：

1. 概念： ASynchronous JavaScript And XML	异步的JavaScript 和 XML
	1. 异步和同步：客户端和服务器端相互通信的基础上---通信的基础上进行实现
	
		* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。同步
		* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。异步

		Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 
		通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
		传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

		提升用户的体验

	AJAX基于JavaScript和Http请求进行开发的一种新的网页技术，本身并不是一种新的编程语言
	AJAX本身的存在需要学习 HTML/XHTML两种标记语言，JSCript，HTML,CSS基于技术的开发
	XHTML标签：应用于更加严格的HTML技术，也就是另一个严格标准的HTML文档，不允许对应的标签乱写

	1.利用 AJAX，您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。
	2. 通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，浏览器不会注意到脚本在后台请求过页面，或向服务器发送过数据，通过HTTP协议进行异步发送的请求信息，基于XMLHttpRequest对象的请求，请求中包含对应的参数信息。存在于tomcat中存在

	3.AJAX请求的发送需要满足以下四个方面的内容：
		* 关键对象：XMLHttpRequest对象---->通过该对象进行发送异步请求
			不同的浏览器创建该对象的方式是不一样的，有相关的差异，一般就是直接使用该对象或者使用别的对象

		该对象对应的属性：
		* onreadystatechange()函数：处理服务器响应的函数
			readyState属性：存储对应的服务器响应的状态信息每当 readyState 改变时，onreadystatechange 函数就会被执行。
			readyState属性状态码：
				0 请求未初始化（在调用 open() 之前） 
				1 请求已提出（调用 send() 之前） 
				2 请求已发送（这里通常可以从响应得到内容头部） 
				3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 
				4 请求已完成（可以访问服务器响应并使用它） 
			一般进行判断对应的readyState属性状态完成后进行的操作
			responseText 属性：
				用户获取服务器返回的的数据，服务器返回的数据，存储在该缓冲区中
				上述的函数执行完后，直接进行对应的发送操作，发送对应的请求参数和其他打开的地址
		* AJAX发送请求：
			涉及函数：open("提交方式"，"提交地址"，Boolean是否开启异步请求)
					Send(发送的请求参数)


		普及基本多有的浏览器支持的异步请求机制的XMLHttpRequest请求的获取获取
		function(){
			var xmlHttp;
			try{
				// Firefox, Opera 8.0+, Safari --->高级浏览器
				xmlHttp=new XMLsHttpRequest();
			}catch(e){
				try{
				//Internet Explore浏览器
				xmlHtpp=new ActiveXObject("Msxml2.XMLHTTP");
				}catch(e){
					//浏览器的版本太老了
					 alert("您的浏览器不支持AJAX！");
    				 return false;
				}
			}
			//至此对象已经被创建出来
			xmlHttp.onreadystatechange=function(){
				//判断是否是已经响应完成的状态
				if(xmlHttp.readyState==4){
					//获取对应的元素对象，进行元素对象的写入操作，一般确立区域进行响应
					document.getXXXsd=responseText;//获取响应的参数
				}
			}
			//请求已经确定和接收响应的参数的时候，开始向后台进行发送
			xmlHttp.open("get/post","url",true);
			xmlHttp.send("参数内容")；如果是get请求，发送的参数在请求行中，所以为null
		}

		JQuery中的AJAX异步请求，使用框架进行书写：  
		参数都是可选的，不是必须的 键值对存储方式
		$.ajax({
			  type: "GET",
			  url: "test.js",
			  dataType: "script"
			});

		$.ajax({
			   type: "POST",
			   url: "some.php",
			   data: "name=John&location=Boston",//还有json的方式进行实现
			   success: function(msg){---->变量接收服务器响应的数据
			     alert( "Data Saved: " + msg );
			   }
			});


		$.ajax()底层返回其创建的XMLHttpRequest对象
			ajax的参数都是可选的
			如果需要处理ajax函数得到的数据，则需要使用回调函数beforeSend、error、dataFilter、	success、complete。
			其中success是当请求之后调用，传入返回后的数据，以及包含成功代码的字符串

		$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。
			依赖服务器提供的信息，来进行处理返回的数据，必须确保对应的返回类型和mime类型是一致
		ajax中的数据类型：dataType
			dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。
			我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。



2. 实现方式：
	1. 原生的JS实现方式（了解）
				 //1.创建核心对象
	            var xmlhttp;
	            if (window.XMLHttpRequest)
	            {// code for IE7+, Firefox, Chrome, Opera, Safari
	                xmlhttp=new XMLHttpRequest();
	            }
	            else
	            {// code for IE6, IE5
	                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	            }
	
	            //2. 建立连接
	            /*
	                参数：
	                    1. 请求方式：GET、POST
	                        * get方式，请求参数在URL后边拼接。send方法为空参
	                        * post方式，请求参数在send方法中定义
	                    2. 请求的URL：
	                    3. 同步或异步请求：true（异步）或 false（同步）
	
	             */
	            xmlhttp.open("GET","ajaxServlet?username=tom",true);
	
	            //3.发送请求
	            xmlhttp.send();
	
	            //4.接受并处理来自服务器的响应结果
	            //获取方式 ：xmlhttp.responseText
	            //什么时候获取？当服务器响应成功后再获取
	
	            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
	            xmlhttp.onreadystatechange=function()
	            {
	                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
	                if (xmlhttp.readyState==4 && xmlhttp.status==200)
	                {
	                   //获取服务器的响应结果
	                    var responseText = xmlhttp.responseText;
	                    alert(responseText);
	                }
	            }
	2. JQeury实现方式
		1. $.ajax()   使用的是JSON形式进行发送数据的
			* 语法：$.ajax({键值对});
			 //使用$.ajax()发送异步请求
	            $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误，会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });
		2. $.get()：发送get请求
			* 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

		3. $.post()：发送post请求
			* 语法：$.post(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

JSON：

1. 概念： JavaScript Object Notation		JavaScript对象表示法，js中比较特殊的对象，存在于js中
	el表达式使用的是JSON形式获取对应的值的问题，JSON中使用的是键值对的形式进行存储对象的形式
	Person p = new Person();
	p.setName("张三");
	p.setAge(23);
	p.setGender("男");

	//转换成java对象的时候，读取JSON格式的数据，对于数据转换成对应的数据回格式，封装到对应的类中去
	var p = {"name":"张三","age":23,"gender":"男"};

	* json现在多用于存储和交换文本信息的语法  
	* 进行数据的传输
	* JSON 比 XML 更小、更快，更易解析，本质是一段字符串

2. 语法：  json存储数据的语法
	1. 基本规则
		* 数据在名称/值对中：json数据是由键值对构成的
			* 键用引号(单双都行)引起来，也可以不使用引号
			* 值得取值类型：
				1. 数字（整数或浮点数）
				2. 字符串（在双引号中）
				3. 逻辑值（true 或 false）
				4. 数组（在方括号中）	{"persons":[{},{}]}
				5. 对象（在花括号中） {"address":{"province"："陕西"....}}
				6. null
		* 数据由逗号分隔：多个键值对由逗号分隔
		* 花括号保存对象：使用{}定义json 格式   JSON中数据的格式都是保存在{键值对数据}之间，键只有一个，值可以存在多个。
		* 方括号保存数组：[]
	2. 获取数据:
		1. json对象.键名
		2. json对象["键名"]
		3. 数组对象[索引]
		4. 遍历
				 //1.定义基本格式  存储对象
		        var person = {"name": "张三", age: 23, 'gender': true};
				//存储数组
		        var ps = [{"name": "张三", "age": 23, "gender": true},
		            {"name": "李四", "age": 24, "gender": true},
		            {"name": "王五", "age": 25, "gender": false}];
		
		
		
		
		        //获取person对象中所有的键和值
		        //for in 循环   
		       /* for(var key in person){
		       //js的遍历方式中。for in循环实现的是对所有参数的获取都是字符串的形式
		            //这样的方式获取不行。因为相当于  person."name"
		            //alert(key + ":" + person.key);
		            alert(key+":"+person[key]);
		        }*/
		
		       //获取ps中的所有值--->获取的是数组对象中的每个元素的属性
		        for (var i = 0; i < ps.length; i++) {
		            var p = ps[i];//此时的标识的是数组，对数组进行遍历
		            for(var key in p){
		                alert(key+":"+p[key]);
		            }
		        }


3. JSON数据和Java对象的相互转换

	* JSON解析器：
		* 常见的解析器：Jsonlib，Gson，fastjson（阿里巴巴提供的解析器），jackson（spring内置的解析器）
	
	1. JSON转为Java对象
		1. 导入jackson的相关jar包
		2. 创建Jackson核心对象 ObjectMapper
		3. 调用ObjectMapper的相关方法进行转换
			1. readValue(json字符串数据,Class)
	2. Java对象转换JSON
		1. 使用步骤：
			1. 导入jackson的相关jar包
			2. 创建Jackson核心对象 ObjectMapper
			3. 调用ObjectMapper的相关方法进行转换
				1. 转换方法：
					* writeValue(参数1，obj):
	                    参数1：
	                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
	                        Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
	                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
	                * writeValueAsString(obj):将对象转为json字符串

				2. 注解：
					1. @JsonIgnore：排除属性。
					2. @JsonFormat：属性值得格式化
						* @JsonFormat(pattern = "yyyy-MM-dd")

				3. 复杂java对象转换
					1. List：数组
					2. Map：对象格式一致