1.AJAX

[1] AJAX简介

> 全称： Asynchronous JavaScript And XML

> 异步的JavaScript和XML

> Ajax作用：是用JavaScript向服务器发送异步请求，然后服务器给出响应，然后我们在通过DOM来修改页面，然后以XML格式的文件返回给浏览器端。

> XML指的是服务器响应的数据的格式。

> 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。

[2] 同步和异步

>  同步：

当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。

> 异步：

当我们向服务器发送请求时，不是刷新整个网页，而是只刷新网页的一部分。

[3] XMLHttpRequest对象

> 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。

> 在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。

> 如何获取XMLHttpRequest对象

- var xhr = new XMLHttpRequest();

[4] 使用步骤

1.创建XMLHttpRequest对象

大部分比较新的浏览器都支持的方式（IE7以上）

var xhr = new XMLHttpRequest();

IE6以下的

var xhr = new ActiveXObject("Msxml2.XMLHTTP");

IE5.5以下的

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

通用的获取XMLHttpRequest对象的方法：

//写一个获取XHR的方法function getXMLHttpRequest(){try{//大部分浏览器都支持的方式return new XMLHttpRequest();}catch(e){try{//IE6以下浏览器支持的方式return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{//IE5以下的浏览器return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){alert("你是火星来的吧！你的浏览器不支持AJAX！");}}}}

2.设置请求信息（请求地址，请求方式，请求参数）

xhr.open(请求方式,请求地址);

在发送post请求时，还需要设置一个请求头，如下：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3.发送请求

xhr.send(请求体);

get请求没有请求体，所以send中可以传null或什么都不传。

post请求需要通过send来设置请求参数。

4.接收响应信息

//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用xhr.onreadystatechange = function(){//判断当前readyState是否为4 ， 且响应状态码为200if(xhr.readyState==4 && xhr.status==200){//读取响应信息，做相关操作。//如果信息为纯文本xhr.responseText//如果信息为XMLxhr.responseXML}};

[5] 响应数据的格式

- 响应一个XML

- 当我们想通过servlet给ajax返回一个比较大量的信息，返回一个对象。

- 返回 User ：username：sunwukong  age：18 gender：男

username:sunwukgon,age:18,gender:男

- 我们可以通过一个XML格式来返回一个大量的信息

<user>

<name></name>

<age></age>

<gender></gender>

</user>

- 响应一个JSON对象

[6] 案例

（1）案例Get请求：

<script type="text/javascript">window.onload = function(){var btn = document.getElementById("btn01");btn.οnclick=function(){//1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！var xhr = new XMLHttpRequest();//2.通过open方法设置请求参数var method= "get";var url = "${pageContext.request.contextPath}/AServlet";xhr.open(method, url);//3.发送请求！xhr.send();//4.接收响应信息xhr.onreadystatechange= function(){if(xhr.readyState == 4 && xhr.status == 200 ){var data = xhr.responseText;alert(data);}}}}</script>

（2）案例POST请求：

<script type="text/javascript">window.onload = function(){var btn = document.getElementById("btn01");btn.οnclick=function(){//1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！var xhr = new XMLHttpRequest();//2.通过open方法设置请求参数var method= "post";var url = "${pageContext.request.contextPath}/AServlet";xhr.open(method, url);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//3.发送请求！xhr.send("username=zhangsan&password=lisi");//4.接收响应信息xhr.onreadystatechange= function(){if(xhr.readyState == 4 && xhr.status == 200 ){var data = xhr.responseText;alert(data);}}}}</script>

2.JSON

[1] JSON简介

> JSON全称 JavaScript Object Notation（JavaScript对象表示法）

> 类似于JS中对象的创建的方法

> JSON和XML一样，都是一种表示数据的格式

> 但是JSON比XML的存储和解析性能要高的多，JSON要比XML高个30%左右，JSON 比 XML 更小、更快，更易解析。

<user>

<name>sunwukong</name>

<age>18</age>

<gender>男</gender>

</user>

{"name":"孙悟空","age":8,"gender":男}

[2] JSON的格式

> JSON字符串不方便阅读，但是传输性能好

> XML方便阅读，但是传输性能差

> JSON的格式和JS对象类型，但是要求属性名必须使用双引号。不能使用单引号，也不能不写引号！

> JSON对象中实际就是一组一组的键值对的结构，

键和值使用:连接，多个键值对之间使用,分开，注意如果是最后一组键值对，则千万不要再加.

> {

"属性名1":属性值1,

"属性名2":属性值2,

"属性名3":属性值3,

"属性名4":属性值4

}

> JSON运行属性值的类型：

1.字符串

2.数字

3.布尔

4.对象

5.数组

6.null

> 数组：

[属性1,属性2,属性3,属性4]

[3] JS中使用JSON

JSON对象 --> JSON字符串

JSON.stringify(对象)

JSON字符串 --> JSON对象

JSON.parse(JSON字符串)

[4] Java中使用JSON

> 目前Java中用的比较多的JSON解析工具：

json-lib -->  使用麻烦，解析性能最差

Jackson --> 使用较麻烦，解析性能最好

Gson --> 使用简单，解析性能中能

- Gson是谷歌出的一款JSON解析工具，使用简单，且性能较好。

Java对象 --> JSON字符串

JSON字符串 --> Java对象

3.通过jQuery实现AJAX

> 使用get和getJSON都会有缓存问题，并且使用get方法不能传送较多的数据。

> post方法不会有缓存的问题，所以我们开发时使用post方法较多。

[1] post()方法

$.post(url, [data], [callback], [type])

参数：

url：发送AJAX的请求地址，字符串。

data：发送给服务器的请求参数，JSON格式。

callback：当前需要获取服务器发送的响应时，我们可以通过该回调函数。

jQuery会将响应信息以回调函数的参数的形式返回

type：响应信息的类型，字符串。一般两个常用值text、json

[2] get()方法

- get方法和post方法使用方式基本一致。

[3] getJSON()方法

getJSON(url, [data], [callback])

getJSON方法和get方法类似，只不过该方法默认的响应类型为JSON，不需要再手动指定。

4.GSON工具类的使用：

//1将普通对象转换为JSON字符串！Student  stu = new Student("张三",12);Gson gson = new Gson();String json = gson.toJson(stu);System.out.println(json);Student fromJson = gson.fromJson(json, Student.class);System.out.println(fromJson);

//2.把Map转换成JSON字符串Map<String,String> map = new HashMap();map.put("hobby","篮球");map.put("gender", "男");String json2 = gson.toJson(map);System.out.println(json2);Map<String,String> fromJson = gson.fromJson(json2, Map.class);System.out.println(fromJson);

//3.将List转换为JSON字符串List<Student> list = new ArrayList<Student>();list.add(new Student("刘德华", 53));list.add(new Student("冯小刚",63));String json3 = gson.toJson(list);System.out.println(json3);List<Map<String,Object>> fromJson = gson.fromJson(json3, List.class);for(Map map:fromJson){System.out.println(map.get("name"));}