# Day3學前端 Frontend with React - *串接API with Ajax*
###### tags: `frontend`
Copyright 2021, [月下麒麟](https://hackmd.io/@YMont/note-catalog)
---
## Target
當前端與後端(backend)訂定完API後，即可各自進行工作
這邊要提及的是==如何在前端接收來自後端API的資料呢?==
## Concept
在舉例之前，得先了解對相關腳色與對應行為
**資料庫**
```C(create), R(read), U(update), D(delete)```
**後端**
```Post, Get, Put, Delete ```
**前、後端溝通的API**
```
http://127.0.0.1:8000/user/1
http://127.0.0.1:8000/users?index=1&end=10
```
>Request-
點擊瀏覽器 -> (前端) -> Request -> (後端) -> 要資料 -> (資料庫)
>Response-
>(資料庫) -> 給資料 -> (後端) -> Response -> (前端) -> 顯示資料於瀏覽器
## Implement
知道前後端如何溝通的行為後，會發現到當前端只要取得Request API
這樣就針對該支API去顯示資料即可
第二天的Hello World已經能成功的修改app.js檔
今天要延續這個檔案的修改操作
**Backend API Value**
假設我們後端的API已經製作完成了，它其實是會有值(value)
另外，由於網路傳遞資料大多是使用[JSON](https://zh.wikipedia.org/wiki/JSON)格式
故後端丟出來的資料也會以JSON格式呈現
(後端之Browser view)
**接收 API**
```javascript=
let url= "http://127.0.0.1:8000/user/2";
let xh = new XMLHttpRequest();
xh.open('GET',url,true);
xh.send();
xh.onreadystatechange = function(){
if(this.readyState === 4 && this.status === 200){
let response = JSON.parse(this.response);
console.log(response);
}
};
```
**小重點:**
1.將XMLHttpRequest函式實作物件丟到變數xh，利用該變數進行一些操作，最後取得respose的內容
2.var, let, const宣告變數的差異。
reference:[JavaScript: var, let, const 差異](https://totoroliu.medium.com/javascript-var-let-const-%E5%B7%AE%E7%95%B0-e3d930521230)
reference:[[JS學徒特訓班] JavaScript ES6 : var, let, const 差異](https://codinggirl.timelog.to/a174653905)
3.如何接收來自Http的請求、函式解釋。
reference:[IT邦幫忙 Day21 AJAX(1): 科普 & XHR](https://ithelp.ithome.com.tw/articles/10203820)
reference:[【JavaScript瀏覽器】：實作串接 API ](https://jimmyswebnote.com/use-javascript-to-connect-api-with-unsplash/)
**Run React**
```npm start```
(前端之Browser view)
*會發現一樣沒出現資料阿!*
別急==對瀏覽器按下F12，找到Console按鈕，打開該物件內容==
就會發現該筆Json資料，以鍵值對的方式呈現
(*如果發現有錯誤訊息，請見文章最下方，補充2*)
今天就學到這裡，後續會再往**前端渲染畫面**的方向學習，這樣畫面就會越來越漂亮
中間會再穿插一些後端製作API的文章，敬請期待
---
**補充1 jQuery**
筆者發現有另一寫法可以達到一樣的目的。
**使用jQuery會更簡潔、直觀**...
需要先安裝jQuery
```typescript=
npm install --save jquery
```
導入jQuery模組
```javascript=
import $ from 'jquery';
```
jQuery程式
```javascript=
$.ajax({
url:"http://localhost:8000/user/3",
type: "GET",
success: function(result){
console.log(result);
},
error: function(error){
console.log(error)
}
});
```
瀏覽器console內容顯示
---
**補充2 XMLHttpRequest Access Failed**
網路上有個**同源政策 Same-Origin Policy**
解法其實有很多種，其中一解法目的為讓前後端的網址為一同源
(筆者自己是在Python後端應用**CORS(Cross-Origin Resource Sharing)套件**即解決)
reference:[【Web】徹底理解同源政策（Same Origin Policy）](https://someone.tw/2020/05/20/web-same-origin-policy/)
reference:[[教學] CORS 是什麼? 如何設定 CORS?](https://shubo.io/what-is-cors/)
這兩篇其實講的很詳細，值得一讀喔! 
感謝您的收看~
Sign in with Wallet
Connect another wallet