ajax和json的基本用法

Day5_15Ajax&Json

#AJAX:
    1.概念：asynchronous JavaScript and xml 异步js和xml
         1.异步和同步：客户端和服务器相互通信的基础上
             *同步：客户端必须等待服务器端的响应。在等待时不能做其他操作。
             *异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他操作。
             *Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
             *通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
             这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
             *传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
    2.实现方式：
          1.原生的js实现(了解):
              function  fun() {
            //发送异步请求.
            var xmlhttp;//1.创建核心对象
            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.请求方式. 2。请求的url 3.同步或异步true（异步） false（同步）
            xmlhttp.open("GET","AjaxServletDemo01?username=law",true);
            //3.发送请求:
            xmlhttp.send();
            //4.接收处理服务器响应
            //获取方式:xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var responseText =  xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
          2.jQuery实现:
               1.$.ajax():
                 *语法：$.ajax({键值对});
                  function fun() {
                  //使用jQuery方式发送
                  $.ajax({
                  url:"AjaxServletDemo01",
                  type:"POST",
                  //data:"username=jack&age=23",
                  data:{"username":"jack","age":23},
                  success:function (data) {
                    alert(data);
                   },
                  error:function () {
                    //如果请求响应出现错误，会执行的回掉函数
                    alert("出错了")
                  },
                  dataType:"text"//设置接受到的响应数据的格式
                 });
               }
               2.$.get():发送get请求
                  *语法: $.get(url,[data],[callback],[type])
                       参数：
                           *url:
                           *data
                           *callback
                           *type
               3.$.post()：发送post请求
                function fun() {
               $.get（post）("AjaxServletDemo01",{username:"rose"},
                function (data) {
                  alert(data);
               },"text");
               }
#Json
    1.概念: JavaScript Object Notation JavaScript对象表示法
             Person p = new Person();
             p.setXXX;
             var p  = {"name":"张三","age":26,"gender":male};
             *存储数据和交换数据
             *传输数据
    2.语法：
        1.基本规则：
            数据在名称/值对中
            数据由逗号分隔
            花括号保存对象
            方括号保存数组
        2.获取数据:
            1.json对象.键名
            2.json对象["键名"]
            3.数组对象[index]
            <script>
        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(var key in person){
            alert(key + ":" + person[key]);
        }
        */
       for (var i = 0; i < ps.length; i++){
           var p = ps[i];
           for(var key in p){
               alert(key + ":"+p[key]);
           }
       }
    </script>
    
    3.json数据和java对象的相互转换
          *JSON解析器:
              *常见解析器:JsonLib,Gson,fastJson,jackson
          1.json转java
            readValue(json,classname)
          2.java转json
              1.使用步骤：
                  导入jackson的jar包
                  创建jackson核心对象 ObjectMapper
                  调用核心对象的相关方法转换
          3.注释:
              1.@jsonIgnore:排除属性
              2.@jsonFormat:属性值格式化