Spring学习笔记：json&Ajax

1. js 对象

var student = {lastName:"张三",age:18};

var student = {lastName："张三"，age：18，car：{pp：“宝马”，price：“30000$”}，infos：[{bookName：“西游记”，price：98.98}，18，true]}；

//一个复杂的js对象

var student = {

	lastName : "张三",

	age : 18,

	car : {

		pp : "宝马",

		price : "30000$"

	},

	infos : [ {

		bookName : "西游记",

		price : 98.98

	}, 18, true ]

};

//js对象；属性操作特别方便

alert(student.car.pp);//宝马

alert(student.infos[2]);//true

2.JSON (JavaScript Object Notation) :

（js对象表示法）：是一种轻量级（和xml相比很轻量）的数据交换格式；

表示格式：{key:value, key:value}；

value 可以是多种数据类型：

1）基本的类型（字符串、数字、布尔值）

2）数组

{lastName:"李四", books:["西游记",{}, 18]}

3）对象{}；

如果服务器返回给浏览器的数据是js对象这种样子的，浏览器使用js解析就会很方便；

JSON：js对象进行传输（HTTP（只能传输文本））；

//json的要求是和js对象是一样的，只不过 key 必须是字符串

//js对象在声明的时候 key 是否加双引号是可以选择；

var student2 = {

	"lastName" : "张三",

	"age" : 18

};

alert(student2);

JSON应该是利于传输的字符串；

//JSON(js内置的对象)；将js对象转为 json（应该是js对象字符串表示法）字符串

var strJSon = JSON.stringify(student2);

alert(typeof strJSon);      //string

3. Ajax（Asynchronous Javascript And XML”）

（异步JavaScript和XML）

AJAX：是一种无刷新页面与服务器的交互技术；（页面不刷新就可以收到服务器响应的数据）；

原来的交互：

1）浏览器发送请求

2）服务器收到请求，调用对应的servlet进行处理；servlet处理完成会有响应信息生成；

3）浏览器收到了服务器响应的数据，把之前的页面清除，展示新的数据；（效果就是页面刷新）；

现在的交互：（XmlHttpRequest对象）

1）XMLHttpRequest对象帮我们发送请求

2）服务器收到请求，调用对应的servlet进行处理；servlet处理完成会有响应信息生成；

3）XMLHttpRequest对象收数据（浏览器就感受不到这个数据了；xhr对象收到这个数据）；

4. jquery-AJAX

所有现代浏览器均支持 XMLHttpRequest 对象

xhr原生编程：

var xhr=new XMLHttpRequest();//创建xhr对象；

xhr.open("GET","login",true);//建立连接；

xhr.send();//通过地道传输数据；

//监听xhr的状态

xhr.onreadystatechange=function()

{
	if (xhr.readyState==4 && xhr.status==200)
    {
    	document.getElementById("myDiv").innerHTML=xhr.responseText;//拿到返回的内容；字符串	
    }
 }

传统的交互非常麻烦；

解决办法：使用jquery包装后的ajax请求；服务器使用gson工具生成json字符串给浏览器

改变了传统的交互方式；

1、发请求；

2、服务器收到请求，处理请求经常要给页面携带数据。request.setAttribute(“map”,map);转发到页面

3、浏览器收到页面数据，在页面使用el表达式获取数据；

传统的 Ajax 导致页面整个刷新；造成很大的服务器负担；

只让服务器返回我们需要的部分数据即可；不用返回整个页面；xhr替代浏览器来接受响应，发送请求；利用dom增删改的方式来改变页面效果；

异步无刷新页面技术

异步:不会阻塞浏览器

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