ajax学习

1.ajax
    什么是ajax？
        Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语
        使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，
        这使得程序能够更快地回应用户的操作
        
        异步交互
        
        什么是异步？
            在同一时刻，双方能够同时执行
            
        什么是同步？
            在同一个时刻，其中一方在执行，另一方只能等待
        
    ajax的好处？
        无刷新
        部分刷新
        
    ajax的使用方式？
        方式一：js原生代码
            get请求方式：
                function getRequest() {
                    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");
                    }
                    
                    return xmlhttp;
                }
                
                function send() {
                    //发送ajax请求
                    
                    //获取xmlhttprequest对象
                    var xmlhttp = getRequest();
                    
                    //监听请求响应状态
                    xmlhttp.onreadystatechange = function() {
                        alert(xmlhttp.readyState);
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            alert(xmlhttp.responseText);//获取响应数据
                        }
                    }
                    
                    //发送ajax请求
                    xmlhttp.open("GET","${pageContext.request.contextPath}/servletDemo01", true);
                    xmlhttp.send();//参数：只有post请求才写该参数
                }
                
            post请求方式：
                function getRequest() {
                    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");
                    }
                    
                    return xmlhttp;
                }
                
                function send() {
                    //发送ajax请求
                    
                    //获取xmlhttprequest对象
                    var xmlhttp = getRequest();
                    
                    //监听请求响应状态
                    xmlhttp.onreadystatechange = function() {
                        alert(xmlhttp.readyState);
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            alert(xmlhttp.responseText);//获取响应数据
                        }
                    }
                    
                    //发送ajax请求
                    xmlhttp.open("post","${pageContext.request.contextPath}/servletDemo01", true);
                    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    xmlhttp.send("username=tom");//参数：只有post请求才写该参数
                }
        
        方式二：jquery的方式
            get请求方式：
                $.ajax({
                   type: "get",
                   url: "${pageContext.request.contextPath}/servletDemo02",
                   data: "username=tom",
                   success: function(data){
                       alert(data);//响应体数据
                   }
                });
                
            post请求方式：
                $.ajax({
                   type: "post",
                   url: "${pageContext.request.contextPath}/servletDemo02",
                   data: "username=tom",
                   success: function(data){
                       alert(data);//响应体数据
                   }
                });
        
        方式三：jquery的方式
            get请求方式：
                $.get("${pageContext.request.contextPath}/servletDemo03", "username=tom", function(data) {
                    alert(data);
                });
        
            post请求方式：
                $.post("${pageContext.request.contextPath}/servletDemo03", "username=tom", function(data) {
                    alert(data);
                }); 
        
2.json
    什么是json？
        JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
        它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
        简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
        易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
        
        json就是一个js中的对象，只不过它有属于它自己的定义格式
        
    json的使用？
        json的定义格式？
            var json = {key:value, key:value, ... ...};
            
            key的类型是什么？
                字符串，可以用引号括起来，也可以不括起来
                
            value的类型是什么？
                number，boolean，object, function... ...
        
        json的数据如何获取？
            json对象名.键名
            json对象名[键名的字符串]
        
        json如何遍历？
            for...in...循环
            
            var json = {
                name:'tom',
                age:18
            };
            
            //alert(json.name + "..." + json.age);
            //alert(json['name'] + "..." + json['age']);
            
            for(var i in json) {
                alert(i + "..." + json[i]);//i是键，json[i]是值
            }
            
    json格式的字符串和对象的相互转换？
        json转换器？
            *jackson, fastjson...
    
        json格式字符串 -> 对象？
            String json = "{\"name\":\"tom\", \"age\":18}";
        
            ObjectMapper om = new ObjectMapper();
            User user = om.readValue(json, User.class);
            System.out.println(user);
        
        *对象 -> json格式的字符串？
            1.user对象的转换
                User user = new User("张三", 18);
        
                ObjectMapper om = new ObjectMapper();
                String json = om.writeValueAsString(user);
                System.out.println(json);
                //{"name":"张三","age":18}
            
            2.list集合的转换
                List<User> list = new ArrayList<>();
                list.add(new User("tom", 18));
                list.add(new User("jerry", 19));
                list.add(new User("rose", 17));
                
                ObjectMapper om = new ObjectMapper();
                String json = om.writeValueAsString(list);
                System.out.println(json);
                //[{"name":"tom","age":18},{"name":"jerry","age":19},{"name":"rose","age":17}]
            
            3.map集合的转换
                Map<String, Object> map = new HashMap<>();
                map.put("name", "tom");
                map.put("age", 18);
                
                ObjectMapper om = new ObjectMapper();
                String json = om.writeValueAsString(map);
                System.out.println(json);
                //{"name":"tom","age":18}
        
                注意：map转换成json和普通对象转换json格式字符串的格式是一样的