week10 綜合能力測驗

簡單紀錄

簡述

這是來自第十週的 綜合能力測驗。寫這篇只是想記錄一下最後一題的解法，有興趣的人可以自行去玩玩看。

最後一題

最後的提示是要去看 JavaScript 的 code，所以 devtool > sources 打開 script.js 會看到這段：

$(document).ready(function () {
  $('#goForIt').on('click', function () {
    console.log('你成功按下按鈕了！')

    if (typeof myMissingNumberToSetToMakeTheRequest !== 'undefined') {
      $.ajax({
        url: './ajax.php',
        type: 'GET',
        data: 'number=' + myMissingNumberToSetToMakeTheRequest,
        dataType: 'json',
        success: function (data) {
          console.log('成功發送 ajax request')
          console.log(data)

          if (data['error'] === false) {
            var result = data['s']
            console.log('Result: ' + result)
          } else {
            console.log('error: ' + data['error'])
          }
        }
      })
    } else {
      console.log('少了些什麼...')
    }
  })
})

正確的做法是先把 #goForIt 抓出來並設定 myMissingNumberToSetToMakeTheRequest 的值來送 request。但仔細觀察後會發現有更快的做法，只要發 request 到 http://mentor-program.co/huli/game/ajax.php?number=xxx 拿 response 就好了。

number 的範圍是 1 ~ 100，所以就寫個暴力解的 function：

// 單個 response
function getResponse(n) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', `http://mentor-program.co/huli/game/ajax.php?number=${n}`, true)
    xhr.onload = () => {
      resolve(JSON.parse(xhr.responseText))
    }
    xhr.send()
  })
}

// 發出 100 次 request
~(async function getAllResponse() {
  for (let i = 1; i <= 100; i++) {
    console.log(i)
    const json = await getResponse(i)
    console.log(json)
  }
})()

備註：後來發現這題沒有開 CROS，所以如果要把這段拿去跑的話，請先到 http://mentor-program.co/huli/game/ajax.php?number=1 這個 Domain 下再貼到 console 裡；或是改用 Node.js 來發 request 也行。

最後答案就出來囉：