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. Eclipse新建/导入Gradle项目

    一.新建 1.[New]->[Project] 二.导入 1.[Import] 2. 参考: http://www.vogella.com/tutorials/EclipseGradle/art ...

  2. 如何修改ICO文件的尺寸

    使用Axialis IconWorkshop,该软件下载地址: http://www.xiazaiba.com/html/161.html 尺寸过大的ICO将无法作为应用程序的图标,如下图所示,这些素 ...

  3. License使用成本估算

    License使用成本估算 Licmanager系统的成本估算模块是以參数估算法为基础的计算机成本估算软件,内部包括多个成本估算关系式,综合反映了license的使用特征.产品项目特征以组织经济环境等 ...

  4. JavaScript解析顺序和变量作用域

    JavaScript基础之变量作用域. 一. 1.全局变量:全局变量的意思就是,在代码的不论什么地方都能够訪问到.注意:未定义 直接赋值的变量拥有全局属性. 2.局部变量:局部变量的意思就是,变量的作 ...

  5. HDU 1242 -Rescue (双向BFS）&amp;&amp;（ BFS+优先队列)

    题目链接:Rescue 进度落下的太多了,哎╮(╯▽╰)╭,渣渣我总是埋怨进度比别人慢...为什么不试着改变一下捏.... 開始以为是水题,想敲一下练手的,后来发现并非一个简单的搜索题,BFS做肯定出 ...

  6. hive学习笔记-表操作

    Hive数据类型 基本数据类型 tinyint,smallint,int,biging,float,double,decimal,char,varchar,string,binary,boolean, ...

  7. ArcGIS Runtime SDK for iOS中获取ImageServiceLayer的栅格值

    本文原创,转载请注明原创地址 http://blog.csdn.net/dongyu1009/article/details/37697389 用AGSImageServiceIdentifyTask ...

  8. java分页之页面分页

    import java.util.ArrayList; import java.util.List; /** * * @author cheney * * @date Aug 31, 2012 */ ...

  9. kentico9开始移除的webpart

    https://devnet.kentico.com/articles/fighting-featuritis https://blog.intercom.com/product-strategy-m ...

  10. Bing Maps进阶系列四：路由功能服务（RouteService）

    Bing Maps进阶系列四:路由功能服务(RouteService) Bing Maps提供的路由功能服务(RouteService)可以实现多方位的计算地图上的路线指示,路径行程等功能,比如说实现 ...