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——异步基础知识（二）的更多相关文章

  1. Ajax——异步基础知识（一）

    基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...

  2. Ajax——异步基础知识（三）

    封装异步请求 1.将函数作为参数进行使用 2.因为获取数据是在一个注册事件中获取的,所以只有事件触发的时候才会调用此函数 <!DOCTYPE html> <html lang=&qu ...

  3. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

  4. 菜鸟脱壳之脱壳的基础知识(二) ——DUMP的原理

    菜鸟脱壳之脱壳的基础知识(二)——DUMP的原理当外壳的执行完毕后,会跳到原来的程序的入口点,即Entry Point,也可以称作OEP!当一般加密强度不是很大的壳,会在壳的末尾有一个大的跨段,跳向O ...

  5. Dapper基础知识二

    在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. 2,如何使用Dapper?     首先Dapper是支持多种数据库的 ...

  6. python基础知识(二)

    python基础知识(二) 字符串格式化 ​ 格式: % 类型 ---- > ' %类型 ' %(数据) %s 字符串 ​ print(' %s is boy'%('tom')) ----> ...

  7. Java基础知识二次学习--第三章 面向对象

    第三章 面向对象   时间:2017年4月24日17:51:37~2017年4月25日13:52:34 章节:03章_01节 03章_02节 视频长度:30:11 + 21:44 内容:面向对象设计思 ...

  8. Java基础知识二次学习-- 第一章 java基础

    基础知识有时候感觉时间长似乎有点生疏,正好这几天有时间有机会,就决定重新做一轮二次学习,挑重避轻 回过头来重新整理基础知识,能收获到之前不少遗漏的,所以这一次就称作查漏补缺吧!废话不多说,开始! 第一 ...

  9. 快速掌握JavaScript面试基础知识(二)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

随机推荐

  1. [24点计算器][C++版本]无聊拿去玩

    特性:数字数量.目标答案不限,当然数据大了会很慢... 基本可以去除所有本质相同的表达式...至少能等出结果的数据规模可以.. 安卓:http://yun.baidu.com/s/1slCGILn 程 ...

  2. 次小生成树 判断 unique MST

    Given a connected undirected graph, tell if its minimum spanning tree is unique. Definition 1 (Spann ...

  3. Container/Injection 为什么会出现容器的思路，以后会有什么的趋势，未来是怎样的

    一.为什么会出现容器的思路? 容器概念始于 1979 年提出的 UNIX chroot,它是一个 UNIX 操作系统的系统调用,将一个进程及其子进程的根目录改变到文件系统中的一个新位置,让这些进程只能 ...

  4. 微信企业号开发：corpsecret究竟在哪块呢？

    开发微信企业号,获取ACCESS_TOKEN是必须的,但怎样获取ACCESS_TOKEN呢? 获取access_token=ACCESS_TOKEN" style="text-de ...

  5. Unity5.1 新的网络引擎UNET（十五） Networking 引用--中

    孙广东 2015.7.21 本节提供了与网络系统一起使用的组件的具体信息. 3.NetworkClient NetworkClient 是一个 HLAPI 类,管理网络连接到服务器 - - 相应着 U ...

  6. Erlang下与其他程序和语言的通信机制（3）

    这部分主要聊C Nodes.首先我们需要了解下Erlang的分布式系统: 分布式Erlang: 分布式Erlang是由一组相互通信的Erlang运行时组成,其中每一个运行时称为一个Node.不同Nod ...

  7. logistic regression教程1

    实现线性拟合 我们用python2.7实现上一篇的推导结果.请先安装python matplotlib包和numpy包. 具体代码如下: #!/usr/bin/env python #! -*- co ...

  8. 第一章--linux基础

    (一):linux系统根文件夹结构 Unix-like系统中的"文件系统"的概念包含两个意思,第一个是"根文件系统",第二个是"存储类文件系统&quo ...

  9. LeetCode 811. Subdomain Visit Count (子域名访问计数)

    题目标签:HashMap 题目给了我们一组域名,让我们把每一个域名,包括它的子域名,计数. 遍历每一个域名,取得它的计数,然后把它的所有子域名和它自己,存入hashmap,域名作为key,计数作为va ...

  10. 【Unity】用Shader编程实现3D红心

    有些形状,即使没有3D美术设计师提供模型,也能够用代码生成. 对于想保持原创性不想借用他人模型的独立开发人员来说,这无非是一个非常重要的途径. 今天献给大家的是用Shader编程实现的一颗红心,寄托下 ...