第六堂:AJAX 操控伺服器之術

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

什麼是網路請求?

  • 圖解發出請求的流程,以 Google 關鍵字為例子
  • 用本地端電腦來講解 Chrome Network,並加入 all.js 與圖片
  • 用 Node.js 展示(最後有時間再分享),此部分有錄影

AJAX 撈取網路請求的方式

axios


// 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
不行清單:里長台南公有停車場
可以清單:BMI kata全國交通運輸十分鐘雨量(用 open api)PM2.5

網路請求種類

常用的請求方法如下,axios 皆有支援,本堂先專注 get 取得資料:

  • get
  • post
  • delete
  • put

支線任務

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

第六關主線任務