网页的制作以及客户端和服务器的通信Word文档格式.docx
- 文档编号:4691989
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:15
- 大小:85.68KB
网页的制作以及客户端和服务器的通信Word文档格式.docx
《网页的制作以及客户端和服务器的通信Word文档格式.docx》由会员分享,可在线阅读,更多相关《网页的制作以及客户端和服务器的通信Word文档格式.docx(15页珍藏版)》请在冰点文库上搜索。
(2)浏览器要求:
IE6.0或者以上版本。
设计的思路
首先制作一个静态的网页,具体完成的有页面的文本格式化,表格的添加和操作,图片的添加,文本框的操作,单选框,复选框以及确认按钮等。
再次做一个简单的测试页面,完成服务器与客户端之间的数据交换和信息传递。
最后以静态页面为基础,修改并添加选项,做一个可以完成服务器与客户端数据交换的网页。
移植好嵌入式web服务器后,将制作好的网页放入服务器下的目录,即可以通过浏览器浏览网页并与服务器进行通信。
1、静态网页的编写主要用到HTML语言。
可完成页面的文本格式化,表格的添加和操作,图片的添加,文本框的操作,单选框,复选框以及确认按钮等操作
2、服务器获取客户端数据的方式有多种(主要有GET和POST方式)
(1)GET方式保密性不好,而且能传递的数据量较小。
(2)POST通过form的形式传递,保密性好,传递的数据量大。
3、服务器往客户端传递数据变量用到了XMLDOM以及JavaScript。
4、客户端往服务器传递数据使用的GET方式,通过url将数据传递环境变量,再通过环境变量将数据传递给CGI程序,再执行相应的程序。
具体的实验操作
首先,我们先要完成一个基本的静态页面。
HTML简介:
HTML语言的基本结构:
<
html>
head>
title>
页面的标题<
/title>
/head>
body>
p>
这是我的第一个页面。
b>
这是粗体文本。
/b>
/p>
/body>
/html>
这是一个最基本的结构。
打开一个文本文档,复制以上代码,另存为一个.html文件,即可得到一个网页。
HTML文本格式化实例:
功能:
将网页分隔为几个部分。
具体代码:
framesetrows="
20%,80%"
frameborder="
0"
>
framesrc="
logo-up.html"
scrolling=”No”noresize>
framesetcols="
25%,75%"
LXIlogo.html"
framesetcols=“40%,*"
choose.html"
name="
choose"
content-1.html"
content"
/frameset>
解释说明:
这条语句将网页分割为20%,80%两部分,参数rows表示横向分割,即分为上下两个部分;
frameborder="
表示边框不显示。
logo-up.html"
表示第一部分引用该网页;
scrolling表示不允许滚动条;
noresize表示不可改动大小。
表示将剩下的第二部分再分成25%,75%两部分,参数cols表示纵向分割,即分为左右两部分;
即为左右分割的第一部分;
表示再分割为左右两部分,其中40%的部分做选择项,保留着,60%做浮动项,可变换。
其中有name选项,表明其作用,用作选择用途。
HTML表格
在HTML文件中添加表格。
tableborder="
1"
>
trbgcolor="
grey"
th>
ahref="
/test/content-1.html"
target="
HOME<
/a>
<
/th>
/tr>
/test/content-2.html"
LANConfiguration<
/table>
设置表格,且边框粗度为1;
设置表格背景颜色,为灰色;
表格的内容为HOME。
其中的<
表示HOME的超级链接。
表格是横向添加的,这里只有一列。
如果想再加一列只需在再加入一组<
……<
即可,例如:
tr>
td>
InstrumentModel<
/td>
LXI-1<
这即为一行两列的表格。
HTML添加图片
在HTML文件中添加图片。
br>
imgsrc="
LXI-logo.png"
alt="
LXILOGO"
h4>
LaneXtensionsforInstrumentation
/h4>
引用图片LXI-logo.png,如果无法显示图片,则显示LXILOGO。
LaneXtensionsforInstrumentation<
显示字符串,用h4的大小。
HTML表单:
在HTML文件中加入文本框,用来提交用户的输入。
Hostname<
form>
inputtype="
text"
/form>
此处为表格中的文本框。
表示一个文本框。
HTML复选框:
在HTML文件中加入复选框(可以同时选中几个)
checkbox"
DHCPassigned
AutoIP
StaticIP
checkbox代表复选框,DHCPassigned为复选框之后的字符。
HTML单选框:
在HTML文件中加入单选框,只能选中一个。
radio"
able"
value="
Disabled"
Disabled
Enabled"
Enabled
radio代表单选框,name为其名字,调用时的标记。
Value表示其值。
表单的动作属性(Action)和确认按钮
在HTML文件中加入确认和重置按钮。
用来提交数据或者重置。
formname="
input"
action="
method="
get"
submit"
Submit"
content-2.html"
Reset"
其中的action表示点了按钮之后的动作如何,比如,此时的动作时转向一个网页。
method表示传递的方式。
现在,我们已经有了一个静态网页,但是我们还需要变量的传递,以及服务器端与客户端的数据传输。
要完成这些功能,还要用到XMLDOM。
服务器与客户端通信的方式有很多种,我们常用的是GET和POST方式。
服务器给客户端传信息:
首先,我们来讲述服务器如何给客户端传信息,这里我们用的是JavaScript中的XMLDOM来完成。
XMLDOM简介:
XML语言:
是指一套定义语义标记的规则。
他和HTML的区别,简单的说就是:
XML用来描述数据,而HTML用来显示数据。
XML比HTML更看重格式。
例如:
?
xmlversion="
1.0"
encoding="
ISO-8859-1"
note>
to>
George<
/to>
from>
John<
/from>
heading>
Reminder<
/heading>
Don'
tforgetthemeeting!
/note>
第一行是XML声明。
它定义XML的版本(1.0)和所使用的编码(ISO-8859-1=Latin-1/西欧字符集。
)
第二行描述文档的根元素(像在说:
“本文档是一个便签”)
接下来四行描述根的四个子元素:
(to,from,heading和body)
最后一行定义根元素的结尾。
打开一个文本文档,复制以上代码,另存为一个.XML文件,即可XML文档。
XMLDOM
是针对XML文档的文档对象模型,是DOM的一种。
DOM有很多功能,这里我们只介绍我们要用到的几种功能。
要完成服务器传数据给客户端,简单说来,有三步:
创建XMLDOM;
同步;
装载XMLDOM。
创建装载操作要严格遵守以下顺序:
varxmlDoc=createXMLDOM();
//创建
xmlDoc.async=false;
//同步
xmlDoc.load("
test.xml"
);
//装载
scripttype="
text/javascript"
for="
window"
event="
onload"
varxmlDoc=newActiveXObject("
Microsoft.XMLDOM"
xmlDoc.async="
false"
nodes=xmlDoc.documentElement.childNodes
to.innerText=nodes.item(0).text
from.innerText=nodes.item
(1).text
header.innerText=nodes.item
(2).text
body.innerText=nodes.item(3).text
/script>
HTMLusingXMLdata<
bodybgcolor="
yellow"
h1>
检测XMLDOM<
/h1>
To:
spanid="
to"
/span>
br/>
From:
from"
hr>
header"
body"
————————华丽的分割线————————华丽的分割线—————————
以下为名为test的XML文件
gb2312"
?
yn<
yy<
header>
hello<
/header>
helloyn<
…………<
/Script>
表示使用JavaScript。
)创建XMLDOM。
同步方式,是指XML加载完成后再执行后面的。
)加载名为test.xml的文件。
nodes=xmlDoc.documentElement.childNodes读取节点信息。
客户端给服务器传信息:
一般来说,在网页设计中,客户端给服务器传信息时,都是需要提交按钮,总之会有一个提交动作。
记得我们之前讲静态网页的时候,讲到提交按钮了吗?
这里,我们做一个小的修改,来完成客户端给服务器传信息。
这是那个提交按钮,我们现在把action一处做修改,按提交之后,我们需要有的动作时转向:
要将"
改为“/cgi-bin/XXXX”此处的XXXX为自己编写的CGI程序,用来处理我们所提交的数据。
testof“GET”<
TestGETForm<
frommethod=“GET”action=“/cgi-bin/test_get”>
h2>
Inputyourteststrings:
/h2>
ID:
inputtype=textname=id>
br/>
Name:
inputtype=textname=name>
当我们在这个页面中的文本框中输入时,假设我们在ID和Name中分别输入:
111和scrum。
此时,浏览器发送给服务器的HTTP请求中,uri对应的数据将是“/cgi-bin/test_get?
id=111&
name=scrum”。
而uri可以被parse_uri函数解析,得到cgiargs的值为“id=111&
name=scrum”,这些参数通过环境变量“QUERY_STRING”被传送到CGI程序中。
实验结果的验证
在WindowsXP下ID架设IIS服务器,测试静态网页,可以显示。
测试服务器给客户端传递变量,也可以实现。
在开发板的服务器下,测试静态网页,可以显示。
测试服务器给客户端传递变量,验证客户端给服务器端传递变量,可实现。
关于该应用程序的移植说明
关于移植方面:
前面已经将HTML分成了很多小的模块,需要添加的话只要复制代码既可以使用。
XMLDOM和JavaScript也是模块化的东西,只需要改变XML文件里的数据,即可完成变量的改变,达到通信的效果。
CGI程序的编写需要自己去写,因为所要达到的效果不一样。
存在的问题及待改进的地方
在该试验中,需要注意的问题就是:
1HTML语言不是很规范的语言,有时间标识不完全也可以正确的显示,为了以后编写程序的规范,希望将HTML尽量写的规范,对于程序的调试,替换都有好处。
2XMLDOM中一定要严格遵守这三步:
否则在XML没有加载前就显示网页,即达不到数据传递的效果。
3XMLDOM中本身有加载XML中节点的功能,开始是想通过直接加载节点来完成客户端往服务器写数据,但在IIS测试时遇到了问题,提示权限不够,然后将IIS共享文件夹设置为可读可写的模式,但是设置不成功,关闭后再打开又变成了只读的模式。
所以放弃了这个方案,改用CGI程序来往服务器发送数据。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 以及 客户端 服务器 通信
![提示](https://static.bingdoc.com/images/bang_tan.gif)