AJAX编程（二）

数据传输方式

1、XML

虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

特点：　1、必须有一个根元素
　　　　2、不可有空格、不可以数字或.开头、大小写敏感
　　　　3、不可交叉嵌套
　　　　4、属性双引号（浏览器自动修正成双引号了）
　　　　5、特殊符号要使用实体
　　　　6、注释和HTML一样

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <arrayList>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
    </arrayList>
</root>

<?php 
    header('Content-Type:text/xml;charset=utf-8');
    /*以xml格式传输数据的时候要求响应内容格式是   text/xml*/

    /*file_get_contents 获取文件内容*/
    $xml = file_get_contents('01.xml');

    /*输出xml内容*/
    echo $xml;
?>

var xhr = new XMLHttpRequest;
xhr.open('get','01.php');
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){
        /*获取到XML格式内容  放回的是DOM对象  document*/
        var xml = xhr.responseXML;
        /*通过选着器可以获取到xml的数据*/
        console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
    }
}

 

2、JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取。

特点：　1、数据在名称/值对中
　　　　2、数据由逗号分隔(最后一个健/值对不能带逗号)
　　　　3、花括号保存对象方括号保存数组
　　　　4、使用双引号

[
  {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
  {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
  {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
]

2.1 PHP解析方法

json_encode()、json_decode()

?php 
    header('Content-Type:text/html;charset=utf-8');
    /*以json格式传输数据的时候要求响应内容格式是   application/json*/
    /*注意也可以不设置  但是这遵循的一个规范*/

    /*file_get_contents 获取文件内容*/
    $json = file_get_contents('01.json');

    /*输出json内容*/
    echo $json;
    echo '<br><br>';

    $array = array(
        array('src'=>'images/detail01.jpg','newPrice'=>'12.00','oldPrice'=>'455.00'),
        array('src'=>'images/detail02.jpg','newPrice'=>'65.00','oldPrice'=>'878.00'),
        array( 'src'=>'images/detail01.jpg','newPrice'=>'100.00','oldPrice'=>'1000.00')
    );

    /*将php数组转化成json字符*/
    $json_array = json_encode($array);
    echo $json_array;
    echo '<br><br>';

    /*将json字符转化成php数组*/
    $array_json = json_decode($json_array);
    echo $array_json;
    echo '<br><br>';
?>

 

2.2 Javascript解析方法

JSON对象 JSON.parse()、JSON.stringify()；
　　JSON兼容处理json2.js
　　总结：JSON体积小、解析方便且高效，在实际开发成为首选。

  var xhr = new XMLHttpRequest;
    xhr.open('get','01.php');
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            /*获取仅仅是字符串*/
            var text = xhr.responseText;

            /*需要把字符串转化成JSON对象*/
            var json_obj = JSON.parse(text);
            console.log(json_obj);

            /*我们也可以把JSON对象转化成字符串*/
            var json_str = JSON.stringify(json_obj);
            console.log(json_str);
        }
    }

2.3 兼容性

function XHR() {
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        }
        /*如果 try内的程序运行错误  抛出异常  捕捉异常  上面程序当中运行的错误*/
        catch(e) {
            /*在不同的IE版本下初始  ActiveXObject  需要传入的标识*/
            var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

            for (var i=0;i<IEXHRVers.length;i++) {
                try {
                    xhr = new ActiveXObject(IEXHRVers[i]);
                }
                catch(e) {
                    /*如果出现错误的时候  停止当次的循环*/
                    continue;
                }
            }
        }
        return xhr;
    }