XML与JSON

在我们做各个系统和各个服务端的数据交互的时候会遇到其中两种数据格式,那就是xml和json,下面来谈谈这两种数据模式。

  • XML

  什么是xml?

XML 是可扩展标记语言(Extensible Markup Language)的缩写,其中的 标记(markup)是关键部分。

您可以创建内容,然后使用限定标记标记它,从而使每个单词、短语或块成为可识别、可分类的信息。您创建的文件,或文档实例 由元素(标记)和内容构成。元素的描述性越强,文档各部分越容易识别。

构建XML

         1XML 文档的第一行可以是一个 XML 声明。

                   可以将这个声明简单地写成 <?xml?>,或包含 XML 版本(<?xml version="1.0"?>),甚至包含字符编码,比如针对 Unicode 的 <?xml version="1.0" encoding="utf-8"?>。这个声明必须出现在文件的开头,声明之前不能写任何内容

         2、必须有一个根元素

                   在构建文档的时候,内容和其他标记必须放在根元素之间

                   例如:

<?xml version="1.0" encoding="UTF-8"?>
<recipe>
</recipe>
   3、命名元素

                   自定义标签:在xml中,先要为元素选择名称,然后再根据这些名称定义相应的内容

                   自定义规则:创建名称时,可以使用英文字母、数字和特殊字符,比如下划线(_)。

  1. 元素名中不能出现空格。
  2. 名称只能以英文字母开始,不能是数字或符号。(在第一个字母之后就可以使用字母、数字或规定的符号,或它们的混合)。
  3. 对大小写没有限制,但前后要保持一致,以免造成混乱。

更多元素:XML 文档可以使用内部不包含任何内容的空标记,这些标记可以表示为单个标记,而不是一组开始和结束标记。以类似于 HTML 的文件为例,里面的 <img src="mylogo.gif"> 是一个独立的元素。它不包含任何子元素或文本,因此它是一个空元素,您可以将它表示为 <img src="mylogo.gif" />(以一个空格和熟悉的终止斜杠结束)。

   4、嵌套元素:嵌套 即把某个元素放到其他元素的内部。这些新的元素称为子 元素,包含它们的元素称为父 元素。

任何子元素都要完全包含在其父元素的开始和结束标记内部。每个同胞(Sibling)元素必须在下一个同胞元素开始之前结束。

例如:正确嵌套的 XML 元素

<?xml version="1.0" encoding="UTF-8"?>
<recipe>
<recipename>Ice Cream Sundae</recipename>
<ingredlist>
<listitem>
<quantity>3</quantity>
<itemdescription>chocolate syrup or chocolate fudge</itemdescription>
</listitem>
<listitem>
<quantity>1</quantity>
<itemdescription>nuts</itemdescription>
</listitem>
<listitem>
<quantity>1</quantity>
<itemdescription>cherry</itemdescription>
</listitem>
</ingredlist>
<preptime>5 minutes</preptime>
</recipe>

         5、添加属性:属性是在使用元素时存储额外信息的一种方式。在同一个文档中,可以根据需要对每个元素的不同实例采用不同的属性值。在这里,单引号也会被解析成双引号。

例如:带有元素和属性的 XML 文件

<?xml version="1.0" encoding="UTF-8"?>
<recipe type="dessert">
<recipename cuisine="american" servings="1">Ice Cream Sundae</recipename>
<preptime>5 minutes</preptime>
</recipe>
可以根据需要使用任意数量的属性。要考虑需要添加到文档的细节。如果要对文档分类,属性尤其有用,比如按照菜谱的 type 进行分类。属性名可以包含在元素名中使用的字符,规则也是类似的,即字符之间不能带有空格,名称只能以字母开始。

    6、构造良好并且有效的 XML如果您根据结构规则创建 XML,就很容易实现构造良好的 XML。构造良好的 XML 即遵循所有 XML 规则创建的 XML:正确的元素命名,嵌套,属性命名等等。

   7、使用实体

实体 可以是文本短语或特殊字符。它们可以指向内部或外部。必须正确地声明和表示实体,以避免错误和确保正确显示。

