2021-05-31

[Lichen5221]

node.js 與 瀏覽器發送要求的差異

node.js 發送要求僅透過作業系統，沒有限制，伺服器發送資訊回來也不會被限制，但從瀏覽器上發送要求，就會有瀏覽器的規則與限制，須記住此本質上的差異。

表單

<div class='app'>
  <form method="GET" action="https://google.com">
    username: <input name="username" />
    <input type="submit" />
  </form>
</div>

發送的位置若是不存在，就會失敗。如果網址填 google 則會跳轉到 google 頁面，其網址名稱會增加原先填在表格的內容。

用 GET 的話參數都會被放在網址上，所以如果要輸入帳密應該用 POST 。

利用表單的話會換頁，該網址會回傳什麼結果就呈現什麼結果。

跟 JS 一點關係都沒有，比起交換資料比較像帶著某個參數到某個頁面去。

每次要新的資料的時候都要換頁。

AJAX（Asynchronous JavaScript And XML）

不用換頁的方法，所有非同步的交換方式都可統稱為 AJAX。

伺服器 response 到瀏覽器後，瀏覽器會再轉傳進 JS ，表單的話就是由瀏覽器直接呈現該 response 。

我覺得這部分老師講得沒有之前的東西來得清楚。

<script>
  const request = new XMLHttpRequest( ) // 瀏覽器提供的 class ，可以透過 new 指令產生。
  request.onload = function() { // 意思為要放一個函式到 onload 上， request 拿到結果後會觸發此函式。
    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)
  request.send() // 結果是被瀏覽器限制得不到結果，如果是換成 API 的網址就有機會拿到資料。
</script>

XHR

說是詳細解說但根本沒有多詳細，就只是重複上一個影片的話。

<script>
  const request = new XMLHttpRequest( ) // 瀏覽器提供的 class ，可以透過 new 指令產生。
  request.addEventListener('load', function() { // 此方式參數為 load 非 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', 'API 網址', true)
  request.send()
</script>

同源與跨網域問題 & 瀏覽器為什麼有限制？

不同源的 request 就會被瀏覽器擋住，但有解法：將其允許的網域名稱放入 head 中。伺服器會根據來源判定是否給予讀取資源的權限。

限制目的在於安全性，不讓所有人隨意讀取，如果沒有瀏覽器，則不會有限制。

JSONP

較少人用的交換資料方式。

圖片沒有安全性的問題，就能跨網域拿取。

AJAX 必定受同源政策限制。

透過 script 不受同源限制的特性，建立函式來取得資料。

我覺得這個方式不是很好懂，要多讀其他資料，但也因為很少用所以也不急著弄懂。

參考文章

單向傳送資料

在信件中放入圖片，會讀取圖片送出 request ，就知道有沒有打開這封信。

抓取資料並顯示 & 總結

老師示範。

1. 把版面刻好。
2. 拿資料。
3. 把資料寫死的資料換成動態的資料。

建立出完全與伺服器連動的網頁。

檢視原始碼的時候看不到網頁上顯示的內容，因為是透過 JS 執行動態顯示內容，右鍵檢視 body 是看不到資料，只看得到 JS 的語法。

總結課程所學：用 javascript 改變介面、用 JS 監聽事件並作出反應、與伺服器交換資料。