Feeds:
文章
留言

Archive for 六月 24th, 2007

MSN SpaceGoogle DocGoogle Blog
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(){       
        setInterval(GetNowDate, 1000);
    }

    // 測試用的 Script
    var url = ‘http://192.168.10.120:2527/xtt.js.php&#8217;;

    /**
     * 抓取遠端 Server 資料
     *
     * @remark 加上時間參數是避免 script 被 Cache
     */

    function GetNowDate(){       
        document.getElementById(‘dataScript’).src = url + ‘?rnd=’ + (new Date().valueOf());
    }
//–>
</script>
<!– 接受遠端資料用 –>
<script id = ‘dataScript’ type = ‘text/javascript’ src = " ></script>

</head>
<body onload = ‘body_onload();’>   
    Time: <label id=’lblTime’></label><br/>
    Get: <label id=’lblGet’></label><br/>
    <button onclick = ‘GetNowDate()’>Refresh</button>
</body>
</html>

Server – xtt.js.php

<?php
$v = date(‘h:i:s’);
$rnd = $_GET[‘rnd’];
echo <<< BOF
var xtt = function(){

    return {
        now: ‘{$v}’,
        get: ‘{$rnd}’
    };
};

script_onload();
BOF;
?>

解說
Client 端的關鍵在 dataScript 的 <Script>,動態調整 src 屬性來送出新的 Request,且這個 Request 可加入 Get 參數,當 Server 接收到之後,產生一個 xtt 的 Function 並且在其中包裝回傳資料。在 xtt.js.php 中的最後一行 script_onload() 是用來通知 Client 端 Javascript 已經載入完成。這個作法是因為 IE <script> 的 onload 事件沒有辦法運作的權宜作法。當觸動 script_onload() Callback 之後,Client 就知道資料已經處理完成,可以抓取伺服器回傳的資料。

Read Full Post »