找回密码
 立即注册

QQ登录

只需一步,快速开始

微信公众号开发资源

关注:848

所属分类: 微信开发 微信公众号开发资源

本版块为微信公众号开发教程与公众号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] XML and JSON

[复制链接]
查看: 5333|回复: 6
最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
 楼主| 发表于 2016-3-29 21:16:08 | 显示全部楼层 |阅读模式
1.XML - 集中在企业级应用软件中
   * 基本内容
     * XML
       * 全称为Extensible Markup Language
       * 译为可扩展标记语言
     * HTMLXHTMLDHTMLXML的区别(关系)?
       * HTML - 超文本标记语言
       * XHTML - 严格的HTML
       * XML - 可扩展标记语言
       * DHTML - 动态的HTML
     * BOM
              * DOM
     * 用途
       * 配置文件 - 多用于服务器端技术开发
       * 存储(传输)数据 - 以文件方式存储
     * XMLHTML的区别?
       * HTML - 元素是预定义的
       * XML - 元素是自定义的
   * XML的基础语法
     * XML文件
       * 具有扩展名为".xml"
       * 声明
         <?xml version="1.0" encoding="UTF-8" ?>
             * version - 定义当前XML文件的版本
             * encoding - 定义当前XML文件的编码
             * 注意 - XML的声明必须是 0 0
     * 元素
       * 根元素
         * 必须是起始元素 - 有开始元素有结束元素
                 * 根元素只有拥有一个
       * 其他元素
         * 写法 - <元素名></元素名> | <元素名 />
例如:
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <china>
  3. <province name="湖北省">
  4. <city>武汉市</city>
  5. <city>荆州市</city>
  6. <city>襄阳市</city>
  7. <city>宜昌市</city>
  8. <city>黄冈市</city>
  9. </province>
  10. <province name="湖南省">
  11. <city>长沙市</city>
  12. <city>岳阳市</city>
  13. <city>株洲市</city>
  14. <city>娄底市</city>
  15. <city>张家界</city>
  16. </province>
  17. </china>
复制代码

页面效果:
图片1.png
     * 属性
     * DOM解析XML - DOM主要解析HTML|XML
     * 步骤
       * XML解析器 - XML字符串 转换成 XML DOM对象
         * XML字符串 - 符合XML格式要求的字符串类型的数据
              * 创建 XML 解析器
             function getXml(xmlString){
                var xmlDoc = null;//定义XML DOM对象
              if(window.DOMParser){//其他浏览器
                 var parser = new DOMParser();//创建解析器
                          xmlDoc = parser.parseFromString(xmlString,"text/xml");//利用解析器进行解析
              }else{//IE浏览器
                 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                           xmlDoc.async = false;
                           xmlDoc.loadXML(xmlString);
              }
              return xmlDoc;
            }
       * 利用DOM解析XML DOM对象
         * 与解析HTML基本保持一致
         * 注意
       * 根据最新标准规范,不允许解析本地XML文件
例如:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>DOM解析XML字符串</title>
  6. </head>
  7. <body>
  8.   <script>
  9. // 1. 定义 XML 字符串
  10. var xmlString = "<province name='湖北省'><city>武汉市</city><city>荆州市</city><city>宜昌市</city><city>黄冈市</city><city>咸宁市</city></province>";
  11. // 2. 通过 XML 解析器进行解析 - 返回XML DOM对象
  12. var xmlDoc = getXml(xmlString);
  13. // 3. 测试
  14. console.log(xmlDoc);
  15. // 4. 利用DOM解析XML DOM对象
  16. var provinces = xmlDoc.getElementsByName("湖北省");
  17. console.log(provinces[0].getAttribute("name"));
  18. var cities = provinces[0].getElementsByTagName("city");
  19. for(var i=0;i<cities.length;i++){
  20. console.log(cities[i].firstChild.nodeValue);
  21. }
  22. // 创建XML解析器
  23. function getXml(xmlString){
  24. var xmlDoc = null;//定义XML DOM对象
  25. if(window.DOMParser){//其他浏览器
  26.     var parser = new DOMParser();//创建解析器
  27. xmlDoc = parser.parseFromString(xmlString,"text/xml");//利用解析器进行解析
  28. }else{//IE浏览器
  29.     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  30. xmlDoc.async = false;
  31. xmlDoc.loadXML(xmlString);
  32. }
  33. return xmlDoc;
  34. }
  35.   </script>
  36. </body>
  37. </html>
复制代码

