普考申論題
106年
[資訊處理] 程式設計概要
第 一 題
📖 題組:
五、AJAX 即「Asynchronous JavaScript and XML」(非同步的 JavaScript 與 XML 技術)為一重要且普遍用來產生高互動網頁的技術,可讓使用者在執行 AJAX 網頁時就像在執行桌上電腦程式(desktop application)一樣順暢(如圖二)。
圖二、2 個 AJAX 範例程式執行結果
五、AJAX 即「Asynchronous JavaScript and XML」(非同步的 JavaScript 與 XML 技術)為一重要且普遍用來產生高互動網頁的技術,可讓使用者在執行 AJAX 網頁時就像在執行桌上電腦程式(desktop application)一樣順暢(如圖二)。
Example
📝 此題為申論題,共 3 小題
小題 (一)
請說明 AJAX 三個主要技術為何並說明其目的。(9 分)
思路引導 VIP
看到 AJAX,首先拆解其全名「Asynchronous JavaScript and XML」,從字面上即可推導出核心構成。接著對照題目提供的程式碼,找出執行非同步請求的 XMLHttpRequest、負責邏輯與更新畫面的 JavaScript/DOM,以及隱含在傳輸過程中的資料格式(XML/JSON),並分別說明它們在不重新載入網頁的情況下,如何協作完成局部更新。
小題 (二)
並請以以下網頁為例,當使用者輸入字元後的網頁反應,說明傳統非 AJAX 與 AJAX網頁不同之處。(10 分)
思路引導 VIP
看到這題,首先要釐清「傳統網頁」與「AJAX 網頁」在資料傳輸與畫面更新機制上的根本差異。解題關鍵在於對比兩者在使用者觸發事件(如輸入字元)後,瀏覽器如何與伺服器溝通(同步 vs. 非同步),以及如何呈現結果(整頁刷新 vs. 局部 DOM 更新),並務必結合題目提供的程式碼與圖片實例進行說明。
小題 (三)
請說明網頁程式碼中‘xmlhttp.readyState==4’,‘xmlhttp.status==200’及‘"gethint.php?q="+str’代表的意義為何?(6 分)
思路引導 VIP
看到 AJAX 題目,首先回想 XMLHttpRequest 的生命週期及 HTTP 通訊協定。針對 readyState、status 需精確寫出其代表的『請求狀態』及『HTTP 狀態碼』;針對 URL 則需說明 GET 方法中 Query String 的參數傳遞機制。