---
tags: JS 直播班 - 2022 秋季班
---

# 第六堂：AJAX 操控伺服器之術
* 記得錄影
* [最終關卡任務](https://hackmd.io/tZIlr0HTRKmKitFwdooqIw)
* 11/22 七週年感謝祭 & Vue 直播說明會 3小時快閃
* 表單連結：https://hexschool.tw/THeFJ
* Vue 直播說明會：https://hexschool.tw/Uybna
* 下週一 10:30 專題討論會議

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

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

## 什麼是網路請求？

* 圖解發出請求的流程，以 [Google 關鍵字](https://www.google.com.tw/search?q=hello)為例子
* 用本地端電腦來講解 Chrome Network，並加入 all.js 與圖片

### AJAX 撈取網路請求的方式
* [XMLHttpRequest JS 學徒免費觀看](https://courses.hexschool.com/courses/670042/lectures/11952549)、[介紹](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
* [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，[get 範例](https://github.com/axios/axios#example)

## 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); 

<!--
小試身手
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)
* [ITHOME](https://www.ithome.com.tw/node/80062)

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

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

## 週末任務

1. 分享您之後的學習規劃，讓老師替您規劃轉職方向，並分享您的
* 大學科系
* 工作背景，或者是大學新鮮人？
* 目前前端研究到哪裡？(切版、JS 程度都提供)
* 想要到[第幾關](https://www.hexschool.com/qa/how-to.html)再開始去找工作？
* 預期想要何時找工作？若是全職學習，還有幾個月生活費？
* 目前住哪裡，未來想去哪裡求職(盡量複選)？
> 尚未學切版，可觀看此[資源](https://hexschool.tw/flgMT)，至少了解 Bootstrap 切成自己要的版
> 若不好意思公開分享，可私訊我

## CSS 教學資源(11/4更新)
* [洧杰老師 - 網頁切版練功手冊](https://hackmd.io/eBRwdofjRVynA5aEEcIm7g?view)

## 第六關主線任務

* <a href="https://rpg.hexschool.com/training/32/task?type=detail&id=317" 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)