您不能直接在内容中输入特殊字符。如果要在文本中使用符号,必须使用它的字符代码将它设置为实体。您可以将短语(比如公司名)设置为实体,然后就可以在内容中使用该实体。为了设置实体,必须先为它创建一个名称,然后将它输入到内容中,以 and 符号(&)开始,并以分号(;)结束 — 例如,&coname;。然后在 DOCTYPE 的方括号([])内部输入代码

例如:ENTITY这个代码识别表示实体的文本。

<!DOCTYPE MyDocs SYSTEM "filename.dtd" [ <!ENTITY coname "Rabid Turtle
Industries"
]>
使用实体可以避免反复输入相同的短语和信息。

 Xml的目的是表示复杂数据结构,在各个系统和客户端之间交互

  1. 怎么返回一个xml格式数据给前端
  2. 浏览器会按照xml去解析
  3. 获取某一个文件的内容
    $xmlString=file_get_contents("01.xml");
    
    Echo $xmlString;

xhr.responseXML  获取xml格式的数据

返回的是dom元素,就可以进行dom操作,去解析数据

把xml格式的数据转换成html格式 渲染

 

Xml缺点:体积大,解析困难

JSON 比 XML 更小、更快,更易解析

  • JSON

什么是 JSON

  1. JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  2. JSON 是轻量级文本数据交换格式
  3. JSON 独立于语言 
  4. JSON 具有自我描述性,更易理解
  5. JSON 是存储和交换文本信息的语法。类似 XML

 JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

类似 XML

  1. JSON 是纯文本
  2. JSON 具有“自我描述性”(人类可读)
  3. JSON 具有层级结构(值中存在值)
  4. JSON 可通过 JavaScript 进行解析
  5. JSON 数据可使用 AJAX 进行传输

相比 XML 的不同之处

  1. 没有结束标签
  2. 更短
  3. 读写的速度更快
  4. 能够使用内建的 JavaScript eval() 方法进行解析
  5. 使用数组
  6. 不使用保留字

为什么使用 JSON?

对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:

  • 使用 XML

  1. 读取 XML 文档
  2. 使用 XML DOM 来循环遍历文档
  3. 读取值并存储在变量中
  • 使用 JSON

  1. 读取 JSON 字符串
  2. 用 eval() 处理 JSON 字符串

SON 语法是 JavaScript 语法的子集。

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON 名称/值对

JSON 数据的书写格式是:名称/值对。

名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值: "firstName" : "John" 

这很容易理解,等价于这条 JavaScript 语句: firstName = "John" 

JSON 值

JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null

JSON 对象

JSON 对象在花括号中书写:

对象可以包含多个名称/值对: { "firstName":"John" , "lastName":"Doe" } 

这一点也容易理解,与这条 JavaScript 语句等价:

firstName = "John"
lastName = "Doe"

JSON 数组

JSON 数组在方括号中书写:

数组可包含多个对象:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
在上例中,对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人(有姓和名)的记录。

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

可以像这样访问 JavaScript 对象数组中的第一项:

employees[0].lastName;

返回的内容是: Gates 

可以像这样修改数据: employees[0].lastName = "Jobs"; 

JSON 文件

  • JSON 文件的文件类型是 ".json"
  • JSON 文本的 MIME 类型是 "application/json"

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。

JSON 实例 - 来自字符串的对象

创建包含 JSON 语法的 JavaScript 字符串:

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误: var obj = eval ("(" + txt + ")"); 

在网页中使用 JavaScript 对象:

<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

兼容性

Json不支持ie7以下

Json2.js插件用来解决低版本浏览器不支持json对象的问题

 

关于IE的兼容方面,了解即可。

 function XHR() {
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        }
        /*如果 try内的程序运行错误  抛出异常  捕捉异常  上面程序当中运行的错误*/
        catch(e) {
            /*在不同的IE版本下初始  ActiveXObject  需要传入的标识*/
            var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

            for (var i=0;i<IEXHRVers.length;i++) {
                try {
                    xhr = new ActiveXObject(IEXHRVers[i]);
                }
                catch(e) {
                    /*如果出现错误的时候  停止当次的循环*/
                    continue;
                }
            }
        }
        return xhr;
    }

 

json与前端的交互步骤

1、发post

2、接收到的是json格式的字符串

3、转换成json对象

4、把json对象转换成html代码

5、把html格式的代码渲染上

 

 

   

 

posted @ 2017-05-23 22:03  陈笑笑  阅读(263)  评论(0编辑  收藏  举报