[FE102] part 3


Posted by yymarlerr on 2021-06-01

從瀏覽器上的 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。









Related Posts

給自己看的 JS 進階-Hoisting

給自己看的 JS 進階-Hoisting

財務分析(3) --  抓取公開資訊觀測站財務指標

財務分析(3) -- 抓取公開資訊觀測站財務指標

公車即時動態

公車即時動態


Comments