# XML、JSON比較
###### tags:`NodeJS`
XML Http Request瀏覽器提供的可以同步也可以非同步的發出請求
* json => JavaScript Object Notation => 把 json 當成資料格式來用
```json=
{
"name": "ashley",
"country": "Taiwan",
"email": "ashleylai58@gmail.com",
"github": "https://github.com/azole/node-workshop",
}
```
* xml 是另外一種資料格式 (傳輸用的資料格式)
```xml=
<person>
<name>ashley</name>
<country>Taiwan</country>
<email>ashleylai58@gmail.com</email>
<github>https://github.com/azole/node-workshop</github>
</person>
```
json 為什麼會大幅取代 xml?
1. json 本來就是一個 object, js 原生可以就可以處理，PHP 也都可以。
1. json 比較小(不論資料，就論欄位名稱，XML 會是兩倍)
## [XMLHttpRequest](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest)
### xhr版 完成同步與非同步請求
```javascript=
<html lang="en">
<head>
<title>XHR</title>
</head>
<body>
<button id="syncBtn">同步</button>
<button id="asyncBtn">非同步</button>
<button id="countBtn">測試按鈕</button>
<div id="count">0</div>
<div id="response">準備要顯示訊息</div>
<script>
var response = document.getElementById("response");
var syncBtn = document.getElementById("syncBtn");//同步
syncBtn.addEventListener("click", function () {
// 同步的測試
response.innerHTML = "開始同步請求";
var xhr = new XMLHttpRequest();//建構式用來初始化一個 XMLHttpRequest 物件
xhr.onload = function () {
if (this.status === 200) {
response.innerHTML = `同步請求的response: ${this.responseText}`;
} else {
response.innerHTML = `同步請求錯誤: ${this.status}`;
}
};
// methed, url, async(default: true 非同步)
xhr.open("GET", "http://18.237.113.31:3000/", false);//初始化一個請求
xhr.send();//發送請求
});
var asyncBtn = document.getElementById("asyncBtn");//非同步
asyncBtn.addEventListener("click", function () {
// 非同步的測試
response.innerHTML = "開始非同步請求";
var xhr = new XMLHttpRequest();//建構式用來初始化一個 XMLHttpRequest 物件
xhr.onload = function () {
if (this.status === 200) {
response.innerHTML = `非同步請求的response: ${this.responseText}`;
} else {
response.innerHTML = `非同步請求錯誤: ${this.status}`;
}
};
// methed, url, async(default: true 非同步)
xhr.open("GET", "http://18.237.113.31:3000/", true);//初始化一個請求
xhr.send();//發送請求
});
var countBtn = document.getElementById("countBtn");
var count = document.getElementById("count");
countBtn.addEventListener("click", function () {
count.innerHTML = parseInt(count.innerHTML, 10) + 1;
});
</script>
</body>
</html>
```
### Promise-await版 完成同步與非同步請求
```javascript=
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>XHR</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<body>
<button id="asyncBtn">非同步</button>
<button id="countBtn">測試按鈕</button>
<div id="count">0</div>
<div id="response">準備要顯示訊息</div>
<script>
var response = document.getElementById("response");
var asyncBtn = document.getElementById("asyncBtn");
asyncBtn.addEventListener("click", async function () {
response.innerHTML = "開始非同步請求";
response.innerHTML = await new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (this.status === 200) {
resolve(`非同步請求的response: ${this.responseText}`);
} else {
reject(`非同步請求錯誤: ${this.status}`);
}
};
xhr.onerror = () => {
reject(xhr.statusText);
};
// methed, url, async(default: true 非同步)
xhr.open("GET", "http://18.237.113.31:3000/", true);
xhr.send();
});
});
var countBtn = document.getElementById("countBtn");
var count = document.getElementById("count");
countBtn.addEventListener("click", function () {
count.innerHTML = parseInt(count.innerHTML, 10) + 1;
});
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet