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

小灰灰 2022-08-24 01:51 174阅读 0赞

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 內容來回傳資料。 
 
**實作**

<table> 
 <tbody> 
 <tr> 
 <td>Client - test.html </td> 
 </tr> 
 <tr> 
 <td>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; new document &lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=big5"/&gt; &lt;meta name="author" content="Chui-Wen Chiu"&gt; &lt;script type = 'text/javascript'&gt; &lt;!--// &nbsp;&nbsp;&nbsp; /** &nbsp;&nbsp;&nbsp; &nbsp;* Script Callback 用 &nbsp;&nbsp;&nbsp; &nbsp;* &nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp; function script_onload(){&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // 將資料寫入 Label &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var result = xtt(); &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (result != null){ &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; document.getElementById('lblTime').innerText = result.now; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; document.getElementById('lblGet').innerText = result.get; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; function body_onload(){&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setInterval(GetNowDate, 1000); &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; // 測試用的 Script &nbsp;&nbsp;&nbsp; var url = 'http://192.168.10.120:2527/xtt.js.php'; &nbsp;&nbsp;&nbsp; /** &nbsp;&nbsp;&nbsp; &nbsp;* 抓取遠端 Server 資料 &nbsp;&nbsp;&nbsp; &nbsp;* &nbsp;&nbsp;&nbsp; &nbsp;* @remark 加上時間參數是避免 script 被 Cache &nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp; function GetNowDate(){&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; document.getElementById('dataScript').src = url + '?rnd=' + (new Date().valueOf()); &nbsp;&nbsp;&nbsp; } //--&gt; &lt;/script&gt; &lt;!-- 接受遠端資料用 --&gt; &lt;script id = 'dataScript' type = 'text/javascript' src = '' &gt;&lt;/script&gt; &lt;/head&gt; &lt;body onload = 'body_onload();'&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Time: &lt;label id='lblTime'&gt;&lt;/label&gt;&lt;br/&gt; &nbsp;&nbsp;&nbsp; Get: &lt;label id='lblGet'&gt;&lt;/label&gt;&lt;br/&gt; &nbsp;&nbsp;&nbsp; &lt;button onclick = 'GetNowDate()'&gt;Refresh&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 <tr> 
 <td>Server - xtt.js.php </td> 
 </tr> 
 <tr> 
 <td>&lt;?php $v = date('h:i:s'); $rnd = $_GET['rnd']; echo &lt;&lt;&lt; BOF var xtt = function(){ &nbsp;&nbsp;&nbsp; return { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; now: '{$v}', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; get: '{$rnd}' &nbsp;&nbsp;&nbsp; }; }; script_onload(); BOF; ?&gt; </td> 
 </tr> 
 </tbody> 
</table>

**解說** 
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][http_chuiwenchiu.spaces.live.com_blog_cns_CA5D9227DF9E78E8_1091.entry]

[http_chuiwenchiu.spaces.live.com_blog_cns_CA5D9227DF9E78E8_1091.entry]: http://chuiwenchiu.spaces.live.com/blog/cns!CA5D9227DF9E78E8!1091.entry