让我们喝喝下午茶，聊聊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/

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