從瀏覽器上的 JavaScript 和 Node.js 發 request 到 server 的差別？
瀏覽器上的 JS 透過瀏覽器（再透過作業系統）發 request 到 server 時，會因安全性問題的考量而受到瀏覽器的限制，可能會被阻止做一些事情或多加一些資訊；如果是用程式透過作業系統發 request 到 server，則收到的 response 不會被限制。
透過表單 form 傳資料
- 缺點：每次要新的資料都要換頁
範例：
- 如果是輸入機密資料，通常用
method="post"，因為參數才不會顯示在網址上面，而是在 body 裡
<body>
<form method="get" action="https://google.com">
username: <input name="username"/>
<input type="submit" />
</form>
</body>
301代表轉址
200
範例二
<body>
<form method="POST" action="https://google.com">
username: <input name="username"/>
<input type="submit" />
</form>
</body>
- 看到的頁面為 action 後面網址 response 的結果，且已經被瀏覽器渲染過：
透過 JavaScript 傳資料
AJAX (Asynchronous JavaScript and XML)
- 任何非同步跟伺服器交換資料的 JavaScript 都可以算是 AJAX。名稱中有 XML 是因為早期的資料格式多為 XML，但現用 JSON 格式較多。
- 受同源政策管理
XMLHttpRequest 介紹
為瀏覽器內建的物件
流程
- 先
const request = new XMLHttpRequest() request.onload = function() {}request.onerror = function() {}request.open('<method>', '<把 request 發到哪邊>', '<true or false>' )- true 是非同步；false 為同步
request.send()
範例：
- 當 request 拿到結果後，就會觸發 onload 這個事件
<script>
const request = new XMLHttpRequest()
request.onload = function() { // 放一個funciton 到 onload 上的意思
if (request.status >= 200 && request.status < 400) {
console.log(request.responseText)
} else {
console.log('err')
}
}
request.onerror = function() { // 有錯的時候
console.log('error')
}
request.open('GET', 'https://google.com', true) // 用 GET 發 request 到 google 的意思，true 為非同步
request.send()
</script>
- 加上監聽
<script>
const request = new XMLHttpRequest()
request.addEventListener('load',
()=> {
if (request.status >= 200 && request.status < 400) {
console.log(request.responseText)
} else {
console.log('err')
}
}
)
request.onerror = function() { // 有錯的時候
console.log('error')
}
request.open('GET', 'https://google.com', true) // 用 GET 發 request 到 google 的意思，true 為非同步
request.send()
</script>
同源政策（Same origin policy）
參考文章 - 輕鬆理解 Ajax 與跨來源請求 by Huli
根據 MDN，同源是指兩份網頁具備相同協定、埠號 (如果有指定) 以及主機位置。
透過瀏覽器在發送 request 時，會在 header 顯示 orgin: XXXX 表示自己在哪個 domain，如果和 server 端不同源的話，response 的 header 需要有 Access-Control-Allow-Origin:* ，用戶端才可以收到 response。脫離瀏覽器及沒有此限制。
<image>、<script><iframe>不受同源政策管理
跨網域存取資料 (CORS, Cross-origin Resource Sharing)
透過 JSONP（JSON with Padding） 傳送資料
- padding 為填充的意思
- 利用
<script>不受同源政策限制的特性來拿到資料，在 server 填充資料，在 JS 拿到資料。現已很少有。
單向傳送資料（email與追蹤）
- 在 email 裡面用
<script src='網址'>插入一張很小的透明圖片，對方點開 email 之後，就會連上網址，並且發 request 給伺服器，這樣就可以知道有無點開 email。
 - 遠端數據庫 GitHub_@calon719_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
 - CRUD_@AlanSyue_https://static.coderbridge.com/img/AlanSyue/00542fe159fa4c9e8853d7a79b887035.png)
