ajax技术xml类型的实现

1、在php代码中必须加 header(‘Content-type:text/xml‘); 设置相应头，告诉他是xml类型的相应

2、ajax中如果是post请求，在send之前要设置请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

一些需要知道的

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：文本节点的值

一个简单的数据库输出案例

html

<script>
    window.onload=function(){
         document.getElementById(‘btn‘).onclick=function(){
            var xhr=new XMLHttpRequest();
            var data=‘che=1‘;
            xhr.open(‘post‘,‘demo01.php‘);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(data);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){

                    var xml=xhr.responseXML;
                    var user=xml.getElementsByTagName(‘user‘);
                    for(var i=0;i<user.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=user[i].childNodes[0].childNodes[0].nodeValue;
                        //创建密码td元素
                        var tdPassword=document.createElement(‘td‘);
                        tdPassword.innerHTML=user[i].childNodes[1].childNodes[0].nodeValue;
                        //创建图片名td元素，并将图片名追加到图片名td元素中
                        var tdPhoto=document.createElement(‘td‘);
                        tdPhoto.innerHTML=user[i].childNodes[2].childNodes[0].nodeValue;
                        //将4个td元素追加到tr元素
                        tr.appendChild(tdId);
                        tr.appendChild(tdName);
                        tr.appendChild(tdPassword);
                        tr.appendChild(tdPhoto);
                        document.getElementsByTagName(‘TBODY‘)[0].appendChild(tr);
                    }

                }
            }
         }
    }
</script>

<table width=‘300px‘ style=‘border:1px solid #336699‘>
<tr>
<td>ID</td><td>用户名</td>
<td>密码</td><td>图片名</td>
</tr>
</table>
<button id=‘btn‘>计算</button><br/>

php

mysql_connect(‘127.0.0.1‘,‘root‘,‘root‘);
$sql=‘select * from user‘;
mysql_select_db(‘demo‘);
mysql_query(‘set names utf-8‘);
$result=mysql_query($sql);
$str=‘<root>‘;
while($row=mysql_fetch_assoc($result)){
    $str.=‘<user>‘;
    $str.=‘<id>‘.$row[‘id‘].‘</id>‘;
    $str.=‘<username>‘.$row[‘username‘].‘</username>‘;
    $str.=‘<password>‘.$row[‘password‘].‘</password>‘;
    $str.=‘<photo>‘.$row[‘photo‘].‘</photo>‘;
    $str.=‘</user>‘;
}
$str.=‘</root>‘;
header(‘Content-type:text/xml‘);
echo $str;