題組內容

五、假設某網頁伺服器在路徑"/instantTemperature"下有一服務，可提供臺灣六都的即時
氣溫資料。傳回的內容為 JSON 格式的文字，以下為其範例：
{"臺北市"：30,"新北市"：30,"桃園市"：31,"臺中市"：33,"臺南市"：34,"高雄市"：
34}。
現在假設同伺服器內有一網頁內容如下：
＜!DOCTYPE html＞＜html＞＜body＞
＜fieldset＞＜form＞
＜input type="button" value="顯示六都即時氣溫" onclick='getTemperature（）' /＞
＜/form＞＜div id="temperature_div"＞
＜/fieldset＞
＜script＞ ... ＜/script＞
＜/body＞＜/html＞
請在＜script＞ ... ＜/script＞區內提供必要的 javascript 程式碼，使得此網頁的瀏覽者，
一旦按下[顯示六都即時氣溫]按鈕後，即能啟動該程式。而此程式將提供以下步
驟：

1.被呼叫後首先會利用 AJAX 功能，向同網站的/instantTemperature 網址送出 HTTP
GET 要求，並接收回傳的即時六都氣溫資訊。（10 分）

詳解 (共 1 筆)

詳解 提供者：hchungw

<!DOCTYPE html> <html> <head> <title>即時氣溫顯示</title> </head> <body> <fieldset> <form> <input type="button" value="顯示六都即時氣溫" onclick="getTemperature()" /> </form> <div id="temperature_div"></div> </fieldset>

<script> function getTemperature() { // 創建 XMLHttpRequest 物件 var xhttp = new XMLHttpRequest(); // 定義回調函數 xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { try { // 將回傳的 JSON 字串轉換成物件 var temperatures = JSON.parse(this.responseText); // 構建顯示結果的 HTML 字串 var result = "<h3>六都即時氣溫</h3><ul>"; for (var city in temperatures) { result += "<li>" + city + ": " + temperatures[city] + "°C</li>"; } result += "</ul>"; // 將結果顯示在 temperature_div 中 document.getElementById("temperature_div").innerHTML = result; } catch (e) { document.getElementById("temperature_div").innerHTML = "資料格式錯誤！"; } } else if (this.readyState == 4) { // 處理非200狀態碼的情況 document.getElementById("temperature_div").innerHTML = "無法獲取即時氣溫資訊。"; } }; // 發送 HTTP GET 請求 xhttp.open("GET", "/instantTemperature", true); xhttp.send(); } </script> </body> </html>

說明

  1. HTML 部分：

    • 包含一個按鈕，點擊後將呼叫 getTemperature() 函數。
    • temperature_div 用於顯示取得的即時氣溫資訊。

  2. JavaScript 部分：

    • getTemperature() 函數：這是按鈕點擊後被呼叫的函數。
      • 創建一個 XMLHttpRequest 物件。
      • 設置 onreadystatechange 回調函數，當請求完成且狀態為 200 時，解析 JSON 資料並更新 temperature_div 內容。
      • 使用 xhttp.open("GET", "/instantTemperature", true) 設置 HTTP GET 請求。
      • 使用 xhttp.send() 發送請求。
    • 錯誤處理：
      • 如果請求完成但狀態碼不是 200，顯示錯誤訊息。
      • 如果 JSON 解析失敗，顯示格式錯誤訊息。