Spring复习前篇--Ajax和JSON

JSON

什么是JSON

• JSON（JavaScript Object Notation，js对象表示法）是一种轻量级的数据交换格式（和xml相比很轻量），易于人阅读和编写，同时也易于机器解析和生成。

JSON的数据交换格式

• ｛key:value,key:value｝
• 其中value可以有很多种

1. 基本数据类型（字符串、数字、布尔值）
2. 数组
   例如：｛lastName:“李四”,books:[“西游记”,{},18]｝
3. 对象
   var student = {lastName:“张三”,age:18}

JSON一定要掌握的两种方法

1. JSON（js内置对象），将js对象转换为json（js对象字符串表示法）字符串

/**
*json的要求和js对象是一样的，不过key必须是字符串
*js对象在声明的时候key是否加双引号是可以选择的
*/
var student = {
	"lastName":"张三",
	"age":18
};
var strJSON = JSON.stringify(student);
alert(typeof strJSON

2. 将字符串（满足js对象表示法（json）格式）转为js对象

/**
* 加入服务器给我们一个字符串jsonStr
*/
var student = JSON.parse(jsonStr)
alert(student.lastName);

什么是Ajax？

• Ajax即“Asynchronous JavaScript And XML”（异步JavaScript和XMl），是指一种创建交互式网页应用的开发技术。（页面不刷新就可以收到服务器响应的数据）

什么是异步？

• 异步：不会阻塞浏览器
• 同步：会阻塞浏览器；因为需要等到服务器整个处理完请求，完成响应以后才能做其他事情

现在页面的交互过程

• 现在的交互（XMLHttpRequest对象）

1. XMLHttpRequest对象帮我们发送请求
2. 服务器收到请求，调用对应的servlet进行请求；servlet处理完成会有响应信息生成
3. XMLHttpRequest对象收数据（浏览器就感受不到这个数据了；xhr对象收到这个数据）

• 原来的交互方式

1. 发送请求
2. 服务器收到请求，调用对应的servlet进行请求；servlet处理完成会有响应信息生成
3. 浏览器收到了服务器响应的数据，把之前的页面清除，展示新的数据

Ajax的三个方法

Ajax 参考手册

• $.get

/**
*第一个参数url,请求地址
*第二个参数data，请求发送数据，可以写key=value&key=value，也可以写js对象
*第三个参数callback,响应成功以后的回调函数
*第四个参数type：指定返回的数据类型，jquery可以帮我们自动转为指定的类型
* js中可以使用"el表达式"来取出el表达式的值
*/
$.get("${ctp}/getstuinfo",{lastName:"lisi",age:18});

• $.post

/**
*post和get的用法是一样的，只是一个发的是post请求，一个发的是get请求
*第一个参数url,请求地址
*第二个参数data，请求发送数据，可以写key=value&key=value，也可以写js对象
*第三个参数callback,响应成功以后的回调函数
*第四个参数type：指定返回的数据类型，jquery可以帮我们自动转为指定的类型
* js中可以使用"el表达式"来取出el表达式的值
*/
$.post("${ctp}/getstuinfo","lastName=admin&age=18",
	function(data,status){
		$('#div1').html(data);
	},"json");
	

• $.ajax()

$('#button').click(function(){
	$.ajax({
		url:"${ctp}/getstuinfo",//规定请求地址
		type:"get",//请求方式
		data:{"lastName":"admin",age:22}//发送的数据
		async:true,//调整异步（true），同步(false)
		success:function(data){//请求成功
			$("div:eq(2)").html(data);
		},
		error:function(a,b){//请求失败
			alert("请求失败了！"+b+"状态码："+a.status);
		},
		dataType:"json"//数据类型
	})
}