ajax 使用xml传输数据（ajax与xml）

1、为什么xml

需要服务器端返回少量的、单一的数据

用户名是否可用 1 / 0

返回两个数的和 400

登录是否成功 true/false

数据插是否成功 true/false

如果我们需要从服务器端返回大量、复杂的数据，如何实现？

xml：服务器端返回xml数据

json：服务器端返回json数据

2、格式：

(1)php解析xml

$dom=new DOMDocument();
$dom->loadXML($str);
$nd=$dom->getElementsByTagName("TagName");
$value=$nd->item(0)->nodeValue
$xml=simplexml_load_string($str);
$first = $xml->first;
$second= $xml->second;

(2)js解析xml

var xml=xmlHttp.responseXML;
node=xml.getElementsByTagName("TagName");
node[0].childNodes[0].nodeValue;

3 、案例1：

实现两个数的四则运算

HTML代码:

<script language="javascript" src="public.js"></script>
<script>
window.onload=function(){
        $('btnOk').onclick=function(){
        var f=$('first').value;
        var s=$('second').value;
        var data='first='+f+'&second='+s;
        var xhr=createxhr();
        xhr.open('post','demo01.php');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                        //xml --->xml dom对象
                        var xml=xhr.responseXML;
                        var str=xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue;
                        str+='|'+xml.getElementsByTagName('jian')[0].childNodes[0].nodeValue;
                        str+='|'+xml.getElementsByTagName('cheng')[0].childNodes[0].nodeValue;
                        str+='|'+xml.getElementsByTagName('chu')[0].childNodes[0].nodeValue;
                        $('result').innerHTML=str;
                }
        };
        xhr.send(data);
        };
};
</script>
<input type="text" id="first" /><br>
<input type="text" id='second' /><br>
<div id='result'></div>
<input type="button" id="btnOk" value="计算" />

理解:

var xml=xhr.responseXML; 得到ajax返回的xmldom对象

xml.getElementsByTagName('jia')[0] ：是表示获取jia这个元素

xml.getElementsByTagName('jia')[0].childNodes：表示获取jia元素下的所有子节点

xml.getElementsByTagName('jia')[0].childNodes[0] ：表示获取jia元素下的唯一文本节点

xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue：文本节点的值

php代码:

<?php
$first=$_POST['first'];
$second=$_POST['second'];
$result1=$first+$second;
$result2=$first-$second;
$result3=$first*$second;
$result4=$first/$second;
//要想返回xml，首先连接一个xml格式的字符串
$str='<root>';
$str.='<jia>'.$result1.'</jia>';
$str.='<jian>'.$result2.'</jian>';
$str.='<cheng>'.$result3.'</cheng>';
$str.='<chu>'.$result4.'</chu>';
$str.='</root>';
/*$str=<<<str
<root>
<jia>$result1</jia>
</root>
str;*/
header('Content-type:text/xml');
echo $str;

理解:

得到结果后，需要使用字符串连接成一个xml格式的字符串，如：需要一个根元素，下面子元素，最后是具体的值，

连接时也可以使用<<<str创建xml字符串

str;

输出这个字符串时，默认的响应内容类型：text/html，也就是说客户端仍把代码当做html来进行解析，

ajax对象的responeXML是不能得到一个xmldom对象，必须设置响应头类型为:text/xml,其代码:header('Content-type:text/xml');

public.js:

function createxhr() {
        /*var xhr;
        var str = window.navigator.userAgent;
        if (str.indexOf('MSIE') > 0) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
        } else {
        xhr = new XMLHttpRequest();
        }
        return xhr;*/

        try{return new XMLHttpRequest();}catch(e){}
        try{return new ActiveXObject('Microsoft.XMLHTTP'); }catch(e){}
        alert('请更换浏览器！');
        }
        function $(id){
        return document.getElementById(id);
}

4、案例2

在页面加载之后，将mysql数据库goods表中所有数据显示在表格中

<root>
<goods>
<name>222</name>
<price>55.00</price>
</goods>
<goods>
<name>诺 E661</name>
<price>205.00</price>
</goods>
<goods>
<name>诺 E661</name>
<price>200.00</price>
</goods>
</root>

HTML代码:

<style>
tr{
background-color:#ffffff;
height:30px;
font-size:12px;
}
</style>
<script language="javascript" src='public.js'></script>
<script>
window.onload=function(){
        var xhr=createxhr();
        xhr.open('post','demo02.php');
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200)
                        var xml=xhr.responseXML;
                        var goods=xml.getElementsByTagName('goods');
                        for(var i=0;i<goods.length;i++){
                        //创建行元素
                        var tr=document.createElement('tr');
                        //创建序号td元素
                        var tdID=document.createElement('td');
                        tdID.innerHTML=i+1;
                        //创建名称td元素
                        var tdName=document.createElement('td');
                        tdName.innerHTML=goods[i].childNodes[0].childNodes[0].nodeValue;
                        //创建价格td元素
                        var tdPrice=document.createElement('td');
                        tdPrice.innerHTML=goods[i].childNodes[1].childNodes[0].nodeValue;
                        //将三个td追加到tr元素
                        tr.appendChild(tdID);
                        tr.appendChild(tdName);
                        tr.appendChild(tdPrice);
                        document.getElementsByTagName('TBODY')[0].appendChild(tr);
                }
};
xhr.send(null);
}
</script>
<table id='tbData' width="800" cellspacing="1" cellpadding="4" bgcolor="#336699">
<tr>
<td>序号</td>
<td>商品名称</td>
<td>商品价格</td>
</tr>
</table>

理解:

创建行元素，

创建单元格元素

将单元格元素追加到行元素中

将行元素追加到表格元素中

php代码:

<?php
        //查询goods表中所有数据并返回
        $sql="select name,price from goods order by id desc";
        mysql_connect('localhost','root','111111');
        mysql_select_db('shop');
        mysql_query('set names gb2312');
        $result=mysql_query($sql); //发送sql语句
        $num=mysql_num_rows($result); //总行数
        $str='<root>';
        for($i=0;$i<$num;$i++){
        $row=mysql_fetch_assoc($result);
        $str.='<goods>';
        $str.='<name>'.iconv('gb2312','utf-8',$row['name']).'</name>';
        $str.='<price>'.$row['price'].'</price>';
        $str.='</goods>';
        }
        $str.='</root>';
        header('Content-Type:text/xml');
        echo $str;
?>

理解:

查询goods表中所有数据

连接xml格式的字符串

表中有多少条数据

xml字符串就有几对goods标签

其中, name字段出现中文，所以需要进行转码 gb2312--utf-8

最后, 输出xml字符串