Ajax、CORS - 整理與小應用

Posted on | In

❓Ajax是什麼 (Asynchronous JavaScript and XML)

MDN入門篇

1. 2005 年時由 Jesse James Garrett 所發明的術語，描述一種使用數個既有技術的「新」方法
2. 使用 XMLHttpRequest物件來與伺服器進行通訊
3. 可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案
4. 由於非同步的本質，代表可以與伺服溝通、交換資料、以及更新頁面，且“無須重整網頁”

XMLHttpRequest

  • XMLHttpRequest API 是 Ajax 的核心
  • 透過 XMLHttpRequest 建立的請求，其取得資料的方式可以為非同步或同步兩種之一。
  • new XMLHttpRequest().open(方法, url, 是否非同步/預設非同步)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    (function() {
      var httpRequest;

      function makeRequest() {
        httpRequest = new XMLHttpRequest();

        if (!httpRequest) {
          alert('Giving up :( Cannot create an XMLHTTP instance');
          return false;
        }
        // 決定伺服器傳回資料後的處理方式
        httpRequest.onreadystatechange = alertContents;

        // 決定處理方式之後你得確實發出 request，此時需叫用 HTTP request 類別的 open() 及 send() 方法
        httpRequest.open('GET', 'test.html');
        httpRequest.send();
      }

      function alertContents() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
          if (httpRequest.status === 200) {
            alert(httpRequest.responseText);
          } else {
            alert('There was a problem with the request.');
          }
        }
      }
    })();

Fetch API

  • 並非所有瀏覽器切支援，如舊ie, 故需要用polyfill去轉換
  • fetch 會使用 ES6 的 Promise 作回應
  • 回傳的為 ReadableStream 物件，需要使用不同資料類型使用對應方法，才能正確取得資料物件
    MDN
    [OXXO]](https://www.oxxostudio.tw/articles/201908/js-fetch.html)
1
2
3
4
5
6
fetch(url, {})
.then(function(response) {
    // 處理 response
}).catch(function(err) {
    // 錯誤處理
});

CORS

基於安全性考量，程式碼所發出的“跨來源 HTTP“ 請求會受到限制。例如，XMLHttpRequest 及 Fetch 都遵守同源政策（same-origin policy）。
這代表網路應用程式所使用的 API 除非使用 CORS 標頭，否則只能請求與應用程式相同網域的 HTTP 資源。

CORS解決辦法

從Sever端下手, 可以串現成，如:heroku cors、自己做
因為之前有碰過Google App Script的小經驗，所以這次也使用這方法．
👉可參考達人做法

心得👉

其實這次串接很幸運，看完環保署的網站提取URL後，竟然沒發生CORS.
但…這樣不就沒練習到了嗎？？ 所以我只好去找別的同學的URL(app.js裡的cors_aqi), 然後再重走一遍

因為這個應用，也爬了很多文章和看別人的做法😀

AQI Code
View