---
# System prepended metadata

title: Untitled

---


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

``` JavaScipr

// 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