AJAX && JSON

野性酷女 2023-06-11 14:26 13阅读 0赞

# 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，不需要再手动指定。

更多专业前端知识，请上 **【猿2048】www.mk2048.com**