Ajax、Json

一、Ajax

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

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

               *  同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

               *  异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

     2.作用：Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术；

                   通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

     3.实现方式：

           *  原生的js实现方式

           *  JQuery实现方式：三种

              1）$.get():  发送get请求

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

                          参数：* url：请求路径

                                    * data：请求参数

                                    * callback：回调函数

                                    * type：响应结果的类型

function fn1(){
         //get异步访问服务器端
         $.get(
             "/WEB10/ajaxServlet2",//url地址
            {"name":"张三","age":"20"},//json求参数
           function(data){  //执行成功后的回调函数
                //alert(data);
           //"{"name":"tom","age":"30"}"
           alert(data.name);
            },
            //"text"
            "json"
         );
        }

      2）$.post()：发送post请求

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

                         参数：* url：请求路径

                                    * data：请求参数

                                    * callback：回调函数

                                    * type：响应结果的类型

 function fn2(){
     //post异步访问服务器端
     $.post(
             "/WEB10/ajaxServlet2",//url地址
            {"name":"李四","age":"20"},//json求参数    //无数据时可省略
           function(data){  //执行成功后的回调函数
                //alert(data);
           //"{"name":"tom","age":"30"}"
           alert(data.name);
            },
            //"text"
            "json"
         );
        }

      3）$.ajax()

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

         

function fn3(){
        $.ajax({
            url: "/WEB10/ajaxServlet2",
            async:true,  //异步访问
            type:"POST",
            data:{"name":"lucy","age":"20"},
            success:function(data){
                alert(data.name);
            },
            error:function(){
                alert("alert");
            },
            dataType:"json"      //设置接受到的响应数据的格式
        });
 }

二、Json

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

      2.作用：

             *  json现在多用于存储和交换文本信息的语法

             * 进行数据的传输

             * JSON 比 XML 更小、更快，更易解析

       3.语法：

           * 基本规则：数据格式有键值对组成

           * 获取数据:

                 1.json对象.键名

                 2.json对象["键名"]

                 3.数组对象[索引]

                 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){
                    //这样的方式获取不行。因为相当于  person."name"
                    //alert(key + ":" + person.key);
                    alert(key+":"+person[key]);
                }
        
               //获取ps中的所有值
                for (var i = 0; i < ps.length; i++) {
                    var p = ps[i];
                    for(var key in p){
                        alert(key+":"+p[key]);
                    }
                }



/**
     * {
     *   "param1":"value1",
     *   "param2":{},
     *   "param3":[{key:value,key:value},{key:value,key:value}]
     * }
     *  
     *  
     */

 var json={
                "name1":"张",
                "name2": {"name":"小双","age":"20"},
                "baobao":
                      [
                          {"name":"小双","age":"20"},
                          {"name":"小黄","age":"15"}
                      ]
              };
     alert(json.baobao[0].age); //20
     alert(json.name2.name); //小双

      * Json数据转化

         * 常见的JSON解析器：Jsonlib，Gson，fastjson，jackson（spring框架内置的）

          1.Gson方式 :

             //导入人gson-2.2.4.jar包        


 // 将对象或集合转成json格式的字符串：  
Gson gson =new Gson();
String json = gson.toJson(productList);                     
System.out.println(json);

//将json字符串转化为集合
List<Object> fromJson = gson.fromJson(json, (Type) productList);

         2.jackson方式：

            * Java对象转化为Json字符串

                 1. 转换方法：

                      * writeValue(参数1，obj):

                          参数1：

                              File：将obj对象转换为JSON字符串，并保存到指定的文件中

                              Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中

                              OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

                       * writeValueAsString(obj):将对象转为json字符串         

  Person p =new Person();
//1.导入jackson的相关jar包

//2.创建Jackson核心对象 ObjectMapper

ObjectMapper mapper =new ObjectMapper();

//3. 调用ObjectMapper的相关方法进行转换
   /*
     转换方法：
          
               witeValue
               witeValueAsString(obj)  : 将对象转为json字符串
   */
    mapper.writeValue(new File("d://b.txt"),p);//将p转化为json字符串存到文件中，放到d://b.txt路径
     
     String jsonString= mapper.writeValueAsString(p);

         2.JSON转为Java对象            

String json="{"name":"汤姆","age":30}"

//1. 导入jackson的相关jar包
//2. 创建Jackson核心对象 ObjectMapper
ObjectMapper mapper =new ObjectMapper();
//3. 调用ObjectMapper的相关方法进行转换
Person person=readValue(json,Person.class);

         3. 注解：

            1. @JsonIgnore：排除属性。

                  转化为json字符串时不想看到那个字段是加此注解

            2. @JsonFormat：属性值得格式化

                 * @JsonFormat(pattern = "yyyy-MM-dd")

          4.复杂java对象转换

               * List：数组

               * Map：对象格式一致

案例：验证用户名的存在

   前端代码：

<script type="text/javascript">

         $(function(){
              //给username绑定blur事件
           $("#username").blur(function(){
             var username =$(this).val;
           //发送ajax请求
  
              $.get(
                   "findUserServlet",
                    {"username",username},
                     function(data){
                       //判断data.userExsit是否为true
                       if(data.userExsit){
                            //用户名存在
                            span.css("color",red);
                            span.html(data.msg);
                       }else{
                       //用户名不存在
                            span.css("color",green);
                            span.html(data.msg);
                      }
                      },
                        "json"

                       );            

});
});

</script>


<input type="text" class="form-control" id="username" name="username"
                                    placeholder="请输入用户名">
<input type="password" class="form-control" id="password" name="password"
                                    placeholder="请输入密码">
<input type="submit" width="100" value="注册" name="submit">

//后端代码

public class FindUserServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //获取用户名    
          String username=reuqest.getParameter("username");
         //判断是否存在（直接在web层演示）
         response.setContextType("text/html;charset=utf-8");//设置编码
            Map<String,Object> map =new HashMap<>();
           
            if("tom".equals(username)){
               map.put("userExsit",true);
              map.put("用户名存在");
           }else{
              map.put("userExsit",false);
              map.put("用户名不存在");
          
           }
   //将map转化为json字符串并传递到客户端
         ObjectMapper mapper =new ObjectMapper();
            mapper.writeValue(response.getWirter(),map);

}