页面效果:
图片2.png
   * AJAX中的XML格式
     * 客户端向服务器端发送请求数据
         * 客户端向服务器端发送数据格式为XML
         * 构建的是符合XML格式的字符串类型的数据
     * 服务器端接收客户端发送的数据格式为XML
        * 通过$_GET$_POST进行接收 - 字符串类型
            * 利用DOMXML进行解析
           * DOMDocument对象
             * 创建DOM对象 - new DOMDocument();
             * loadXML()方法 - 读取XML的字符串
             * 方法
               * getElementById()
               * getElementsByTagName()
           * DOMElement对象
             * 方法
               * getAttribute()
               * setAttribute()
               * removeAttribute()
           * DOMNode对象
             * 方法
               * appendChild()
               * insertBefore()
               * removeChild()
               * replaceChild()
             * 属性
               * nodeName  nodeType  nodeValue
             * 遍历
                * parentNode
                    * childNodes
                    * firstChild
                    * lastChild
                    * previousSibling
                    * nextSibling
                * textContent
     * 服务器端向客户端进行响应数据
         * 服务器端向客户端发送数据格式为XML
         * 构建符合XML格式的字符串类型数据
             * 注意 - 设置响应头信息
             header("Content-Type:text/xml");
      * 客户端接收服务器端发送的数据格式为XML
         * 利用XMLHttpRequest对象的responseXML属性进行接收
            * 通过DOM进行解析
例如:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>AJAX中的XML格式</title>
  6. </head>
  7. <body>
  8.   <input type="button" id="btn" value="XML格式的AJAX">
  9.   <script>
  10. var btn = document.getElementById("btn");
  11. btn.onclick = function(){
  12. var xhr = getXhr();
  13. xhr.open("post","test.php");
  14. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  15. /*
  16.    如何向服务器端发送XML格式的数据内容?
  17.    * 构建成符合XML格式的字符串数据
  18.    * 请求数据格式一定是 name=value&name=value
  19. */
  20. xhr.send(null);
  21. xhr.onreadystatechange = function(){
  22. if(xhr.readyState == 4 && xhr.status == 200){
  23. var data = xhr.responseXML;
  24. var uname = data.getElementsByTagName("names")[0];
  25. var pwd   = data.getElementsByTagName("pwd")[0];
  26. console.log(uname.firstChild.nodeValue +":"+pwd.firstChild.nodeValue);
  27. }
  28. }
  29. }
  30. // 创建Ajax的核心对象(不兼容IE6)
  31. function getXhr(){
  32. var xhr = null;//定义核心对象
  33. if(window.XMLHttpRequest){//其他浏览器
  34. xhr = new XMLHttpRequest();
  35. }else{//IE浏览器
  36. xhr = new ActiveXObject("Microsoft.XMLHttp");
  37. }
  38. return xhr;
  39. }
  40.   </script>
  41. </body>
  42. </html>
复制代码

下面是php文件(test.php):
  1. <?php
  2. /*
  3.    1. 构建XML格式的数据,响应给客户端
  4.      * 构建一个符合XML格式的字符串类型数据
  5. * 注意 - 设置响应头信息
  6.    Content-Type:text/xml
  7. */
  8. header("Content-Type:text/xml");
  9. echo "<user><names>zhangwuji</names><pwd>12345</pwd></user>";
  10. ?>
复制代码

下面是页面效果:
图片3.png
2.JSON - 互联网开发中
   * 基本内容
     * 是源于JavaScript,发展独立的数据格式
     * JSON
       * 全称为JavaScript Object Notation
       * 定义:是一种轻量级的数据交换格式
     * 特点
       * 易于程序员阅读和编写
       * 易于计算机解析和生成
    * 结构
     * “名称/值”对的集合 - JavaScript就是Object
     * 值的有序列表 - JavaScript就是Array
   * JSONvalue值的数据类型
     * Number - 数字
     * String - 字符串
     * Array - 数组
     * Object - 对象
     * Boolean - 布尔
     * null
例如:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JSON的使用方式</title>
  6. </head>
  7. <body>
  8.   <script>
  9. var xs = {
  10. "wuxia" : {
  11. "yttlj" : [
  12. {
  13. name : "张无忌",
  14. age : 18,
  15. job : "教主"
  16. },
  17. {
  18. name : "周芷若",
  19. age : 18,
  20. job : "掌门"
  21. },
  22. {
  23. name : "赵敏",
  24. age : 18,
  25. job : "郡主"
  26. }
  27. ],
  28. "xajh" : [
  29. {
  30. name : "令狐冲",
  31. age : 18,
  32. job : "掌门"
  33. },
  34. {
  35. name : "任盈盈",
  36. age : 18,
  37. job : "圣女"
  38. },
  39. {
  40. name : "东方不败",
  41. age : 18,
  42. job : "教主"
  43. }
  44. ]
  45. },
  46. "yanqing" : {
  47. "hzgg" : [
  48. {
  49. name : "五阿哥",
  50. age : 18,
  51. job : "阿哥"
  52. },
  53. {
  54. name : "小燕子",
  55. age : 18,
  56. job : "格格"
  57. },
  58. {
  59. name : "紫薇",
  60. age : 18,
  61. job : "丫鬟"
  62. }
  63. ],
  64. "qssymm" : [
  65. {
  66. name : "陆依萍",
  67. age : 18,
  68. job : "舞女"
  69. },
  70. {
  71. name : "何书桓",
  72. age : 18,
  73. job : "记者"
  74. },
  75. {
  76. name : "雪姨",
  77. age : 18,
  78. job : "家庭主妇"
  79. }
  80. ]
  81. }
  82. }
  83. // 在JavaScript中如何解析JSON
  84. console.log(xs.wuxia.xajh[1].name);
  85. console.log(xs['wuxia']['xajh'][1]['name']);
  86.   </script>
  87. </body>
  88. </html>
