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格式的代碼渲染上

相關文章
相關標籤/搜索