AJAX（22）

一、概述

1、同步和异步

同步：客户端发送请求到服务器端，在服务器返回响应之前，客户端都处于等待卡死状态
异步：客户端发送请求到服务器端，无论服务器端是否返回响应，客户端都可随意做别的事情。

2、Ajax的运行原理

客户端浏览器内置着很多解析器，比如html解析器，css解析器，js解析器。同样也有一个ajax解析器。当页面发起请求时，会将请求发送给浏览器内核的ajax引擎，ajax引擎会提交请求到服务器端，在此过程中客户端无需等待，直到服务器端返回数据给ajax引擎后，会触发你设置的时间，从而执行自定义的js代码动态地修改页面中的某些数据。

二、js原生的Ajax（帮助理解底层）

（1）创建ajax引擎对象
（2）为ajax对象绑定监听（监听服务器已经将数据返回）
（3）绑定提交地址
（4）发送请求
（5）接受响应数据

三、JSON数据格式

JSON是一种数据交换格式：使用ajax进行前后端的数据交互；移动端和服务端的数据交互。

1、JSON的格式与解析

（1）对象格式：{"key1":obj1,"key2":obj2,"key3":obj3.....}
（2）数组/集合格式：[obj,obj,obj.....]
二者可以嵌套使用。key是字符串，value是Object

例如：user对象用json数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京","account":{"monety":32000,"time":"20160527"}}
例：List<Product>用Json表示
[{"pid":"10","pname":"微星"},{},{}]

2、JSON的转换插件

将java的对象或集合转成json形式字符串。
（1）jsonlib（框架要用）
（2）Gson
（3）fastjson（性能最好）
json是js原生的内容，因此js可以直接取出json中的数据。

四、JQuery的Ajax（重点）

1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

//在注册页面的input框增加onblur失去焦点事件，通过jqueryajax异步校验用户名是否存在。
function func(){
//注：post方式提交的时候不会有乱码。而get提交会出现乱码，需要编解码方式解除乱码。
    $.post(//url, [data], [callback], [type] 
        "/BookStore/isExist",//要访问的url
        {"username":document.getElementById("username").value},//传参
        function(data){
            document.getElementById("back").innerHTML=data;
        },//服务器成功返回结果后执行回调函数
        "text"//服务器返回的参数类型
    );
    }
//servlet端简要代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //通过参数名获取传来的username
        String username = request.getParameter("username");
        UserService userService = new UserServiceImpl();
        //调用方法到数据库中检验是否存在该用户名的账户，并返回字符串作为结果。
        String result = userService.isExist(username);
        //设置客户端页面的编码格式
        response.setContentType("text/html;charset=utf-8");
        //将结果传给ajax引擎，并执行回调函数。
        response.getWriter().write(result);
    }

3）$.ajax( { option1:value1,option2:value2... } );
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址