# 前端基礎串 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> ```