利用Javascript建立Web應(yīng)用
更新時(shí)間:2012-01-24 | 發(fā)布人:本站 | 點(diǎn)擊率:293 次
隨著Internet/Intranet應(yīng)用普及,越來越多的用戶在設(shè)計(jì)上采用Client/Server結(jié)構(gòu),建立自己的Internet/Intranet應(yīng)用。客戶端程序負(fù)責(zé)向Web服務(wù)器發(fā)送請求,并負(fù)責(zé)從Web服務(wù)器接受和解釋顯示超文本。如果要生成動態(tài)、 交互式Web頁面,就必須通過公共網(wǎng)關(guān)接口(CGI),CGI程序可采用Perl,C++,JavaScript等編寫,而目前流行的方法是采用Java或JavaScript。
一、JavaScript簡介
JavaScript是個(gè)腳本編程語言,好處在于它既適用于客戶端應(yīng)用,又可用于服務(wù)器端應(yīng)用開發(fā)。例如,在客戶端它可用于編寫Web瀏覽器程序,而在服務(wù)器中,它可用于編寫處理Web瀏覽器提交的信息,并相應(yīng)地更新瀏覽器顯示的Web服務(wù)器程序。盡管JavaScript能滿足一些服務(wù)器方編程需求,但還需要一些服務(wù)器方程序來支持更高級的Web應(yīng)用程序。例如,訪問數(shù)據(jù)庫或進(jìn)行特殊處理。為此,Netscape公司專門提供了開發(fā)JavaScript服務(wù)器程序的集成環(huán)境Livewire。
二、Livewire簡介
Livewire是個(gè)WEB應(yīng)用程序開發(fā)環(huán)境,在Windows NT4.0系統(tǒng)下安裝Netscape Fast track就可使用它。Livewire可用來開發(fā)瀏覽器和服務(wù)器方的Web應(yīng)用程序。從而在服務(wù)器方可替代原來需要的CGI程序。Livewire和Netscape服務(wù)器可以從Netscape的Web站點(diǎn)http://home.Netscape.com下載(30天免費(fèi)試用)。
三、服務(wù)器方JavaScript編程
服務(wù)器方JavaScript程序是用Livewire開發(fā)的,具體編程步驟如下:
1、用客戶機(jī)方JavaScript和服務(wù)器方JavaScript嵌入HTML中創(chuàng)建源文件。
2、用Livewire編譯器將源文件編譯成.WEB文件。
服務(wù)器方JavaScript為了和客戶機(jī)方JavaScript區(qū)別,提供了4種對象,request,client,project和server。
下面,我們就可以開發(fā)一些程序了,首先,以一個(gè)簡單的例子向大家介紹開發(fā)過程:
學(xué)生.htm 提供學(xué)生注冊登記表,讓學(xué)生填寫。
Process.htm 處理學(xué)生在學(xué)生.htm注冊登記表中輸入的數(shù)
據(jù),將客戶機(jī)方與服務(wù)器方JavaScript聯(lián)合起
來顯示學(xué)生登記表,并提交給display.htm。
display.htm 顯示學(xué)生.htm和process.htm收集的數(shù)據(jù),并
存放在client屬性中。
record.htm 將學(xué)生登記表計(jì)入文件student.txt中。
程序附后:
學(xué)生.htm
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>學(xué)生情況登記</title>
</head>
<p align="center"><font size="5">Welcome to computer center</font></p>
<form action="process.htm">
</form>
<p><font color="#00FF40" size="4">請輸入學(xué)號:</font></p>
<form method="POST">
<p><input type="text" size="13" name="T1"> <input
type="submit" value="Continue"> </p>
</form>
</body>
</html>
Process.htm
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb_2312-80">
<title></title>
</head>
<body bgcolor="#808080">
<SERVER>
<p>client.t1=request.t1
write("<script language="javaScript">")
write("</SCRIPT>")
</SERVER>
</body>
</html>
</script></p>
<p align="center"><font color="#FFFF00" size="5">學(xué)生情況登記</font></p>
<form action="display.htm">
姓名 <input type="text" size="14" name="Name">
性別 <input type="text" size="7" name="Sex">
出生年月<input type="text" size="30" name="Birth">
家庭住址<input type="text" size="11" name="Address">
郵政編碼<input type="text" size="11" name="Zip">
電話號碼<input type="text" size="11" name="Tel">
</p>
</form>
</body>
</html>
display.htm
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>client.</title>
</head>
<body bgcolor="#FFFFFF">
<SERVER>
<p>client.Name=request.Name
client.Sex=request.Sex
client.Birth=request.Birth
client.Address=request.Address
client.Zip=request.Zip
client.Tel=request.Tel </p>
<p>write(client.Name+"
")
write(client.Birth+"
")
write(client.Address+"
")
write(client.Zip+"
")
write(client.Tel+"
")
</SERVER> </p>
<form action="finish.htm">
<p><input type="submit" value="繼續(xù)"> </p>
</form>
</body>
</html>
record.htm
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>f=</title>
</head>
<body bgcolor="#FFFFFF">
<SERVER>
<p>f=new file("student.txt")
f.open("a")
f.writeln(client.Name)
f.writeln(client.Sex)
f.writeln(client.Birth)
f.writeln(client.Address)
f.writeln(client.Zip)
f.writeln(client.Tel)
f.close() </p>
</SERVER></body>
</html>