在企業(yè)開發(fā)中，前端和后端交換數據的時候，一般都不會直接返回字符串砂轻，因為字符串容易出問題。而是返回XML或者JSON格式的數據琢锋。
XML
XML 可擴展標記語言
XML 被設計用來傳輸和存儲數據。
- XML格式：
第一行是 XML 聲明：<?xml version="1.0" encoding="UTF-8"?>呢灶，它定義 XML 的版本 (1.0) 和所使用的編碼 吴超。
在XML中數據都是放在一對標簽中的，標簽名可以隨意寫鸯乃。如下：
下一行描述文檔的根元素<note>
接下來 4 行描述根的 4 個子元素（to, from, heading 以及 body）
最后一行定義根元素的結尾
注意：所有的數據必須有個根標簽鲸阻，如上note；
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
XML 文檔形成一種樹結構
XML 文檔必須包含根元素缨睡。該元素是所有其他元素的父元素鸟悴。
XML 文檔中的元素形成了一棵文檔樹。這棵樹從根部開始奖年，并擴展到樹的最底端细诸。
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
以上差不多就是XML的固定格式。
那么后端如何返回一個XML數據給我們前端呢
JS端
window.onload = function(){
var btn = document.querySelector(".btn");
btn.onclick = function(){
// 此處ajax是我自己封裝的ajax方法
ajax({
type:"GET",
url:"ajax-xml.php",
success:function(xhr){//xhr表示調用時傳來的異步對象
// 通過xhr.ressponseXML來返回數據
console.log(xhr.ressponseXML);//返回的是xml里的#document陋守，可以使用DOM相關的方法來操作震贵。
var res = xhr.ressponseXML;
console.log(res.querySelector("note").innerHTML);//比如這里查看note元素里面的內容鹏浅。
},
error:function(xhr){//xhr表示調用時傳來的異步對象
console.log(xhr.status);
}
});
}
}
PHP端
<?php
header(string:"content-type:text/xml;charset="utf-8");
echo file_get_contents(filename:"info.xml");
XML端
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
1.注意：如果執(zhí)行結果有中文或者PHP中需要返回XML數據，那必須在PHP的文件內的頂部設置header(string:"content-type:text/xml;charset="utf-8");
2.xhr表示調用時傳來的異步對象
3.通過xhr.ressponseXML來獲取返回的數據
4.返回的是xml里的#document屏歹，可以使用DOM相關的方法來操作。
JSON
簡介
JSON：JavaScript 對象表示法（JavaScript Object Notation）之碗。
JSON 是存儲和交換文本信息的語法蝙眶。類似 XML。
JSON 比 XML 更小褪那、更快幽纷，更易解析。是輕量級的文本數據交換格式
JSON 獨立于語言
JSON 具有自我描述性博敬，更易理解
JSON 使用 JavaScript 語法來描述數據對象友浸，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言偏窝。
該格式由 Douglas Crockford 提出收恢。
被設計用于可讀的數據交換。
它是從 JavaScript 腳本語言中演變而來祭往。
文件名擴展是 .json伦意。
JSON 的網絡媒體類型是 application/json。
統(tǒng)一標示符類型（Uniform Type Identifier）是 public.json硼补。
JSON 語法規(guī)則
- 在 JS 語言中驮肉，一切都是對象。因此已骇，任何支持的類型都可以通過 JSON 來表示离钝，例如字符串、數字褪储、對象卵渴、數組等。但是對象和數組是比較特殊且常用的兩種類型
- 對象表示為鍵值對,數據由逗號分隔
- 花括號保存對象,方括號保存數組
- JSON 鍵/值對
{"name": "Json"}
- JSON 與 JS 對象的關系
JSON 是 JS 對象的字符串表示法乱豆，它使用文本表示一個 JS 對象的信息奖恰，本質是一個字符串。
var obj = {a: 'Hello', b: 'World'}; //這是一個對象宛裕，注意鍵名也是可以使用引號包裹的
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串瑟啃，本質是一個字符串
- JSON 和 JS 對象互轉
要實現從JSON字符串轉換為JS對象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'}
要實現從JS對象轉換為JSON字符串揩尸，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}'
案例
js中
window.onload = function(){
var btn = document.querySelector(".btn");
btn.onclick = function(){
// 此處ajax是我自己封裝的ajax方法
ajax({
type:"GET",
url:"ajax-json.php",
success:function(xhr){
console.log(xhr.ressponseText);
},
error:function(xhr){//xhr表示調用時傳來的異步對象
console.log(xhr.status);
}
});
}
}
ajax-json.txt文件中
{
"firstName": "Brett", "lastName": "McLaughlin"
}
ajax-json.php文件中
<?php
echo file_get_contents(filename:"ajax-json.txt");//返回
操作返回的部分
success:function(xhr){
var str = xhr.ressponseText;
var obj = JSON.parse(str);//轉成js對象
console.log(obj); //之后可以操作js對象
},
但是IE低級版本不支持parse方法蛹屿，得用個框架兼容：json2.js，可以去github下載岩榆。使用也很簡單错负。
