---
tags: JS 直播班 - 2021 春季班
---

# 第六堂：AJAX 操控伺服器之術

* [報到](https://rpg.hexschool.com/training/17/calendar) Code：`8Qbjqf1473HL`
* [戰況分析](https://docs.google.com/spreadsheets/d/1fQNuoq96q_ovRaBUwCVhstMcGDZgYFgWRIW90-m73aE/edit?usp=sharing)，拉出前 10 組名單
* 升級助教服務
* 公告全部獎勵
* [Vue 3 直播課-下週1提供50個名額](https://shop.hexschool.com/order/create?coupon_code=2021_VUE3_VUE_TRAINING_MAR&phyProd[…]=-M7klmVj7JKm8uhH_PDp&phyProductSpec[]=-MOUJRMHkm9dYk9JdJIw)

//19:50 截止計算
第一名：第22組，共 10 人完成
第二名：第12組、第23組，共 8 人完成
第三名：第1組、第2組、第3組、第4組、第5組、第14組、第16組、第21組，每個組別都有 7 人完成
第四名：第11組、第13組、第15組、第18組、第20組，每個組別都有 6 人完成
第五名：第7組、第26組，每個組別都有 5 人完成
第六名：第10組、第17組、第6組、第8組、第9組、第19組、第24組、第25組、第27組，皆有 2~4 人完成

## AJAX 操作方式
* 為什麼要用 [AJAX](https://zh.wikipedia.org/zh-tw/AJAX)？

## 什麼是網路請求？

* 圖解發出請求的流程，以 [Google 關鍵字](https://www.google.com.tw/search?q=hello)為例子
* 用本地端電腦來講解 Chrome Network，並加入 all.js 與圖片
* 用 Node.js 展示(最後有時間再分享)，此部分有錄影

### AJAX 撈取網路請求的方式
* [XMLHttpRequest](XMLHttpRequest)、[JS 學徒免費觀看](https://courses.hexschool.com/courses/670042/lectures/11952549)
* [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)
* [axios 套件](https://github.com/axios/axios)，web 操作底層是 XMLHttpRequest

## axios

* axios 套件：[axios 套件](https://github.com/axios/axios)
* [環境安裝 CDN](https://github.com/axios/axios#installing)
* [axios 套件原理，哪些是原生，哪些是 axios 自己客製化的？](https://codepen.io/hexschool/pen/OJbqoeL?editors=0110)
* 練習用的 JSON 連結：https://hexschool.github.io/ajaxHomework/data.json
* [get 語法](https://github.com/axios/axios#response-schema)
* 非同步概念，[錯誤範例程式碼](https://codepen.io/hexschool/pen/xxRoWzB?editors=1010)
* 結論：皆用函式傳遞
* [流程圖建議](https://whimsical.com/WZEyuJGJUCLmw9rCEHhPp9)
* [範例程式碼](https://codepen.io/hexschool/pen/zYobJgp?editors=1010)

// https://hexschool.github.io/ajaxHomework/data.json
let ary =[];
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function (response) {
    console.log('資料有回傳了');  
    console.log(response.data);
    
    ary = response.data;
    // renderData();
  });

function renderData(){
  console.log(ary);  
  const title = document.querySelector('.title');
  title.textContent = ary[0].name;
}
console.log(ary); 

> 如何觀看該 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)
* [ITHOME](https://www.ithome.com.tw/node/80062)

常用的請求方法如下，axios 皆有[支援](https://github.com/axios/axios#request-method-aliases)，本堂先專注 get 取得資料：
* get
* post
* delete
* put

## 支線任務
* 前端組：[挑戰 API 介接](https://raw.githubusercontent.com/hexschool/js-traninging-week6API/main/data.json)
* 魔劍設計組，協助出 XD、figma 標示文件

user story 使用者故事建議
1. 我可以看到最佳組別投稿數排名、總平均秒數排名
2. 我可以看到個人排名，若頁數過多，請用分頁來設計
3. 我能在每個參賽者中看到每個人的留言、YT 連結、分鐘數
4. 篩選排序方式：可依投遞時間、秒數(由低到高)

## 第六關主線任務

* <a href="https://rpg.hexschool.com/training/17/task?type=detail&id=173" target="_top">第六關主線任務</a>
* [LV 1 JSON API](https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json)
* [LV2 JSON API](https://raw.githubusercontent.com/hexschool/js-training/main/travelApi.json)