Ajax

1.AJAX

[1] AJAX简介

全称： Asynchronous JavaScript And XML

异步的JS和XML

AJAX实际上就是来使用JS向服务器发送请求的，

服务器返回响应信息以后，我们在通过DOM将响应信息反映到页面中。

XML指的是响应信息可以以xml的形式返回

目前已经很少使用XML作为响应格式,更多的是选择JSON作为响应的格式。

因为XML的存储和传输性能较差

AJAX主要就是用来提升用户体验的

AJAX的操作都是通过一个叫做XMLHttpRequest的对象来进行

[2] 同步和异步

同步：所谓同步就是，向服务器发送请求后，浏览器会刷新整个页面。

异步：向服务器发送请求后，不是刷新整个页面，而是刷新页面中的一部分。

[3] XMLHttpRequest对象

这个对象中封装发送给服务器的请求报文，同时我们也通过该对象来接收服务器发回的响应

如何获取这个对象：

大部浏览器支持的方式（IE7以上的浏览器）

var xhr = new XMLHttpRequest();

IE6以下的浏览器

var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);

IE5.5以下的浏览器

var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

[4] 使用步骤

1.获取XMLHttpRequest对象

var xhr = new XMLHttpRequest();

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

xhr.open(“get”, “/15_WEB_AJAX/AjaxServlet?t=”+Math.random());

{通过添加一个变化的查询字符串，解决get请求的缓存问题}

3.发送请求

xhr.send();

send()方法可以传递参数，

4.接收响应信息

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

var text = xhr.responseText;

alert(text);

}

};

注意：

发送post请求时，我们open方法的第一个参数要设置为post，

同时还要设置一个请求头,来让服务器端能够通过参数名获取参数值：

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

发送post请求时没有缓存问题，所以我们开发时没有特殊情况，一般发送post请求

[5] 响应数据的格式

我们之前的操作都是接受的一个纯文本内容

但是如果我们想返回一个比较复杂的数据，使用纯文本不太方便

例如：

我们程序中有一个user对象，user对象有如下信息：

name:唐僧,age:16,gender:男

我们也可以给AJAX响应一个XML格式的数据(理解)

<user>

<name>唐僧</name>

<age>16</age>

<gender>男</gender>

</user>

JSON格式的数据

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

目前来说我们的AJAX已经很少使用XML作为响应数据了，

因为XML解析起来比较麻烦，而且解析效率和传输的效率不是很高

我们使用AJAX时主要使用JSON数据作为响应内容。

2.JSON (掌握)

[1] JSON简介

JSON全称 JavaScript Object Notation

JSON实际上就是一种数据的格式，作用和XML类似，可以在不同的语言平台之间传输数据

JSON占用空间比XML要小的多，解析性能要比XML快的多，大概快个30%

所以我们在使用AJAX时JSON是首选的格式

XML比较方便阅读，但是JSON性能更好

所以开发中一般使用XML作为配置文件

[2] JSON的格式

对象：{“属性名1”:属性值1,
“属性名2”:属性值2,
“属性名3”:属性值3}

数组：[属性值1,属性值2,属性值3]

JSON中可以使用的属性值：

1.字符串

2.数字

3.布尔值

4.null

5.对象

6.数组

[3] JSON的转换：

在JS中：

JSON 转 对象

var obj = JSON.parse(JSON字符串)

对象 转 JSON

var str = JSON.stringify(对象)

在Java中：

我们需要使用第三方的jar包：

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

Jackson ： 使用方便，性能最好

Gson ：使用简单，性能和Jackson稍微差一些

我们使用Gson来转换JSON和对象

使用步骤：

1.导入jar包gson-2.2.4.jar

2.创建Gson对象

Gson gson = new Gson();

3.使用方法

对象 –> JSON

gson.toJson(Object obj);

JSON –> 对象：{

gson.fromJson(json字符串,对象的类型);

3.通过jQuery实现AJAX

[1] post()方法

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

url : 要发送的请求的地址

data : 要发送的请求参数，一般设置一个JSON对象

callback : 需要指定一个函数作为参数，该函数会在AJAX收到响应以后被调用

同时会将响应的内容作为函数的参数一起返回

type ：响应数据类型，可选值 xml, html, script, json, text


[2] get()方法

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

url : 要发送的请求的地址

data : 要发送的请求参数，一般设置一个JSON对象

callback : 需要指定一个函数作为参数，该函数会在AJAX收到响应以后被调用

同时会将响应的内容作为函数的参数一起返回

type ：响应数据类型，可选值 xml, html, script, json, text

 $(function(){
    $(".cart_btn").click(function(){
        var bookId=this.id;
        var url="${pageContext.request.contextPath}/client/CartServlet";
        var params={
                "method":"addBook",
                "bookId":bookId
        };
         $.post(url,params,function(data){
            var totalCount = data.totalCount;
            var title= data.title;
               .......
        },"json");
    });
});

[3] getJSON()方法

- getJSON方法和get方法类似，只不过getJSON方法的type只能是json，默认就是接受一个JSON对象作为返回值。

- 语法：$.getJSON(url, [data], [callback])