• 让我们喝喝下午茶,聊聊AJAX和JSON


    1.AJAX
        [1] AJAX简介
            > 全称:Asynchronous JavaScript And XML
            > 直译:异步的JavaScript和XML
            > AJAX就是通过JS向服务器发送请求,接收响应,并通过DOM来修改网页。
            > XML是服务器返回的数据的格式,但是现在xml格式的数据使用的不多了
     
        [2] 同步和异步
            - 同步请求:
                - 通过浏览器向服务器发送请求时,整个的页面都处在一个等待的状态,不能做其他操作,
                    等待服务器的响应到达浏览器时,它会刷新整个网页。
     
            - 异步请求:
                - 发送请求时,通过js在后台自动发送的,不会影响用户浏览操作网页的行为,
                    当响应返回时,只会刷新网页中的一部分,而不是整个网页。
     
        [3] XMLHttpRequest对象
            > JS中为我们提供了一个XMLHttpRequest对象,它封装了浏览器发送给服务器的请求报文,
                同时我们也可以使用该对象来接收服务器发送的响应信息。
            > 我JS中AJAX操作都是围绕着XMLHttpRequest进行的。
     
        [4] 使用步骤
            1.创建XMLHttpRequest对象
                >  大部分浏览器都支持的方式
                    var xhr = new XMLHttpRequest();
                > IE6以下的浏览器
                    var xhr = new ActiveXObject("Msxml2.XMLHTTP");
                > IE5.5以下的浏览器   
                    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                >
                //获取XMLHttpRequest对象的方法
                function getXMLHttpRequest(){
                    try{
                        //大部分浏览器都支持的方式
                        return new XMLHttpRequest();
                    }catch(e){
                        try{
                            //IE6以下浏览器支持的方式
                            return new ActiveXObject("Msxml2.XMLHTTP");
                        }catch(e){
                            try{
                                //IE5.5以下支持的方式
                                return new ActiveXObject("Microsoft.XMLHTTP");
                            }catch(e){
                                alert("哥们,你是外星来的吧!你的浏览器不支持AJAX");
                            }
                        }
                    }
                }           
     
            2.设置请求信息
                xhr.open("请求方式","请求地址");
     
            注意:在发送post请求时,还需要设置一个请求头:
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
     
            3.发送请求
                xhr.send(请求体);
     
            4.接收响应信息
                xhr.onreadystatechange = function(){
                    //判断readyState是否为4,status是否为200
                    if(xhr.reqdyState==4 && xhr.status==200){
     
                        //获取响应信息
                        var text = xhr.responseText;
                        var dom = xhr.responseXML;
                    }
     
                };
     
        [5] 响应数据的格式
            > 最早的时候我们的AJAX一直使用XML作为响应数据的格式。
            > 当我们需要向请求返回一个复杂的数据,比如说一个学生对象。
                name=老王,age=18,gender=男,address=隔壁
            > 一般复杂数据我们可以考虑使用XML来表示
                <person>
                    <name>老王</name>
                    <age>18</age>
                    <gender>男</gender>
                    <address>隔壁</address>
                </person>
            > 使用XML去传输数据,XML的传输性能略差,解析起来比较麻烦
                所以现在在AJAX的开发中已经很少使用XML作为响应数据的格式。
     
            > 当我们发送复杂数据时,一般我们会采用JSON。比如同样的数据,使用json可以这样表示:
                {"name":"老王","age":18,"gender":"男","address":"隔壁"}
     
    2.JSON
        [1] JSON简介
            > JSON全称 JavaScript Object Notation
            > JSON和XML类似,都是一种表示数据的格式
            > JSON和XML相比,占用的空间小,传输性能好
                解析起来也是十分方便。
            > JSON实际上就是一个字符串,但是这个字符串可以转换为对象。
            > 使用JSON比XML性能要高很多。
            > JSON传输性能好,可读性比较差
                XML传输性能不好,可读性好
            > 所以我们一般使用JSON传输信息,而使用XML来编写配置文件。   
     
        [2] JSON的格式
            > JSON的语法:
                - JSON对象
                    {
                        "属性名1":属性值1,
                        "属性名2":属性值2,
                        "属性名3":属性值3
                    }
                - JSON对象中保存的是一组一组的键值对结构,
                    属性名和属性值使用冒号连接,
                    属性名必须加上双引号,
                    多个键值对之间使用,隔开
                    如果属性后边没有其他属性,千万不要再加,!
     
                - JSON数组
                    [属性1,属性2,属性3]
     
            > JSON属性值可以使用的类型:
                1.字符串
                2.数字
                3.布尔
                4.null
                5.对象
                6.数组
        [3] JSON的转换
            1.在JS中JSON的转换:
                1) json字符串 --> js对象
                    var obj = JSON.parse(json);
                2) js对象 ---> json字符串
                    var json = JSON.stringify(obj);
     
            2.在Java中JSON的转换:
                1) json-lib 使用麻烦,性能差
                2) jackson 使用简单,性能最好
                3) gson 使用最简单,性能好
                    - gson是谷歌出品的一款JSON的解析工具。
                    - 使用gson,需要先导入一个jar包:
                        gson-2.2.4.jar
                    - 使用:
                        Gson gson = new Gson();
                    - 方法:
                        String json = gson.toJson(对象);
                        Object obj = gson.fromJson(JSON字符串,对象类型);
     
     
     
    3.通过jQuery实现AJAX
     
        [1] post()方法   
            > post(url, [data], [callback], [type])
                - url:发送请求的地址   
                - data:请求参数,需要一个js对象
                - callback:回调函数,当响应返回时,该回调函数会执行,
                    并且将响应内容以参数的形式返回
                - type:指定响应内容的类型,xml, html, script, json, text   
     
        [2] get()方法
            > get(url, [data], [callback], [type])
                - url:发送请求的地址   
                - data:请求参数,需要一个js对象
                - callback:回调函数,当响应返回时,该回调函数会执行,
                    并且将响应内容以参数的形式返回
                - type:指定响应内容的类型,xml, html, script, json, text   
     
        [3] getJSON()方法
            > getJSON作用和get类似,只不过他的type默认就是json,不用再指定了。
     

    转载请注明出处!

    http://www.cnblogs.com/libingbin/

    感谢您的阅读。如果文章对您有用,那么请轻轻点个赞,以资鼓励。

  • 相关阅读:
    map-count
    map-count
    map-constructors
    map-constructors
    multiset-find
    multiset-find
    multiset-insert
    C++ string详解
    treap(树堆)
    程序设计语言的变革
  • 原文地址:https://www.cnblogs.com/libingbin/p/5994030.html
Copyright © 2020-2023  润新知