利用動態 Script 讓 Local 端的 HTML 跨網域存取 Server 上的資料

来源：互联网发布：最新免费读书软件编辑：程序博客网时间：2024/04/30 12:14

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>

<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 就知道資料已經處理完成，可以抓取伺服器回傳的資料。

转自：http://chuiwenchiu.spaces.live.com/blog/cns!CA5D9227DF9E78E8!1091.entry