javaweb学习笔记16-AJAX & JSON通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。

AJAX & JSON

AJAX：

概念：Asynchronous Javascript And XML 异步的JavaScript 和 XML

异步和同步：客户端和服务器端相互通信的基础上
- 同步：客户端发出请求后必须等待服务器端的响应，在等待的期间客户端不能做其他的操作
- 异步：客户端发出请求后，在服务器处理请求的这段时间客户端可以进行其他的操作
- 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 提升用户的体验

实现方式

原生JS实现方式(不常用，了解即可)

    //发送异步请求
    //1.创建核心对象
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.建立连接
    /*
        参数：
            1.请求方式：GET,POST
                *get方式，请求参数在url后拼接
                *post方式，请求参数在send方法中定义
            2.请求的URL路径:服务器上文件的地址
            3.同步或异步请求：true(异步) 或 false(同步)
     */
    xmlhttp.open("GET","ajaxServlet?username=tom",true);

    //3.发送请求
    xmlhttp.send();
    //4.接收并处理来自服务器的响应结果
    //获取方式：xmlhttp.responseTest
    //什么时候获取？当服务器响应成功后再获取

    //当xmlhttp对象的就绪状态改变时会触发事件onreadystatechange
    xmlhttp.onreadystatechange=function() {
        //判断readyState就绪状态是否为4，判断status响应状态码是否为200（是否成功）
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            //获取服务器的响应结果
            var responseText = xmlhttp.responseText;
            alert(responseText);

        }
    }

JQeury实现方式（常用，对原生方式进行了封装）

$.ajax()
- 语法：$.ajax({键值对});

    //使用$.ajax()的方式发送异步请求
    $.ajax({
        url:"ajaxServlet1",//请求路径
        type:"get",//请求方式
        //data:"username=jack&age=18",//请求参数
        data:{"username":"jack","age":23},//JSON数据格式
        success:function(data){
            alert(data);
        },//响应成功后的回调函数(响应成功后自动调用)
        error:function () {
            alert("出错了...");
        },//响应失败后的回调函数(响应成功后自动调用)
        dataType:"text"//设置接收到的响应数据的格式
    });

$.get()：发送get请求

    *语法：$.get(url,[data],[callback],[type]);
        *参数：
            *url:请求路径
            *data:请求参数
            *callback:回调函数
            *type:响应结果的数据类型
            
    $.get("ajaxServlet",{username:"rose"},function(data){
    alert(data);
    },"text");

$.post()：发送post请求

    *语法：$.post(url,[data],[callback],[type]);
        *参数：
            *url:请求路径
            *data:请求参数
            *callback:回调函数
            *type:响应结果的数据类型
            
    $.post("ajaxServlet",{username:"rose"},function(data){
    alert(data);
    },"text");

JSON:

概念：JavaScript Object Notation : JavaScript对象表示法
- JSON多用于存储和交换文本信息的语法，类似于XML
- 进行数据的传输
- JSON比XML更小更快更易解析。
语法：
1. 基本规则
  - 数据在名称/值对中：json数据是由键值对构成的
    - 键用引号（单双都可）引起来，也可以不使用引号
    - 值的取值类型：
      1. 数字（整数或浮点数）
      2. 字符串（在双引号中）
      3. 逻辑值（true 或 false）
      4. 数组（在方括号中）
      5. 对象（在花括号中）（json对象）
      6. null
    - 数据由逗号分隔：多个键值对由逗号分隔
    - 花括号保存对象：使用{}定义json格式
    - 方括号保存数组：[]
2. 获取数据：
  1. json对象.键名
  2. json对象["键名"]
  3. 数组对象[索引]
3. JSON数据和java对象的相互转换
  - JSON解析器：
    - 常用的解析器：Jsonlib , Gson , fastjson , jackson(springMVC内置解析器)
  1. JSON转为Java对象
    1. 导入jackson的相关jar包
    2. 创建Jackson核心对象ObjectMapper
    3. 调用ObjectMapper的相关方法进行转换
      - readValue(json字符串数据，Class)
  2. Java对象转为JSON
    - 使用步骤：
      1. 使用步骤：
        
        导入jackson的相关jar包
        
        创建Jackson核心对象ObjectMapper
        
        调用ObjectMapper的相关方法进行转换
        
        转换方法：
        
        writeValue(参数1,obj):
        
        参数1：
        
        File:将obj对象转换为JSON字符串，并保存到指定的文件中
        
        Writer:将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
        
        OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
        
        writeValueAsString(obj):将对象转换为json字符串
        
        注解：
        
        @JasonIgnore:排除属性
        
        @JasonFormat:属性值的格式化
        
        复杂的Java对象转换
        
        List：数组
        
        Map：和JSON对象格式一致(键值对)

案例

检验用户名是否存在
- 一些注意事项
  - 服务器响应的数据，在客户端使用时，要想当做json数据格式使用
    1. $.get()：将最后一个参数type指定为"json"
    2. 在服务器端设置MIME类型： response.setContentType("application/json;charset=utf-8");