# Day 06 07 JavaScript AJAX SPA SSR XML AJAX XHR fetch axios
[跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://hulitw.medium.com/introduction-mvc-spa-and-ssr-545c941669e9)
[[Day7] 基本資料格式: XML 和 JSON](https://ithelp.ithome.com.tw/articles/10203632)
[非同步請求xhr、ajax、axios與fetch的區別比較](https://www.itread01.com/content/1564589404.html)

AJAX:Asynchronous JavaScript and XML
當你在瀏覽網頁時，點擊網頁上的超連結，網頁不是「整張」更新而是只有「局部」更新，那麼該網頁就很有可能有採用了AJAX的技術。
=> 從 redirect_to 其他頁面變成 render partial
非同步 JS & XML，原本傳送資料需要換頁才能做到
現在可以透過 JS 幫你傳送資料，而且不會換頁
於是現在可以傳送資料了，但還沒辦法顯示出來
=> 使用 JS 讓資料顯示，ex:直接創造元素把資料塞進去
Rails 的 link_to 跟 form helper 用 remote: true(local: false) 可以支援 AJAX

Turbolinks 就是使用 AJAX 技術來換頁的

XML:是一種標記語言，一種用來傳輸以及儲存資料的格式
HTML:用來顯示資料
JSON 跟 XML 一樣是用來傳輸以及儲存資料的格式
現在一般都是使用 JSON 取代 XML 做為資料交換的格式


### ujs
Unobtrusive JavaScript
原本是在 HTML 標籤裡寫 JS
利用這個概念把 JS 拉出去外面寫再傳回來
data attribute 就是這樣
同時ujs還能支援AJAX，也就是非同步請求。

API:資料交換介面
Rails 的 params 就是 API，是一個橋梁
前端填的資料會塞進 params，接著後端可以從 params 取得並操做前端填的資料

SPA 就是因為想增進使用者體驗，而出現的一種在前端利用 Ajax 達成不換頁的方法。SSR 就是因為要解決 SPA 的 SEO 問題而出現的解法。

### 非同步請求資料的方法
每次點擊按讚都是一個 xhr = AJAX

XHR fetch axios ajax 都是
XHR 是最原始的方法，使用起來也比較繁瑣，需要設定很多值。
fetch 比 XHR 好一點
axios 跟 ajax 又比 fetch 更好用
### XHR:
使用 XHR 物件可以在自己網頁上讀取遠端的資料，最常見的用途是在註冊頁面驗證「用戶名」及「信箱」是否被重複使用。

ajax:加強版的 XHR ，使用起來比較簡單，
Rails.ajax會自動幫你抓 token

axios:除了可以

## fetch axios 比較
- fetch
- 需要先將資料轉成 JSON格式
- axios
- 自動將資料轉成 JSON格式
- 可以防護 CSRF 攻擊

// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

詳細差異可參考:[Difference between Fetch and Axios.js for making http requests](https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/)

###### tags: `13th鐵人賽` `網頁前後端寶石庫-礦坑補完計畫`