复制代码

页面效果:
图片4.png
   * AJAX中的JSON格式
     * 客户端向服务器端发送数据格式为JSON
       * 客户端如何构建JSON格式的数据
         * 构建符合JSON格式的字符串类型
            * 注意 - 由于服务器端技术为PHP
           * 构建字符串外层使用单引号
           * 构建字符串内部使用双引号
       * 服务器端如何接收并解析JSON格式的数据
         * 通过$_GET$_POST进行接收 - 字符串类型
           * 利用json_decode()函数进行转换
             * Object(对象) - json_decode(jsonString)
             * Array(数组) - json_decode(jsonString,true)
           * 解析数组即可
     * 服务器端向客户端发送数据格式为JSON
       * 服务器端如何构建JSON格式的数据
         * 构建符合JSON格式的字符串类型
           * 使用json_encode()函数将PHP变量转换为JSON格式
             * PHP中的Object
             * PHP中的Array
       * 客户端如何接收并解析JSON格式的数据
         * 使用XMLHttpRequest对象的responseText属性进行接收
           * 利用eval()函数进行转换
             * 不使用"()",eval()函数当做空的语句块
             * 使用"()",eval()函数强制进行转换
例如:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>AJAX中的JSON格式</title>
  6.   <script src="mytools.js"></script>
  7. </head>
  8. <body>
  9.   <input type="button" id="btn" value="AJAX中的JSON">
  10.   <script>
  11. var btn = document.getElementById("btn");
  12. btn.onclick = function(){
  13. var xhr = getXhr();
  14. xhr.open("post","test.php");        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  15. /*
  16.    客户端如何构建JSON格式的数据内容
  17.    * (错误)通过JavaScript定义Object或Array之一
  18.    * (正确)构建符合JSON格式的字符串
  19.      * 构建字符串外层使用单引号
  20. * 构建字符串内部使用双引号
  21. */
  22. var user = '{"name":"zhangwuji","pwd":12345}';
  23. xhr.send("user="+user);
  24. xhr.onreadystatechange = function(){
  25. if(xhr.readyState == 4 && xhr.status == 200){
  26. // 接收的数据类型为字符串
  27. var data = xhr.responseText;
  28.                 console.log(data);
  29. var obj = eval("("+data+")");
  30.                 console.log(obj);
  31. console.log(obj.name+":"+obj.pwd);
  32. }
  33. }
  34. }
  35.   </script>
  36. </body>
  37. </html>
复制代码

下面是php文件(test.php):
  1. <?php
  2. /*
  3.     接收客户端发送的JSON格式的请求数据
  4. * 接收也是符合JSON格式的字符串
  5. * PHP解析(转换)JSON格式的字符串
  6.   json_decode()函数进行转换
  7.   * 接受一个 JSON 格式的字符串并且把它转换为 PHP 变量
  8. */
  9. $user = $_POST['user'];
  10. $arr = json_decode($user,true);

  11.     echo json_encode($arr);
  12. ?>
复制代码

下面是页面效果:
图片5.png
* AJAX中的数据格式
   * TEXT(文本)格式
     * 优点
       * 简单
       * 比较轻量
     * 缺点
       * 不能构建过于复杂结构
       * 不易解析
   * XML格式
     * 优点
       * 结构化数据
       * 比较灵活
     * 缺点
       * 数据包大
       * 解析复杂
   * JSON格式
     * 优点
       * 比较轻量
       * 简单
       * 解析容易
     * 缺点
       * 不易过于复杂的嵌套

回复

使用道具 举报

最佳答案
0 

0

主题

51

帖子

311

积分

略知一二

积分
311
发表于 2016-4-9 16:21:52 | 显示全部楼层
谢谢赐教
回复

使用道具 举报

最佳答案
0 

0

主题

41

帖子

678

积分

专家路上

积分
678
发表于 2016-4-18 14:16:55 | 显示全部楼层

非常好的文章,学习学习
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 22:14:09 | 显示全部楼层
这个必须得看看了 谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 23:34:01 | 显示全部楼层
感谢分享啊啊~~~~~
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-8 00:13:46 | 显示全部楼层
看起来不错,~!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

50

积分

等待验证会员

积分
50
发表于 2018-12-6 16:02:53 | 显示全部楼层
06093717493744.png

06093842756784.png


06094045649198.png


06094209751060.png


06094314777971.png


32225669_201812050725270868481026.jpg


32225669_201812050725270571388302.jpg



回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com