---
# System prepended metadata

title: 前端基礎串 API

---

# 前端基礎串 API


### 用 node.js 呼叫 API 與在網頁上呼叫的差異


使用 JS 透過瀏覽器對 sever發 request 和 透過瀏覽器接收 response
就會受到瀏覽器限制或加減一些資訊
所以最重要的是安全性

_

#### 傳送資料的第一種方式：表單 form

最陽春的方式，透過 html 的元素發 request，不使用 JS

發  method="GET 的 request，參數會被附加在網址上

登入的話一般會用 POST，登入的帳號密碼才會在 body 裡面，不會在網址上面被看到

發一個 request 到新的頁面，收到 response 在 render 出來，所以換會換頁

_

#### 傳送資料的第二種方式：ajax

>不用換頁的方式

**AJAX**  - Asynchronous JavaScript and XML

不單單只某個技術，只要是有任何非同步的跟伺服器交換資料的 JS 都可以統稱 AJAX
(早期大多是 XML 格式，現在大多是 Json 格式了，但還是稱為 AJAX)

html 元素傳送資料的差別是，他是 sever傳 response 到瀏覽器而已，AJAX 是  sever傳 response透過瀏覽器再傳送結果到 “瀏覽器上的 JS”

_


#### XMLHttpRequest

要在瀏覽器使用 JS ，就是要用瀏覽器提供的 class
所以要在程式碼前宣告 XMLHttpRequest
```

    <script>
      const request = new XMLHttpRequest();
    </script>
```

然後再放一個event listener function 在 request 後面

```

      request.onload = function(){

      }
```

也可以是這樣 ，意思是一樣的

`request.addEventListener('load',function(){})`

然後判斷如果 http response 狀態 statue code在 200-400 之間，就是成功的

`   if (request.status >= 200 && request.status < 400)`

另外也可以幫 request 另外再加一個 lisener

```

      request.onerror = function(){
        console.log('error')
      }
```

然後 open (發 request 到指定位置) ，第一個參數是 method，第二個參數是位置，第三個參數是非同步

`request.open('GET','http://google.com',true);`

最後記得要傳送出去 send

`request.send();`

完整程式碼範例

```
<script>
  const request = new XMLHttpRequest()
  request.onload = function(){
    if (request.status >= 200 && request.status < 400){
      console.log(request.responseText)
    } else {
      console.log('error')
    }
  };

  request.onerror = function(){
    console.log('error')
  }

  request.open('GET','https://reqres.in/api/user',true)
  request.send();

</script>
```

##### Same origin policy 同源政策 (同網域)

##### CORS 跨來源資源共用

當我們發 request 的時候，瀏覽器會幫我們在 request  header 的裡面加一個 header origin 來源，sever 會依據這個來源決定要不要給你權限 

_

#### 第三種交換方式

**JSONP**  (JSON with padding(填充))

因為有幾個標籤不會受同源限制，例如 img 和 script
所以可以透過 script 標籤的 src 拿資料 (在前面先寫好 function )

**單向傳送資料**

有人使用過一個很聰明的方式 如果想要知道使用者是否有開啟 email，
就在 email 內夾帶一張小 img 然後利用 img 標籤內的 src 放一串網址
當使用者開啟郵件時，就會對該網址發一個 request sever 就知道有人打開封信

_

#### 綜合示範：抓取資料並顯示


先撈資料印出來看看，然後把 html 結構寫好，刻好 class 樣式後
就可以寫 JS 撈資料，再把 html 結構刪除放進 JS

然後就可以動態產生元素

這個用右鍵檢查原始碼是看不到內容的
所以這個內容是 render 在使用者端不是 sever
缺點就是搜尋引擎會抓不到內容

```
 <body>
    <div class="app">

    </div>

    <script>
      const request = new XMLHttpRequest()
      const container = document.querySelector('.app')

      request.onload = 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.lenght; i++){
            const div = document.createElement('div')
            div.classList.add('profile')
            div.innerHTML = `
              <div class="profile_name">${user[i].first.name} ${users[i].last_name}</div>
              <img class="profile_img" src="${users[i].avatar}">
            `
            container.appendChild(div)
          }

        } else {
          console.log('error')
        }
      };

      request.onerror = function(){
        console.log('error')
      }

      request.open('GET','https://reqres.in/api/user',true)
      request.send();

    </script>
  </body>
```
