HTTP&AJAX_3.JSON、XML語法、解析
JSON、XML語法、XML解析
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文件與物件的轉換
- 使用eval()函式把JSON文字字串解析為JavaScript物件:
把JSON文字字串放在()中,防止語法錯誤 var jsObj = eval("("+jsonTxt+")");
eval()嚴格語法要求接收引數只能是string型別,而不能是String型別;不新增()會丟擲SyntaxError - 使用JSON.parse(string)方法來解析JSON字串來得到js物件; 使用JSON.stringify(jsObj)方法把JavaScript物件格式化為JSON字串
var arr = JSON.parse(string);
2 XML語法
2.1 XML概述
- XML定義
XML是可擴充套件標記語言eXtensible Markup Language,類似於HTML的標記語言;
設計宗旨是傳輸資料,而非顯示資料;
XML的標籤沒有被預定義需要自行定義;
XML是W3C的推薦標準; - XML用途
XML應用於web開發許多方面,常用於簡化資料的儲存和共享;可以將資料從HTML分離;可以簡化資料共享、資料傳輸;
2.2 XML語法
- 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物件
- IE瀏覽器通過ActiveXObject物件得到XML DOM物件:
var xmlDoc = new
ActiveXObject(“Microsoft.XMLDOM”); - 其它瀏覽器使用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 非同步請求錯誤彙總
- POST請求沒設定傳輸格式
表現:不報錯,HTML正常傳送字串,但路由接收物件為空
方法:設定請求頭xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”); - 繫結監聽事件直接寫readyState == 4
表現:readyState is not defined
方法:xhr.readyState ==4 - 路由地址錯誤
表現:網頁返回404
方法:檢查路由器和對應路由