歡迎您光臨本站 註冊首頁

怎樣在javascript函數中將變數傳遞給服務端腳本程序

←手機掃碼閱讀     火星人 @ 2014-03-05 , reply:0

怎樣在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 編輯 ]

[火星人 ] 怎樣在javascript函數中將變數傳遞給服務端腳本程序已經有408次圍觀

http://coctec.com/docs/service/show-post-44864.html