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:对象格式一致

            

  

猜你喜欢

转载自www.cnblogs.com/cqyp/p/12464270.html