XML与JSON

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

  • XML

  什么是xml?html

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

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

构建XMLweb

         1XML 文档的第一行能够是一个 XML 声明。编程

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

         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与前端的交互步骤

一、发post

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

三、转换成json对象

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

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

相关文章
相关标签/搜索