怎樣在javascript函數中將變數傳遞給服務端腳本程序
怎樣在javascript函數中將變數傳遞給服務端腳本程序?
(有朋友問上述問題, 願把結論分享給大家).
摘 要:
伺服器端腳本運行時, 它只會解釋執行<% %>或<?php ?%> 之間的腳本語句, 它會把客戶端腳本視作
普通文本. 而客戶端腳本運行時, 伺服器端腳本又是不可見的(客戶瀏覽器上只有伺服器端腳本的執行結果).
所以, 伺服器端腳本和客戶端腳本不能相互直接操作, 也不能相互直接調用.
客戶端腳本與伺服器腳本交換數據只能通過 GET和 POST 方法(即: URL?查詢 和 post 方法)相互傳遞數據,
客戶端腳本還可以通過Ajax, 先非同步通信請求伺服器動態獲取查詢結果, 然後再分析查詢/輸出結果 ..
要解決這個問題, 先必須弄清三個概念 :
a. 客戶端腳本
b. 服務端腳本
c. B/S 模式中 " 客戶端腳本" 與 "服務端腳本" 的通信原理.
1. 客戶端腳本
客戶端腳本主指運行在客戶瀏覽器(Browser)端的腳本程序, 如 Javascript, VbScript,
通常將它們通過<script></script>嵌入在 html 源程序中, 由瀏覽器解釋執行 ..
2. 伺服器端腳本
伺服器端腳本主指運行在伺服器端(Server)的腳本程序, 如 perl, php, csp, asp(vbscript, javascript),
它們通常通過<% %>或<?php ?>等嵌入在 html 源程序中或直接運行輸出html文件,
這些腳本程序由伺服器的腳本解釋器( 或編譯器)解釋(或編譯)執行.
3. 區別/聯繫
客戶端的解釋器是由瀏覽器提供, 不必另外安裝. 伺服器端腳本解釋(編譯器)由腳本開發商提供,
一般需要另外安裝和配置(perl, php, csp, asp等的開發/運行環境).
另外, 在 ASP 中雖然 VbScript JavaScript 既可以作為客戶端腳本也可以作為伺服器端腳本,
但它們除嵌入在html源文件中的方式不同(見上)外, 兩端的函數庫等也略有不同.
4. B/S 模式中 "客戶端腳本" 與 "服務端腳本" 的通信原理
B/S 模式 (Browser/Server) 中連接客戶端與伺服器的橋樑是 HTTP 協議. HTTP提供了兩種最常用的數據
傳送方式即: GET和POST (通常 html 中的超級鏈接都是通過 GET 方法提交數據, 通過表單(form)提供的
數據可以是 POST 方法也可以是 GET).
從上面的原理可以看出, "客戶端腳本" 與 "服務端腳本" 如需互相交換數據, 也只通過 GET方法或 POST
方法進行(即 URL或表單). 另外, 除直接通過 URL和表單進行數據傳遞外, 現在你還可以通過流行 Ajax
技術通過 Javascript與 WebServer 進行非同步通信 (它的通信方式類似URL或表單)
5. 小結,
伺服器端腳本運行時, 它只會解釋執行<% %>或<?php ?%> 之間的腳本語句, 它會把客戶端腳本視作
普通文本. 而客戶端腳本運行時, 伺服器端腳本又是不可見的(客戶瀏覽器上只有伺服器端腳本的執行結果).
所以, 伺服器端腳本和客戶端腳本不能相互直接操作, 也不能相互直接調用.
客戶端腳本與伺服器腳本交換數據只能通過 GET和 POST 方法(即: URL?查詢 和 post 方法)相互傳遞數據,
客戶端腳本還可以通過Ajax, 先非同步通信請求伺服器動態獲取查詢結果, 然後再分析查詢/輸出結果 ..
6. 實例:
下面是一個Javascript 與 CSP(The C Language Service Page) 一起運行示例, 你可以輕易改成用其它語言的實現:
(可直接運行: 把 test.csp 拷貝到 cgi-bin 目錄並給預執行許可權, 在瀏覽器輸入 http://ip/cgi-bin/test.csp)
說明:
Line4, Line11 是兩條 C 語句, Line4 使用 isblankstr()函數判斷文本框 "textbox" 中是否輸入了數據,
如果輸入了數據將輸出 Line5-Line9 的 Javascript. 瀏覽器運行腳本程序, 並彈出對話框: "你輸入的是:xxx".
test.csp 源文件(見附件):
1 #!/usr/bin/cspengine
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=gb2312">
5 <% if (!isblankstr(G("textbox"))) { %>
6 <script language=JavaScript>
7 <!--
8 alert("你輸入的是: " + "<% =G("textbox") %>");
9 location.href = "<% =thisCgiPrefix(NULL) %>";
10 -->
11 </script>
12 <% } %>
13 </head>
14 <body>
15 <form method=post action="<% =thisCgiPrefix(NULL) %>">
16 請輸入: <input type=text name=textbox><p>
17 <input type=submit name=submit value="提交"><br>
18 </form>
19 </body>
20 </html>
運行結果1, 等待輸入:
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</head>
<body>
<form method=post action="?!=/cgi-bin/gnext.csp&">
請輸入: <input type=text name=textbox><p>
<input type=submit name=submit value="提交 "><br>
</form>
</body>
</html>
運行結果2, 輸入提交后 :
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script language=JavaScript>
<!--
alert("你輸入的是: " + "abc123");
location.href = "?!=/cgi-bin/gnext.csp&";
-->
</script>
</head>
<body>
<form method=post action="?!=/cgi-bin/gnext.csp&">
請輸入: <input type=text name=textbox><p>
<input type=submit name=submit value="提交 "><br>
</form>
</body>
</html>
祝你好運!
[ 本帖最後由 newzy 於 2006-10-25 11:37 編輯 ]
