AJAX传输的各种数据格式总结

作为数据结构，纯文本和HTML只适用于特定场合，但它们可以节省客户端CPU周期。XML被广泛应用而且支持良好，但是它十分笨重且解析缓慢。JSON是轻量级的，解析速度快，通用性与XML相当。字符分割的自定义格式十分轻量，在解析大量数据集时非常快，但需要编写额外的服务端构造程序，并在客户端解析。

1. XML

在高性能AJAX中XML没有立足之地

第一种格式：
<users total='2'>
    <user id='1'>
        <username>zhangsan</username>
        <realname>lisan</realname>
        <age>23</age>
    </user>
    <user id='2'>
        <username>wangwu</username>
        <realname>xiaoliu</realname>
        <age>23</age>
    </user>
</users>
第二种格式：
<users total='2'>
    <user id='1' username='zhangsan' realname='lisan' />
    <user id='2' username='wangwu' realname='xiaoliu' />
</users>

　　2. Xpath 未得到广泛的支持

　　3. JSON

是一种使用JavaScript对象和数组直接量编写的轻量级且易于解析的数据格式。

JSON要求名称和值必须包含在双引号中(数字除外)。不允许使用单引号。

JSON不是JavaScript

服务器端对于前端设计人员来说较为神秘，先贴上服务器端代码

$users = array();
$users['aa'] = array('id'=>1, 'name'=>'mackxu', 'age'=>23);
$users['bb'] = array('id'=>2, 'name'=>'anan', 'age'=>20);
$users['cc'] = array('id'=>3, 'name'=>'张三', 'age'=>23);
header("Content-type:text/json;charset=utf-8");
//编码$users为json格式的数据
//[{"id":1,"name":"mackxu","age":23},{"id":2,"name":"anan","age":20},
//{"id":3,"name":"zhangsan","age":23}]    
echo json_encode($users);

JS代码请求数据，显示在网页上：

//请求json格式的数据
function request_json() {
    var oXHR = new XMLHttpRequest();
    var url = '../test/index.php';
    oXHR.open('GET', url, true);
    oXHR.onreadystatechange = function() {
        if(oXHR.readyState == 4) {
            if(oXHR.status==200 || oXHR.status==304) {
                handler_user(oXHR.responseText);
            }
        }
    };
    oXHR.send(null);
}
//处理服务器响应的数据
function handler_user(json) {
    var oUser = parse_json(json);
    //处理数据 打印所有数据
    for (var id in oUser) {
        console.log(id);
        for (var p in oUser[id]) {
            console.log(oUser[id][p]);
        }
    }
}
//解析Json字符串
function parse_json(json) {
    return eval('('+json+')');
}

数组JSON格式：

//[["1","mackxu","23"],["2","anan","20"],["3","\u5f20\u4e09","20"]]
    $users = array(
        array('1', 'mackxu', '23'),
        array('2', 'anan', '20'),
        array('3', '张三', '20')
    );

        

 

　　4. JSON-P

JSON可以被本地执行前需要做适当的处理，当使用XHR是，JSON数据被当成字符串返回。字符串紧接着被eval()转换成原生对象。然而在使用动态脚本注入时，JSON数据被当成另一个JavaScript文件并作为原生代码执行。为了实现这一点，这些数据必须封装在一个回调函数里。(JSON with padding) JSON填充

照样先贴上服务器端的数据：

header("Content-type:text/javascript; charset=utf-8");
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
//[["1","mackxu","23"],["2","anan","20"],["3","\u5f20\u4e09","20"]]
$users = array(
    array('1', 'mackxu', '23'),
    array('2', 'anan', '20'),
    array('3', '张三', '20')
);
if (isset($_GET['callback'])) {
    $callback = $_GET['callback'];        //JS回调函数名称
    //对数据json编码
    $json = json_encode($users);
    //拼接json-p数据, 并输出
    echo $callback.'('.$json.');';
}

 

jS文件代码：

//动态加载脚本, 请求JSON-P数据
function load_script(url) {
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = url;            //此处有请求
    document.getElementsByTagName('head')[0].appendChild(oScript);
}
//定义回调函数：处理json数据
function hander_json(oData) {
    console.log(oData);
}
//click事件的处理器
function hander() {
    var url = '../test/index.php?callback=hander_json';
    load_script(url);        //根据url请求脚本
}

 

　　5. HTML格式

服务器端创建好的HTML 传输数量大、还需要时间在客户端解析

　　6. 自定义格式

理想的数据格式应该只包含必要的结构，以便可以分解出每一个独立的字段。我们很容易定义这样的格式，只需要简单地把数据用分隔符连接起来：

1：mackxu:23:ecjtu;

2:anan:20:ecjtu;

... ...

服务端代码：

$users = array(
    array('id'=>1, 'name'=>'mackxu', 'age'=>23),
    array('id'=>2, 'name'=>'anan', 'age'=>20),
    array('id'=>3, 'name'=>'张三', 'age'=>22)
);
//返回自定义格式化后的字符串
function build_format_custom($users) {
    $row_delimiter = chr(1);        //js中的\u0001
    $field_delimiter = chr(2);         //\u0002
    foreach ($users as &$user) {
        $value = implode($field_delimiter, $user);
    }
    return implode($row_delimiter, $users);
}
function build_format_custom2($users) {
    $row_delimiter = chr(1);        //js中的\u0001
    $field_delimiter = chr(2);         //\u0002
    $output = array();
    foreach ($users as $user) {
        $fields = array($user['id'], $user['name'], $user['age']);
        $output[] = implode($field_delimiter, $fields);
    }
    return implode($row_delimiter, $output);
}
//输出自定义分割的字符串
echo build_format_custom($users);    

 

客户端JS请求数据：

//自定义格式的数据请求、处理
function request_data() {
    var oXHR = new XMLHttpRequest();
    var url = '../test/index.php';
    oXHR.open('GET', url, true);
    oXHR.send(null);
    oXHR.onreadystatechange = function() {
        if(oXHR.readyState == 4) {
            if(oXHR.status==200 || oXHR.status==304) {
                //处理响应的数据
                handle_data(oXHR.responseText);
            }
        }
    };    
}
//把数据解析成每个用户是一个对象并把它放在数组里
//'\u0001'、'\u0002'是约定的分隔符
function parse_custom_format(sData) {
    var aUsers = [];        //对象数组存储所有用户对象
    var usersEncode = sData.split('\u0001');
    var aUser;
    for(var i=0, len=usersEncode.length; i<len; i++) {
        aUser = usersEncode[i].split('\u0002');
        aUsers[i] = {
            id: aUser[0],
            name: aUser[1],
            sex: aUser[2]
        };
    }
    return aUsers;        //返回对象数组
}
//处理服务器端响应的数据
function handle_data(sData) {
    var aUsers = parse_custom_format(sData);
    console.log(aUsers);
}

 

数据格式总结

通常来说数据格式越轻量级越好，JSON和字符分割的自定义格式是最好的。如果数据集很大并且对解析时间有要求，那么可以选择下面这两种格式：

1. JSON-P数据，使用动态脚本注入获取。

它把数据当作可执行JS代码而不是字符串，解析速度极快。它能跨域使用，但不安全

　　2. 字符分割的自定义格式

使用XHR或动态脚本注入获取，用split()解析。解析大数据比JSON-P略快，而且通常文件尺寸更小