Ajax与XML

Ajax请求后台返回数据时，都是简单的字符串或数字；

如果后台有大量数据要返回，我们应该怎么办？

目前有两种技术方案：

1：将数据打包成 XML 的格式进行传输

2：将数据打包成 json 的格式进行传输

XML基本语法规则

XML 文档必须有根元素，根元素是所有其他元素的父元素

<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>

如上代码，root就是根元素；

XML 声明

<?xml version="1.0" encoding="utf-8"?>
声明文件是可选部分,如果存在需要放在文档的第一行；
version ：版本号，代表XML使用的版本号
encoding ：编码格式，默认UTF-8

所谓的文档声明就是告诉解析器当前文档格式、版本号以及编码格式。

所有的 XML 元素都必须是成对闭合标签

非闭合标签是非法的，解析器将报错，不无正常解析；

<user>
    <name>刘能</name>
    <!-- 错误的,无结束标签 -->
    <age>46
    <!-- 错误的,无开始标签 -->
    男</sex>
</user>

XML 标签对大小写敏感

<?xml version="1.0" encoding="UTF-8"?>
<user>
    <name>刘能</name>
    <!-- 错误，标签大小写不一致 -->
    <Age>46</age>
    <sex>男</sex>
</user>

XML标签不允许有交叉嵌套
XML标签名不建议使用特殊字符，尽量只用数字字母下划线

<?xml version="1.0" encoding="UTF-8"?>
<user>
    <name>刘能</name>
    <age>46</age>
    <!-- 不建议使用 -->
    <s-ex>男</s-ex>
    <s.ex>男</s.ex>
</user>

PHP 解析XML

解析原理

XML在解析时一共要经历三个步骤：

① 读取XML文档到内存；

② 形成DOM树结构；

③ 生成SimpleXML对象。

这里写图片描述

SimpleXML类库

user.xml

<?xml version="1.0" encoding="UTF-8"?>
<user>
    <man>
        <name>刘能</name>
        <age>46</age>
        <sex>男</sex>
    </man>
    <man sex="男">
        <name>广坤</name>
        <age>48</age>
    </man>
</user>

有user.xml 文件，内容如上，如何使用PHP解析呢？
SimpleXML类库提供了：

simplexml_load_file(‘xml_file_path’)方法：
将XML文件解释成一个对象

simplexml_load_string(‘xml_url_path’)

将XML字符串解释成一个对象

$xml = simplexml_load_file('user.xml');
var_dump($xml);

注意：
如果当前读取的节点是对象就通过->来进行访问。
如果当前读取的节点是数组就通过[]来进行访问。

获取XML数据中的所有name值

foreach循环遍历：

$xml = simplexml_load_file('user.xml');
foreach ($xml->man as $v){
    echo '姓名:'.$v->name.'；年龄：'.$v->age.'<hr>';
}

for循环遍历：

$xml = simplexml_load_file('./01.xml');
$length = count($xml);
for($i=0;$i<$length;$i++){
    echo $xml->man[$i]->name;
}

PHP 解析XML 案例

准备一个有表单提交功能的HTML页面，
输入想要查询的城市后，点击提交按钮，将这个城市的天气打印出来：

html代码：

<form action="03.5.php" method="get">
    <input type="text" name="city"><br>
    <input type="submit" value="提交">
</form>

后台PHP处理文件代码：

//接受前台提交的数据
$city = $_GET['city'];

//组装请求地址
$url = 'http://v.juhe.cn/weather/index?cityname='.$city.'&dtype=xml&format=&key=810c3b2c488bc37d5f521196d8799a72';

//发送请求并接受返回的数据
$s = file_get_contents($url);
// echo $s; //打印返回的XML数据

//使用 simplexml_load_string 函数读入并解析XML数据
$xml = simplexml_load_string($s);

//找到并打印我们想要的数据
echo '城市：'.$xml->result->today->city.'<hr>';
echo '气温：'.$xml->result->today->temperature.'<hr>';
echo '天气：'.$xml->result->today->weather.'<hr>';
echo '着装建议：'.$xml->result->today->dressing_advice.'<hr>';

PHP 生成XML

根据XML语法规则，使用PHP写字符串即可；

PHP 代码：

mysql_connect('localhost','root','');
mysql_query('use test');
mysql_query('set names utf8');

//SQL 语句
$sql = "select * from test";
$res = mysql_query($sql);
//生成XML格式数据
$xml = '<users>';
while($row = mysql_fetch_assoc($res)){
    $xml .= '<admin>';
    $xml .= '<id>'.$row['id'].'</id>';
    $xml .= '<name>'.$row['name'].'</name>';
    $xml .= '</admin>';
}
$xml.='</users>';
//响应头声明文件类型
header('Content-type:text/xml');
echo $xml;

Ajax获取XML数据

<body>
    <input type="button" value="获取XML" id="su">
</body>
<script src="createXHR.js"></script>
<script>
    var fm = gid('su');
    fm.onclick = function(){
        var xhr = cXHR();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                //弹出获取到的数据
                alert(xhr.responseText);
            }
        }
        var url = '06.php';
        xhr.open('post',url);
        //设置请求头
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send();
    }
</script>

此时，我们已经能够获取到后台返回的数据了，但是，如果我想将用户名全部取出并且展示到浏览器的界面中；
数据虽然接受到了，但是，JS并没有办法解析使用这些数据；

前面在介绍Ajax属性时，有一个属性是专门接受XML数据的：

responseXML ：如果服务器端返回XML数据，使用responseXML进行接收

修改代码，使用responseXML接受数据；

xhr.onreadystatechange = function(){
    if(xhr.readyState==4){
        //弹出获取到的数据(接受XML数据)
        alert(xhr.responseXML);
    }
}

这里写图片描述

运行代码发现，我们得到的是一个XML的DOM对象；

JS解析XML

总结：
非标准模型中，键与值被解析为一个节点；
标准模型中，键与值被解析为上下级两个节点；

标准模型在获取到相应的节点值还需要进一步获取其子节点，然后才能获取到其值。

修改上述代码，完成功能，将所有用户名展示到浏览器界面

xhr.onreadystatechange = function(){
    if(xhr.readyState==4){
        //接受XML数据
        var x = xhr.responseXML;
        var admin = x.getElementsByTagName('admin');
        for(var i=0;i<admin.length;i++){
            //标准DOM解析查找方式
            var user = admin[i].
            getElementsByTagName('name')[0].
            childNodes[0].
            nodeValue;
            //将数据放入id为d的div标签中
            gid('d').innerHTML += user+'<br>';
        }
    }
}

小技巧：仔细思考发现，不管DOM树是否标准，都是DOM树

xhr.onreadystatechange = function(){
    if(xhr.readyState==4){
        //接受XML数据
        var x = xhr.responseXML;
        var admin = x.getElementsByTagName('admin');
        for(var i=0;i<admin.length;i++){
            var user = admin[i].
            getElementsByTagName('name')[0].innerHTML;//不管DOM树是否标准，都是DOM
            gid('d').innerHTML += user+'<br>';
        }
    }
}

JS如何操作HTML的DOM，就如何操作XML的DOM；