Ajax、Json详解

AJAX：

1.概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML

1. 异步和同步：客户端和服务器端相互通信的基础上

   • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
   • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

   Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ==（提交不刷新页面）==

   提升用户的体验

2. 实现方式：

1. 原生的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后边拼接。send方法为空参
                               * post方式，请求参数在send方法中定义
                           2. 请求的URL：
                           3. 同步或异步请求：true（异步）或 false（同步）
   
                    */
   xmlhttp.open("GET","ajaxServlet?username=tom",true);
   
   //3.发送请求
   xmlhttp.send();
   
   //4.接受并处理来自服务器的响应结果
   //获取方式 ：xmlhttp.responseText
   //什么时候获取？当服务器响应成功后再获取
   
   //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
   xmlhttp.onreadystatechange=function()
   {
       //判断readyState就绪状态是否为4，判断status响应状态码是否为200
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
           //获取服务器的响应结果
           var responseText = xmlhttp.responseText;
           alert(responseText);
       }
   }
   

2. JQeury实现方式

   1. $.ajax()

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

      <script>
      function fun(){
                      //使用$.ajax()发送异步请求
                      $.ajax({
                          url:"ajaxServlet" , // 请求路径
                          type:"POST" , //请求方式
                          //data: "username=jack&age=23",//请求参数
                          data:{"username":"jack","age":23},
                          success:function (data) {
                              alert(data);
                          },//响应成功后的回调函数
                          error:function () {
                              alert("出错啦...")
                          },//表示如果请求响应出现错误，会执行的回调函数
          
                          dataType:"text"//设置接受到的响应数据的格式
                      });
      }
      </script>
      <input type="button" value="发送异步请求" onclick="fun();">
                      
      

   2. $.get()：发送get请求

      • 语法：$.get(url, [data], [callback], [type])
        • 参数：
          • url：请求路径
          • data：请求参数
          • callback：回调函数
          • type：响应结果的类型：xml,html,javascript,json,text,_default

      $.get("ajaxServlet",{username:"zhangsan"},function(data){
           alert(data);}
           ,"text");
      

   3. $.post()：发送post请求

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

              * 参数：
                  * url：请求路径
                 * data：请求参数
                 * callback：回调函数
                 * type：响应结果的类型
        

---

JSON：

1. 概念： JavaScript Object Notation JavaScript对象表示法

//普通
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");

//json
var p = {"name":"张三","age":23,"gender":"男"};

• json现在多用于存储和交换文本信息的语法
• 进行数据的传输
• JSON 比 XML 更小、更快，更易解析。

2. 语法：

2.1 基本规则

• 数据在名称/值对中：json数据是由键值对构成的

  • 键==用引号(单双都行)==引起来，也可以==不使用引号==
  • 值的取值类型：
    1. 数字（整数或浮点数）
    2. 字符串（在双引号中）
    3. 逻辑值（true 或 false）
    4. 数组（在方括号中） {“persons”:[ { },{ } ]}
    5. 对象（在花括号中） {“address”:{“province”：”陕西”….}}
    6. null

    var persons = {"persons":[{"name":"张三"},{"name":"李四"}]}
    

• 数据由逗号分隔：多个键值对由逗号分隔

• 花括号保存对象：使用{}定义json 格式

• 方括号保存数组：[]

2.2 获取数据:

1. json对象.键名
2. json对象[“键名”]
3. 数组对象[索引]

var persons = {"persons":[{"name":"张三"},{"name":"李四"}]}
//李四
var name1 = persons.persons[1].name

4. 遍历

 //1.定义基本格式
                var person = {"name": "张三", age: 23, 'gender': true};
        
                var ps = [{"name": "张三", "age": 23, "gender": true},
                    {"name": "李四", "age": 24, "gender": true},
                    {"name": "王五", "age": 25, "gender": false}];
                    
                //获取person对象中所有的键和值
                //for in 循环
                for(var key in person){
                    alert(key)//键，字符串形式，获取值时不能使用：person.key --> person."name"
                    alert(person[key])//值
                }
                
                 //获取ps数组中的所有值
                 for(var i=0;i<ps.length;i++){
                     var p = ps[i];
                     for(var key in p){
                         alert(key+":"+p[key]);
                     }
                 }

2.3 JSON数据和Java对象的相互转换

• JSON解析器：
  • 常见的解析器：Jsonlib，Gson，fastjson，jackson

1. JSON转为Java对象（了解）

   1. 导入jackson的相关jar包
   2. 创建Jackson核心对象 ObjectMapper
   3. 调用ObjectMapper的相关方法进行转换
      1. readValue(json字符串数据,class)

      String person = "{"name": "张三", age: 23, 'gender': true}";
      Person person = mapper.readValue(person,Person.class)
      

2. Java对象转换JSON

3. 使用步骤

1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
  1. **转换方法**
      
    * writeValue(参数1，obj):
                参数1：
                    File：将obj对象转换为JSON字符串，并保存到指定的文件中
                    Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                    OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
    * writeValueAsString(obj):将对象转为json字符串
    
    ``` java
    var person = {"name": "张三", age: 23, 'gender': true};
    
    String json = writeValueAsString(person);
    System.out.println(json);
    
    writeValue(new File("d://a.txt"),json);
    ```
    
  2. 注解：（定义在Bean类的属性上方）

     1. @JsonIgnore：排除属性（该属性不被转换为json）。（了解）
     2. @JsonFormat：属性值得格式化
          * @JsonFormat(pattern = "yyyy-MM-dd")

  3. 复杂java对象转换

     1. List：转换出的是数组
     2. Map：转换出的和对象格式一致

案例

• 校验用户名是否存在

  注意：servlet返回的应该是json对象
  有两种解决方案：
  1. $.get(type):将最后一个参数type指定为"json"
  2. 在服务器端设置MIME类型
  response.setContentType("application/json;charset=utf-8");
  

  乱码:response.setContentType("application/json;charset=utf-8");
  

  json is not a function:
  没有加引号 "json"
  

  连接数据库bug:
  except 1,actl 0（getParameter获取不到值）
  dao的impl类数据库逻辑，应该try catch，查找到返回true，查找不到catch中返回false
  

分析：
1.在html中创建表单，并在username的表单后加上span标签
2.引入jquery，绑定blur事件，触发ajax请求查询数据库方法，返回一个userExsit和msg，判断userExsit，将msg传值
3.FindUserServlet，获取ajax传来的值，调用数据库查询，查询到有值则返回true，把userExsit和msg赋值，转换json对象

<input type="text" id="username"><span id="s_username"></span><br>
<input type="text" id="password"><br>
<input type="button" id="bt_reg" value="注册">

<script src="js/jquery-3.3.1.min.js" ></script>
<script>
$(function(){
    $("#username").blur(function(){
        //获取输入框的值
        var username = $("#username").val();
        //使用Ajax发送请求,接收到回应之后调用function方法
        $.get("findUserServlet",{"username":username},function(){
            if(userExsit){
                //存在用户
                $("s_username").css("color","red");
                $("s_username").html(msg);
            }else{
                //用户名可用
                $("s_username").css("color","green");
                $("s_username").html(msg);
            }
        });
    });
});
</script>

//获取ajax发送请求的值
String username = request.getParameter("username");
//设置回应的格式和字符集
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<String,Object>();
if("zhangsan".equals(username)){
    //存在该用户
    map.put("userExsit",true);
    map.put("msg","该用户已存在，请重试");
}else{
    //用户名可用
    map.put("userExsit",false);
    map.put("msg","该用户名可用");
}
//将map集合对象转换为json对象,并返回给客户端
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),map);