AJAX与JSON

AJAX与JSON

1.1AJAX简介

AJAX是Asynchronous JavaScript And XML的简称，直译为异步的JS和XML。AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技术。

1.2同步与异步请求

1.2.1同步处理问题

请求：发送二次请求时，只能等上次请求响应后，才能执行。

效率：当我们需要刷新局部时，也必须刷新整个页面。

同步处理：AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是直观上来看他是卡主不动的。

问题：首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。

1.2.2异步处理问题

请求：aJax请求不会影响其他请求。

效率：局部刷新。

异步处理：异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。

使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

1.3标准的语法

 $.ajax({
     type:"请求方式",	//type请求方式分为：post和get
     url:"请求路径",
     data:"请求携带参数数据",
     dataType:"服务器预期返回值类型，如：'text','json','xml','html'",
     success:function(){
         //请求成功时，被回调
     },
     error:function(){
         //请求失败时，被回调
     }
 });
三种常用的简写语法
* $.get(url,[data],[success:fn],"dataType"); 
* $.post(url,[data],[success:fn],"dataType"); 
* $.getJSON(url,[data],[success:fn]); 

例如:下面是servlet中AjaxServlet代码：

public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doGet");
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		System.out.println("name:"+name);
		System.out.println("age:"+age);
		
		PrintWriter writer = response.getWriter();
		writer.write("{\"name\":\"zs\",\"age\":18}");
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doPost");
		String name = request.getParameter("name");
		String location = request.getParameter("location");
		System.out.println("name:"+name);
		System.out.println("location:"+location);
		
		//响应数据
		PrintWriter writer = response.getWriter();
		writer.write("aaa");
	}

}

1.3.2标准格式

下面是在ajax_demo中

$(function(){
		
		$("#btn").click(function(){ 	//btn是页面中的一个按钮
			
			$.ajax({	
			   type: "POST",
			   url: "AjaxServlet",//ajax_demo在WebContent路径下，所以url路径没有路径问题
			   data: "name=John&location=Boston",
			   success: function(rs){
			     alert( "Data Saved: " + rs );
			   }
			});
		});
	});

启动服务器时，运行结果：

控制台显示：
doPost
name:John
location:Boston
当点击按钮时，浏览器显示：Data Saved: aaa

1.3.3简化上述的代码

$(function(){
		$("#btn").click(function(){
            $.post("AjaxServlet","name=John&location=Boston",function(rs){
				     alert( "Data Saved: " + rs );
			 });
		});
	});

上述两种运行结果一样，因为都是访问post

1.3.4访问get

$(function(){
		$("#btn2").click(function(){
            $.ajax({
                type:"get",
                url:"AjaxServlet",
                data:{"name":"zs","age":18},		//json数据
                dataType:"json",
                success:function(rs){
                    alert("rs:"+rs.name);
                },
                error:function(){
                    alert("请求失败！");
                }
            });
		});
});

启动服务器时，运行结果：

doGet
name:zs
age:18
当点击按钮时，浏览器显示：rs:zs

1.3.4.1简化访问get代码

$(function(){
		$("#btn2").click(function(){
			$.get("AjaxServlet",{"name":"zs","age":18},function(rs){
					alert("rs:"+rs);
			},"json");
		});
});

启动服务器时，运行结果：

doGet
name:zs
age:18
当点击按钮时，浏览器显示：rs:[object Object]

1.3.4.2再次对get代码

$(function(){
		$("#btn2").click(function(){
			$.getJSON("AjaxServlet",{"name":"zs","age":18},function(rs){
				alert("rs:"+rs);
			});
		});
});

2.1JSON简介

JavaScript Object Notation(js 对象交换格式)，JSON对象本质上就是一个JS对象，但是这个对象比较特殊，它可以直接转换为字符串，在不同语言中进行传递，通过工具又可以转换为其他语言中的对象。

2.2语法

{key:value,key2:value2,key3:value3...} 

2.3Js中的json转换问题

将jsonStr -> jsonObj 
	* JSON.parse(jsonStr); 
将jsonObj -> jsonStr
	* JSON.stringify(jsonObj); 

2.4Java中json转换问题

将jsonStr -> javaObj
	 * fromJson(String str,Class clazz)
	 * fromJson(String str,Type type)
	 * gson.fromJson(jsonStr, new TypeToken<List<Student>>(){}.getType());
将javaObj -> jsonStr
	 * toJson()