普考申論題
106年
[資訊處理] 程式設計概要
第 二 題
📖 題組：
五、AJAX 即「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術）為一重要且普遍用來產生高互動網頁的技術，可讓使用者在執行 AJAX 網頁時就像在執行桌上電腦程式（desktop application）一樣順暢（如圖二）。
<html lang="en-US">
<head><script>
function showHint(str)
{
if (str.length==0) {
document.getElementById("txtHint").innerHTML=""; return;
} else {
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText; }
};
xmlhttp.open("GET","gethint.php?q="+str, true);
xmlhttp.send();
}
}
</script></head>
<body>
<div class="w3-example">
<h3>Example</h3>
<form action="javascript:void(0);" class="w3-code-result">
<p><b>Start typing a name in the input field below:</b></p>
<p> Name: <input type="text" id="txt1" onkeyup="showHint(this.value)" size="20">
Suggestions: <span id="txtHint"></span> </p>
</form>
</div></body></html>
圖二、2 個 AJAX 範例程式執行結果
五、AJAX 即「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術）為一重要且普遍用來產生高互動網頁的技術，可讓使用者在執行 AJAX 網頁時就像在執行桌上電腦程式（desktop application）一樣順暢（如圖二）。
<html lang="en-US">
<head><script>
function showHint(str)
{
if (str.length==0) {
document.getElementById("txtHint").innerHTML=""; return;
} else {
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText; }
};
xmlhttp.open("GET","gethint.php?q="+str, true);
xmlhttp.send();
}
}
</script></head>
<body>
<div class="w3-example">
<h3>Example</h3>
<form action="javascript:void(0);" class="w3-code-result">
<p><b>Start typing a name in the input field below:</b></p>
<p> Name: <input type="text" id="txt1" onkeyup="showHint(this.value)" size="20">
Suggestions: <span id="txtHint"></span> </p>
</form>
</div></body></html>
圖二、2 個 AJAX 範例程式執行結果
📝 此題為申論題，共 3 小題
小題 (二)
並請以以下網頁為例，當使用者輸入字元後的網頁反應，說明傳統非 AJAX 與 AJAX網頁不同之處。（10 分）
思路引導 VIP
看到這題，首先要釐清「傳統網頁」與「AJAX 網頁」在資料傳輸與畫面更新機制上的根本差異。解題關鍵在於對比兩者在使用者觸發事件（如輸入字元）後，瀏覽器如何與伺服器溝通（同步 vs. 非同步），以及如何呈現結果（整頁刷新 vs. 局部 DOM 更新），並務必結合題目提供的程式碼與圖片實例進行說明。
小題 (一)
請說明 AJAX 三個主要技術為何並說明其目的。（9 分）
思路引導 VIP
看到 AJAX，首先拆解其全名「Asynchronous JavaScript and XML」，從字面上即可推導出核心構成。接著對照題目提供的程式碼，找出執行非同步請求的 XMLHttpRequest、負責邏輯與更新畫面的 JavaScript/DOM，以及隱含在傳輸過程中的資料格式（XML/JSON），並分別說明它們在不重新載入網頁的情況下，如何協作完成局部更新。
小題 (三)
請說明網頁程式碼中‘xmlhttp.readyState==4’，‘xmlhttp.status==200’及‘"gethint.php?q="+str’代表的意義為何？（6 分）
思路引導 VIP
看到 AJAX 題目，首先回想 XMLHttpRequest 的生命週期及 HTTP 通訊協定。針對 readyState、status 需精確寫出其代表的『請求狀態』及『HTTP 狀態碼』；針對 URL 則需說明 GET 方法中 Query String 的參數傳遞機制。