zoukankan      html  css  js  c++  java
  • AJAX && JSON

    1、AJAX

      [1] AJAX简介

            > 全称: Asynchronous JavaScript And XML
            > 异步的JavaScript和XML
            > AJAX就是通过JavaScript向服务器发送请求,并接收响应,然后我们在通过DOM来修改页面。
            > XML指的是服务器响应的数据的格式。
            > 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。

      [2] 同步和异步

            >  同步:
                当我们通过浏览器向服务器发送一个请求时,浏览器会刷新整个页面。
            > 异步:
                当我们向服务器发送请求时,不是刷新整个网页,而是只刷新网页的一部分。

      [3] XMLHttpRequest对象

            > 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
            > 在XMLHttpRequest对象中封装发送给服务器请求报文,同时在服务器发回响应时,响应信息也会在对象中封装。
            > 如何获取XMLHttpRequest对象
                - var xhr = new XMLHttpRequest();

      [4] 使用步骤

            1.创建XMLHttpRequest对象
                大部分比较新的浏览器都支持的方式(IE7以上)
                    var xhr = new XMLHttpRequest();
                IE6以下的
                    var xhr = new ActiveXObject("Msxml2.XMLHTTP");
                IE5.5以下的
                    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    
                通用的获取XMLHttpRequest对象的方法:
                
             

                //写一个获取XHR的方法
                function getXMLHttpRequest(){
                    try{
                        //大部分浏览器都支持的方式
                        return new XMLHttpRequest();
                    }catch(e){
                        try{
                            //IE6以下浏览器支持的方式
                            return new ActiveXObject("Msxml2.XMLHTTP");
                        }catch(e){
                            try{
                                //IE5以下的浏览器
                                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(请求体);
                get请求没有请求体,所以send中可以传null或什么都不传。
                post请求需要通过send来设置请求参数。
                
            
            4.接收响应信息
               

                 //xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
                xhr.onreadystatechange = function(){
                    //判断当前readyState是否为4 , 且响应状态码为200
                    if(xhr.readyState==4 && xhr.status==200){
                        //读取响应信息,做相关操作。
                        
                        //如果信息为纯文本
                        xhr.responseText
                        
                        //如果信息为XML
                        xhr.responseXML
                    }
                };
    

                readyState属性存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成,且响应已就绪
               status--------- 200: "OK"
                                    404: 未找到页面       

        [5] 响应数据的格式

            - 响应一个XML
            - 当我们想通过servlet给ajax返回一个比较大量的信息,返回一个对象。
            - 返回 User :username:sunwukong  age:18 gender:男
                username:sunwukgon,age:18,gender:男
            - 我们可以通过一个XML格式来返回一个大量的信息
                <user>
                    <name></name>
                    <age></age>
                    <gender></gender>
                </user>
                
            - 响应一个JSON对象
           
            


    2、JSON

        [1] JSON简介

            > JSON全称 JavaScript Object Notation
            > 类似于JS中对象的创建的方法
            > JSON和XML一样,都是一种表示数据的格式
            > 但是JSON比XML的存储和解析性能要高的多,JSON要比XML高个30%左右。
                <user>
                    <name>sunwukong</name>
                    <age>18</age>
                    <gender>男</gender>
                </user>
                
                {"name":"孙悟空","age":8,"gender":男}        

        [2] JSON的格式


            > JSON字符串不方便阅读,但是传输性能好
            > XML方便阅读,但是传输性能差
            > JSON的格式和JS对象类型,但是要求属性名必须使用双引号。
            > JSON对象中实际就是一组一组的键值对的结构,
                键和值使用“:”连接,多个键值对之间使用“,”分开,注意如果是最后一组键值对,则千万不要在加“,”
            > {
                "属性名1":属性值1,
                "属性名2":属性值2,
                "属性名3":属性值3,
                "属性名4":属性值4
              }
            
            > JSON运行属性值的类型:
                1.字符串
                2.数字
                3.布尔
                4.对象{}
                5.数组[]
                6.null
                
            > 数组:
                [属性1,属性2,属性3,属性4]
        

     [3] JS中使用JSON    


            对象 --> JSON字符串
                JSON.stringify(对象)
            JSON --> 对象
                JSON.parse(JSON字符串)
                
        ===============================================================================
                /*
                区分js对象和json对象
                 js对象的属性名不需要使用双引号引起来
                 json对象的属性名必须使用双引号引起来
                
                //区分json对象和字符串
                json对象对象外边使用单引号('')括起来就是字符串对象
                
                json对象和字符串对象之间的转换
                    字符串--->json对象[JSON.parse(str)]
                    json对象-->字符串[JSON.stringify(obj)]
            */

        ===============================================================================
        


        [4] Java中使用JSON


            > 目前Java中用的比较多的JSON解析工具:
                json-lib -->  使用麻烦,解析性能最差
                Jackson --> 使用较麻烦,解析性能最好
                Gson --> 使用简单,解析性能中能
                    - Gson是谷歌出的一款JSON解析工具,使用简单,且性能较好。
        
            Java对象 --> JSON字符串
            
            JSON --> Java对象


    3、通过jQuery实现AJAX

        > 使用get和getJSON都会有缓存问题,并且使用get方法不能传送较多的数据。
        > post方法不会有缓存的问题,所以我们开发时使用post方法较多。

        [1] post()方法    

            $.post(url, [data], [callback], [type])
            参数:
                url:发送AJAX的请求地址,字符串。
                data:发送给服务器的请求参数,JSON格式。
                callback:当前需要获取服务器发送的响应时,我们可以通过该回调函数。
                    jQuery会将响应信息以回调函数的参数的形式返回
                type:响应信息的类型,字符串。一般两个常用值text、json    

        [2] get()方法

            - get方法和post方法使用方式基本一致。    

        [3] getJSON()方法

                getJSON(url, [data], [callback])
                getJSON方法和get方法类似,只不过该方法默认的响应类型为JSON,不需要再手动指定。
                
               

  • 相关阅读:
    ThreadPoolExecutor源码解析
    AQS框架
    (转)rvm安装与常用命令
    (转).gitignore详解
    (转)可简化iOS 应用程序开发的6个Xcode小技巧
    (转)webView清除缓存
    (转)git常见错误
    iOS本地通知
    (转)iOS获取设备型号
    (转)iOS平台UDID方案比较
  • 原文地址:https://www.cnblogs.com/bkyy/p/7943350.html
Copyright © 2011-2022 走看看