今天內容

• AJAX XMLHttpRequest
• Same origin policy 同源政策
• Cross-Origin Resource Sharing

筆記

• AJAX(Asynchronous JavaScript And XML)：任何非同步跟伺服器交換資料都可以統稱AJAX，使用XMLHttpRequest語法

//HTML
<div class="app">
  <form method="get">
    UserName:<input name="username" type="text" />
    <input type="submit" />
  </form>
</div>

//JS
<script>
  const request = new XMLHttpRequest()
  request.addEventListener("load", function () {
    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://reqres.in/api/users", true)
  request.send()
</script>

畫面可以看到有發送一個到google上面，網址有變成輸入的值。但google因為瀏覽器的限制會回報錯誤，google也不會給你這樣弄。

request.status：HTTP response status codes 常見的404 Not Found就是其中一種。

• Same origin policy 同源政策
  白話來說別人的網站跟你的就是不同源(除非Domain一樣)，直接看MDN例子比較好理解。

  Definition of an origin
  Two URLs have the same origin if the protocol, port (if specified), and host are the same for both. You may see this referenced as the "scheme/host/port tuple", or just "tuple". (A "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.)
  The following table gives examples of origin comparisons with the URL http://store.company.com/dir/page.html
  

  為了上面那個同源問題又延伸出一套可以通過的規範

• Cross-Origin Resource Sharing (CORS)
  規範說，如果你想開啟跨來源 HTTP 請求的話，Server 必須在 Response 的 Header 裡面加上Access-Control-Allow-Origin。星號*代表萬用字元，意思是任何一個 Origin 都接受。
  

  同源政策與CORS，都是瀏覽器為了安全性的考量，也是瀏覽器加上的限制。所以用node.js環境去寫就不會有瀏覽器限制的這個問題。
  

• 今天內容也有點水(還有10天啊QQ)，這邊學影片實作一個「抓取資料並顯示」來充版面一下～

  //HTML
  <div class="app">
    <div class="profile">
      <div class="profile_name">George Bluth</div>
      <img class="profile_img" src="https://reqres.in/img/faces/1-image.jpg" />
    </div>
  </div>

  <script>
    const request = new XMLHttpRequest()
    const container = document.querySelector(".app")
    request.addEventListener("load", function () {
      if (request.status >= 200 && request.status < 400) {
        const response = request.responseText
        const json = JSON.parse(response)
        const users = json.data
        for(let i = 0; i<users.length; i++) {
          const div = document.createElement('div')
          div.classList.add('profile')
          div.innerHTML = `
          <div class="profile_name">${users[i].first_name} ${users[i].last_name}</div>
          <div class="profile_img"><img src="${users[i].avatar}" alt=""></div>
          `
          container.appendChild(div)
        } else {
          console.log(request.status,request.responseText)
          }
      })
      request.onerror = function() {
      console.log("error")
      }
      request.open("GET", "https://reqres.in/api/users", true)
      request.send()
    </script>

最近有點不知道自己在寫什麼，內容有點混(超廢)，還越拖越晚。還有10天完賽，大家再忍忍啊～

參考資料

• MDN Ajax
• 輕鬆理解 Ajax 與跨來源請求 - Huli
• MDN Same-origin policy
• Cross-Origin Resource Sharing (CORS)