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. JQuery中如何重置(reset)表单(且清空隐藏域)

    由于JQuery中,提交表单是像下面这样的: 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下, ...

  2. wait、notify应用场景（生产者-消费者模式）

    Java实现生产者消费者的方式有:wait && notify.BlockingQueue.Lock && Condition等 wait.notify注意事项:(1) ...

  3. 使用系统存储过程来监控SQLServer进程和会话具体解释

     承接上文,本文讲述怎样使用系统存储过程来监控系统. SQLServer相同也提供了一系列系统存储过程用于监控SQLServer,获取当前进程.会话.请求以及锁定的具体信息.本文将演示系统存储过程 ...

  4. sqlite 数据库 相关知识

    一基本简单介绍 SQLite 是一个自持的(self-contained).无server的.零配置的.事务型的关系型数据库引擎.由于他非常小,所以也能够作为嵌入式数据库内建在你的应用程序中. SQL ...

  5. [译]使用AssetBundle Manader

    AssetBundle and the AssetBundle Manager 介绍 AssetBundle允许从本地或者远程服务器加载Assets资源,利用AssetBundles技术,Assets ...

  6. QMap QHash的选择（QString这种复杂的比较，哈希算法比map快很多）

    QMap QHash有近乎相同的功能.很多资料里面介绍过他们之间的区别了.但是都没有说明在使用中如何选择他们. 实际上他们除了存储顺序的差别外,只有key操作的区别. 哈希算法是将包含较多信息的“ke ...

  7. IOS 数据存储之 Core Data具体解释

    Core Date是ios3.0后引入的数据持久化解决方式,它是是苹果官方推荐使用的.不须要借助第三方框架.Core Date实际上是对SQLite的封装.提供了更高级的持久化方式.在对数据库操作时, ...

  8. UITextView获取光标位置

    UITextRange *range = textView.selectedTextRange; //光标位置 CGRect  rect = [textView caretRectForPositio ...

  9. socket实现web server

    http://blog.csdn.net/u012734441/article/details/44801523 很好的一个例子,现在java程序原开发web服务端程序基本上都使用现成的web框架,这 ...

  10. （多项式）因式分解定理（Factor theorem）与多项式剩余定理（Polynomial remainder theorem）（多项式长除法）

    (多项式的)因式分解定理(factor theorem)是多项式剩余定理的特殊情况,也就是余项为 0 的情形. 0. 多项式长除法(Polynomial long division) Polynomi ...