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":,"sex":"nan"},

  {"name":"zs2","age":,"sex":"nan"},

  {"name":"zs3","age":,"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":,"sex":"nan"},

  {"name":"zs2","age":,"sex":"nan"},

  {"name":"zs3","age":,"sex":"nan"}

]

巴特西

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

最新文章

热门文章