Ajax——异步基础知识（二）

XML数据格式

首行必须是版本号和格式等信息

<?xml version="1.0" encoding="utf-8" ?>

最外层需要一个根节点进行包裹
标签有开头有结尾，效率低下
php中设置header需要将content-type设置成text/xml

header("content-type:text/xml;charset=utf-8");

浏览器读取XML文件是用ajax.responseXML
浏览器接收到的是文档树，可以用访问节点的方式获取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align: center;
        }
        div{
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }
        td{
            border: 1px solid #000;
        }
        table{
            text-align: center;
            width: 500px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<div></div>
<button>获取xml文件数据</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        var ajax = new XMLHttpRequest();
        ajax.open('get', '03.php');
        ajax.send();
        ajax.onreadystatechange = function (ev) {
            if (ajax.readyState=4&&ajax.status==200) {
                var msg=ajax.responseXML;
                console.log(msg);
                var str="";
                str+="<table>";
                var persons=msg.querySelectorAll('person');
                for (var i = 0; i < persons.length; i++) {
                    str+="<tr>";
                    str+="<td>"+persons[i].children[0].innerHTML+"</td>";
                    str+="<td>"+persons[i].children[1].innerHTML+"</td>";
                    str+="<td>"+persons[i].children[2].innerHTML+"</td>";
                    str+="</tr>";
                }
                str+="</table>"
                var div=document.getElementsByTagName("div")[0];
                div.innerHTML=str;
            }
        }
    }
</script>
</body>
</html>

<?php
  header("content-type:text/xml;charset=utf-8");
  echo file_get_contents('files/01.xml');
?>

<?xml version="1.0" encoding="utf-8" ?>
<personXML>
    <person>
        <name>zs1</name>
        <age>17</age>
        <sex>nan</sex>
    </person>
    <person>
        <name>zs2</name>
        <age>18</age>
        <sex>nan</sex>
    </person>
    <person>
        <name>zs3</name>
        <age>19</age>
        <sex>nan</sex>
    </person>
</personXML>

JSON数据格式

格式上可以是标准的json字符串，也可以组成数组

[
  {"name":"zs1","age":17,"sex":"nan"},
  {"name":"zs2","age":17,"sex":"nan"},
  {"name":"zs3","age":17,"sex":"nan"}
]

基本上所有语言都可以将JSON字符串转化为该语言的对象进行访问

var msg = JSON.parse(ajax.responseText);//将json字符串转化为js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            text-align: center;
        }

        div {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }

        td {
            border: 1px solid #000;
        }

        table {
            text-align: center;
            width: 500px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<div></div>
<button>点击获取json数据</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        var ajax = new XMLHttpRequest();
        ajax.open('post', '04.php');
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send();
        ajax.onreadystatechange = function (ev) {
            if (ajax.readyState == 4 && ajax.status == 200) {
                console.log(ajax.responseText);
                var msg = JSON.parse(ajax.responseText);
                var str = "";
                str += "<table>";
                for (var i = 0; i < msg.length; i++) {
                    str += "<tr>";
                    str += "<td>" + msg[i]["name"] + "</td>";
                    str += "<td>" + msg[i]["age"] + "</td>";
                    str += "<td>" + msg[i]["sex"] + "</td>";
                    str + "</tr>";
                }
                str += "</table>";
                var div = document.getElementsByTagName("div")[0];
                div.innerHTML = str;
            }
        }
    }
</script>
</body>
</html>

<?php
  header("content-type:text/html;charset=utf-8");
  echo file_get_contents('files/02.json');
?>

[
  {"name":"zs1","age":17,"sex":"nan"},
  {"name":"zs2","age":17,"sex":"nan"},
  {"name":"zs3","age":17,"sex":"nan"}
]