# 第六堂：AJAX 操控伺服器之術
## 開課提醒
1. 錄影
2. [第五週週報](https://liberating-turtle-5a2.notion.site/EP5-ba7ae94f28824c21985aa86a13a85d65?pvs=4)
3. 中場休息介紹：[最終關卡任務](https://rpg.hexschool.com/#/training/12062289980171095264/board/content/12062289980171095265_12062289980171095286?tid=12062289980171193312)
* 此關卡資訊是先讓同學們可以瞭解最終作業範圍並提前準備
* 第八~九週的週五課程，將會詳細講解關卡資訊
* 可先觀看洧杰老師的 Live Demo
* [上午場](https://courses.hexschool.com/courses/2020111311/lectures/48764792)
* [下午場](https://courses.hexschool.com/courses/2020111311/lectures/48764793)
* [晚上場](https://courses.hexschool.com/courses/2020111311/lectures/48764794)

## 今日上課知識點
1. AJAX
2. 非同步
3. axios
---
## 為什麼要學 [AJAX](https://zh.wikipedia.org/zh-tw/AJAX)?
1. 客戶端(Client)與伺服器(Server)做資料交換
* 客戶端與伺服器做資料交換的過程
* 資料交換的方法
- client(客戶端)通常是指瀏覽器、應用程式
- server(伺服器)是用來處理和回應客戶端（如瀏覽器、應用程式）請求的電腦或程式
- database(資料庫)是存資料的資料庫
## 客戶端與伺服器做資料交換的過程 - 網路請求
1. 圖解發出請求的流程，以「進入 Google 頁面為例
2. 用本地端電腦來講解 Chrome Network，並加入 all.js 與圖片
> 以「六角學院網站」看網路請求
## 資料交換的方法 - AJAX
任何與伺服器透過 JS **非同步**交換資料的方式都可以叫做 AJAX
Asynchronous JavaScript And XML
1. [XMLHttpRequest JS 學徒免費觀看](https://courses.hexschool.com/courses/670042/lectures/11952549)、[介紹](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
2. [Fetch](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch#%E4%BD%BF%E7%94%A8_fetch_%E7%99%BC%E9%80%81%E8%AB%8B%E6%B1%82_request)
3. [axios 套件](https://github.com/axios/axios)，web 操作底層是 XMLHttpRequest，[get 範例](https://github.com/axios/axios#example)

## 非同步
同步 → 同一個步道

非同步 → 不同步道

> 優點：不會互相卡住
> 缺點：有時候會無法預期誰先結束

## axios
* [axios 套件](https://github.com/axios/axios)
* [環境安裝 CDN](https://github.com/axios/axios#cdn)

GET 練習：
* [練習用的 JSON 連結](https://hexschool.github.io/ajaxHomework/data.json)
* [get 語法](https://github.com/axios/axios#response-schema)

非同步觀念題：
* [練習1](https://codepen.io/hexschool/pen/yLZbpwR?editors=0010)
* [練習2](https://codepen.io/hexschool/pen/NWojXmy?editors=0011)
* [練習3](https://codepen.io/hexschool/pen/vYbmpwy?editors=0010)
* [練習4](https://codepen.io/hexschool/pen/OJdmQRQ?editors=0011)
* [練習5](https://codepen.io/hexschool/pen/xxRoWzB?editors=1010)
-> 要將拿到 data之後要做的事情包在 then 裡面
-> 可以包成 function，提升閱讀性

<!--
小試身手
https://ptx.transportdata.tw/MOTC/v2/Tourism/ScenicSpot?$top=30&$format=JSON
<ul>
<li>景點名稱一</li>
<li>景點名稱二</li>
</ul>

-->
<!--
> 如何觀看該 API 是否提供介接，可使用 [test-cors](https://www.test-cors.org/)
> 不行清單：[里長](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)、[台南公有停車場](https://data.tainan.gov.tw/dataset/public_free_parking/resource/27234516-7820-4d86-8877-579151b2ce9c)
> 可以清單：[BMI kata](https://raw.githubusercontent.com/hexschool/js-traninging-week6API/main/data.json)、[全國交通運輸](https://ptx.transportdata.tw/MOTC?t=Tourism&v=2#!/Tourism/TourismApi_ScenicSpot)、[十分鐘雨量(用 open api)](https://opendata.epa.gov.tw/Data/Contents/ATM00634/)、[PM2.5](https://opendata.epa.gov.tw/Data/Contents/ATM00766/) -->

**補充：網路請求種類**

[MDN HTTP 請求種類](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods)
常用的如下，axios 皆有[支援](https://github.com/axios/axios#request-method-aliases)，本堂先專注 get 的方法
* get
* post
* delete
* put
* patch

## Live Demo(AJAX+ForEach+innerHTML)
* [高雄私立幼稚園](https://data.kcg.gov.tw/dataset/kaohsiung-private-baby-care-center)
---

## 本週任務
1. 主線任務

* [範例程式碼](https://codepen.io/hexschool/pen/zYobJgp?editors=1010)

3. 小組任務
4. 週末任務
串接此 [BMI Kata 資料集](https://raw.githubusercontent.com/hexschool/js-traninging-week6API/main/data.json)，出一個題目來接龍