Chui-Wen Chiu
2007.06.21
測試環境
1. Windows XP SP2
2. IE 6
概念
HTML 中的 <script> 一般用來引入外部 javascript 檔案,當瀏覽器遇到 <script> 會自動下載 src 指定的檔案並且進行解析,如果 HTML 中動態變更 <script> 的 src 屬性或是動態新增 <script> 時,IE 也會下載並解析檔案內容。另外,<script> 引入的外部檔案並沒有限制一定要在同一個網域(domain),因此,可以透過 <script> 的 src 向遠端伺服器送出 Get 請求,並透過產生新的 Javascript 內容來回傳資料。
實作
Client – test.html |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=big5"/> <meta name="author" content="Chui-Wen Chiu"> <script type = ‘text/javascript’> <!–// /** * Script Callback 用 * */ function script_onload(){ // 將資料寫入 Label var result = xtt(); if (result != null){ document.getElementById(‘lblTime’).innerText = result.now; document.getElementById(‘lblGet’).innerText = result.get; } } function body_onload(){ // 測試用的 Script /** </head> |
Server – xtt.js.php |
<?php $v = date(‘h:i:s’); $rnd = $_GET[‘rnd’]; echo <<< BOF var xtt = function(){ return { script_onload(); |
解說
Client 端的關鍵在 dataScript 的 <Script>,動態調整 src 屬性來送出新的 Request,且這個 Request 可加入 Get 參數,當 Server 接收到之後,產生一個 xtt 的 Function 並且在其中包裝回傳資料。在 xtt.js.php 中的最後一行 script_onload() 是用來通知 Client 端 Javascript 已經載入完成。這個作法是因為 IE <script> 的 onload 事件沒有辦法運作的權宜作法。當觸動 script_onload() Callback 之後,Client 就知道資料已經處理完成,可以抓取伺服器回傳的資料。
發表留言