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的三种方法

    [1]$(function( ){ }): $(function(){ $("#name").click(function(){ //adding your code here } ...

  2. 【ZJOI2017 Round2练习&BZOJ4827】D1T3 gift（FFT）

    题意: 思路:可以看出题目所要最小化的是这样一个形式: 拆出每一项之后发现会变化的项只有sigma a[i]*b[i+t]与c^2,c*(a[i]-b[i]) c可以在外层枚举,剩下的只有sigma ...

  3. cpus Vs cpu period and cpu quota

    1.  https://docs.oracle.com/cd/E37670_01/E75728/html/section-zb1_wqw_gt.html To control a container' ...

  4. [bzoj1821][JSOI2010]部落划分（贪心）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1821 分析:题目看起来很吊,但只要贪心就行了,每次取相邻最近的两个点所在的集合合并知道 ...

  5. 多Tabs的横向滚动插件（支持Zepto和jQuery）

    一. 效果图 二. 功能介绍 1. 支持横向移动 2. 支持点击Tab后该Tab居中 3. 拉到最左边和最右边后依然可以拉动,只是tabs的移动距离变小. 三. 使用说明 1. 在你的html中添加T ...

  6. 登陆模块，这个是很重要的模块，有shiro和spring security专门的权限认证框架

    登陆模块,这个是很重要的模块,有shiro和spring security专门的权限认证框架

  7. 苹果iOS手机后门的”诊断功能论“不攻自破

    7月23日.苹果公司公布公告,题为"iOS:About diagnostic capabilities"("iOS:关于诊断功能").当中声称:iOS offe ...

  8. sizeof小览

    一.文章来由-一道面试题迁出的探究 我发现我已经形成一种习惯写来由了,以后看博客的时候能够让我回顾起为什么出现这个问题,我用什么方法解决的,既然形成习惯就让这个习惯保持下去吧.今天实验室师姐在看书,一 ...

  9. 具体解释kernel中watchdog 驱动程序

    watchdog不管在小系统还是大的project系统中都是必须存在的.在解决线程挂死.系统死循环等都用非常重要的应用,算是系统出问题恢复初始状态的救命稻草. 在kernel中wdt的应用不是非经常见 ...

  10. 51nod 1642 区间欧拉函数 && codeforce594D REQ

    画一下柿子就知道是求区间乘积乘区间内所有质因数的(p-1)/p(就是求欧拉的公式嘛) 看上去莫队就很靠谱然而时间O(nsqrt(n)logn)并不资瓷 还是离线,确定右端点,对于1~i的区间内的质因数 ...