JSON、XML語法、XML解析

• 1 JSON
• 1.1 JSON概述
• 1.2 JSON的使用
• 1.2.1 JSON物件
• 1.2.2 JSON陣列
• 1.2.3 JSON文件與物件的轉換
• 2 XML語法
• 2.1 XML概述
• 2.2 XML語法
• 3 XML解析
• 3.1 JS中的XML
• 3.1.1 XML DOM物件
• 3.1.2 XML DOM物件的支援
• 3.1.3 載入並解析XML字串
• 3.2 AJAX返回並解析XML
• 4 非同步請求錯誤彙總
• 5 AJAX應用程式碼檔案

1 JSON

1.1 JSON概述

JSON JavaScript Object notation，JavaScript物件表示法，原本是JavaScript建立物件的語法，獨立出來後作為獨立的字串資料表示法被Java、C#、C++、PHP等幾乎所有主流語言所支援。
JSON是輕量級的文字資料交換格式，被廣泛使用於儲存和交換文字資料領域，與XML類似，比XML更簡潔、更快、更容易解析

語法規則：
資料基本格式：名/值對
名稱用雙引號括起來，值：[]儲存陣列，{}儲存物件，""儲存字串

1.2 JSON的使用

1.2.1 JSON物件

輕量級資料交換格式，是以js物件的資料格式表現出來的JSON字串，描述物件寫在花括號{}中，多個名值對用逗號隔開，名稱必須使用雙引號包裹；最外層使用單引號包裹，因為是一個字串

1.2.2 JSON陣列

JSON字串描述陣列，
var jsonTxt = ‘[10, true, {“x”: 60, “y”:30}]’

1.2.3 JSON文件與物件的轉換

1. 使用eval()函式把JSON文字字串解析為JavaScript物件：
   把JSON文字字串放在()中，防止語法錯誤 var jsObj = eval("("+jsonTxt+")");
   eval()嚴格語法要求接收引數只能是string型別，而不能是String型別；不新增()會丟擲SyntaxError
2. 使用JSON.parse(string)方法來解析JSON字串來得到js物件； 使用JSON.stringify(jsObj)方法把JavaScript物件格式化為JSON字串
   var arr = JSON.parse(string);

2 XML語法

2.1 XML概述

1. XML定義
   XML是可擴充套件標記語言eXtensible Markup Language，類似於HTML的標記語言；
   設計宗旨是傳輸資料，而非顯示資料；
   XML的標籤沒有被預定義需要自行定義；
   XML是W3C的推薦標準；
2. XML用途
   XML應用於web開發許多方面，常用於簡化資料的儲存和共享；可以將資料從HTML分離；可以簡化資料共享、資料傳輸；

2.2 XML語法

1. XML宣告
   必須以<?xml開頭，以?>結束，宣告從文件0行0列位置開始；

宣告有三個屬性：
version：指定XML文件版本，必須屬性
encoding：指定當前文件的編碼，預設utf-8
standalone：指定文件獨立性，預設為yes，表示當前文件是獨立文件，no表示依賴外部檔案
2. XML語法
XML由雙標籤組成，即所有標籤必須有關閉標籤；
XML標籤對大小寫敏感，必須使用相同大小寫編寫和關閉標籤；
XML必須正確巢狀；
XML必須要有根元素，XML必須有一個元素是其他元素的父元素；
XMl屬性值必須加引號
3. 元素
XML元素指的是從開始標籤到結束標籤的部分；可以包含其他元素、文字等；
4. 屬性
XML元素可以在開始標籤包含屬性，屬性提供關於元素的額外資訊，或用於修飾元素；屬性值必須用引號引起來

3 XML解析

3.1 JS中的XML

3.1.1 XML DOM物件

1. IE瀏覽器通過ActiveXObject物件得到XML DOM物件：
   var xmlDoc = new
   ActiveXObject(“Microsoft.XMLDOM”);
2. 其它瀏覽器使用DOMParser物件獲取XML DOM物件：
   var parser = new DOMParser();
   var xmlDoc = parser.parserFromString(xmlFile, “application/xml”);

3.1.2 XML DOM物件的支援

XML DOM(XML Document Object Model)定義了訪問和操作XML文件的標準方法；
DOM把XML文件作為樹結構來檢視，通過DOM樹訪問所有元素；
xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue
第一個to元素；to元素第一個子元素；文字本身

使用該DOM操作獲取的陣列叫類陣列，可以使用下標查詢元素，但是不能使用陣列的API

3.1.3 載入並解析XML字串

if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parserFromString(txt, “application/xml”);
} else {
//IE8瀏覽器以下
xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
xmlDoc.async = “false”;
xmlDoc.loadXML(txt);
}

3.2 AJAX返回並解析XML

<script>
	function getXML(){
		var xhr= new XMLHttpRequest();
		xhr.onreadystatechange=function (){
			if (xhr.readyState == 4 && xhr.status==200) {
				//獲取xml物件
				var result = xhr.responseXML;
				var students = result.getElementsByTagName("st");
				var names =students[0].getElementsByTagName("name");
				console.log(names[0].innerHTML);
			}
		}
		xhr.open('get', "student.xml", true);
		xhr.send(null);
	}
</script>

4 非同步請求錯誤彙總

1. POST請求沒設定傳輸格式
   表現：不報錯，HTML正常傳送字串，但路由接收物件為空
   方法：設定請求頭xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
2. 繫結監聽事件直接寫readyState == 4
   表現：readyState is not defined
   方法：xhr.readyState ==4
3. 路由地址錯誤
   表現：網頁返回404
   方法：檢查路由器和對應路由

5 AJAX應用程式碼檔案

https://github.com/ES201614353248/AJAX