网页的制作以及客户端和服务器的通信.docx
- 文档编号:11971977
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:15
- 大小:85.68KB
网页的制作以及客户端和服务器的通信.docx
《网页的制作以及客户端和服务器的通信.docx》由会员分享,可在线阅读,更多相关《网页的制作以及客户端和服务器的通信.docx(15页珍藏版)》请在冰豆网上搜索。
网页的制作以及客户端和服务器的通信
网页的制作以及客户端与服务器的通信
西电测控教研室
【实现的目标】
制作网页以及完成服务器和客户端的数据交换。
【平台信息】
-------------目标板(Star2410)--------------
CPU:
S3C2410X(ARM920-T结构)
SDRAM:
HY57V561620(32MB)
FLASH:
K9F1208(64MB)
NET:
DM9000AE
LinuxKernel:
2.6.24
-----------------HOST----------------------
PC机一台
系统采用:
WindowsXPProfessional
装载IIS,用于测试。
【版本信息】
2010年4月28日杨宁编写初始版本V1.0yangning723@
实现的目标
(1)制作一个测试网页,能够从服务器端读取数据并显示出来;
(2)可以往服务器端写入数据,并执行相应的操作;
(3)加入所需的其他元素并美化该网页。
开发板的准备条件
开发板上已经移植好BOA服务器(可参见BOA服务器的移植文档)
主机的准备条件
(1)主机使用WindowsXP系统,需要安装IIS服务器作为测试使用。
(可参见文档如何在Windows上搭建IIS服务器)
(2)浏览器要求:
IE6.0或者以上版本。
设计的思路
首先制作一个静态的网页,具体完成的有页面的文本格式化,表格的添加和操作,图片的添加,文本框的操作,单选框,复选框以及确认按钮等。
再次做一个简单的测试页面,完成服务器与客户端之间的数据交换和信息传递。
最后以静态页面为基础,修改并添加选项,做一个可以完成服务器与客户端数据交换的网页。
移植好嵌入式web服务器后,将制作好的网页放入服务器下的目录,即可以通过浏览器浏览网页并与服务器进行通信。
1、静态网页的编写主要用到HTML语言。
可完成页面的文本格式化,表格的添加和操作,图片的添加,文本框的操作,单选框,复选框以及确认按钮等操作
2、服务器获取客户端数据的方式有多种(主要有GET和POST方式)
(1)GET方式保密性不好,而且能传递的数据量较小。
(2)POST通过form的形式传递,保密性好,传递的数据量大。
3、服务器往客户端传递数据变量用到了XMLDOM以及JavaScript。
4、客户端往服务器传递数据使用的GET方式,通过url将数据传递环境变量,再通过环境变量将数据传递给CGI程序,再执行相应的程序。
具体的实验操作
首先,我们先要完成一个基本的静态页面。
HTML简介:
HTML语言的基本结构:
这是我的第一个页面。
这是粗体文本。
这是一个最基本的结构。
打开一个文本文档,复制以上代码,另存为一个.html文件,即可得到一个网页。
HTML文本格式化实例:
功能:
将网页分隔为几个部分。
具体代码:
解释说明:
HTML表格
功能:
在HTML文件中添加表格。
具体代码:
解释说明:
其中的
表格是横向添加的,这里只有一列。
如果想再加一列只需在再加入一组
这即为一行两列的表格。
HTML添加图片
功能:
在HTML文件中添加图片。
具体代码:
LaneXtensionsforInstrumentation
解释说明:
LaneXtensionsforInstrumentation
显示字符串,用h4的大小。
HTML表单:
功能:
在HTML文件中加入文本框,用来提交用户的输入。
具体代码:
解释说明:
此处为表格中的文本框。
表示一个文本框。
HTML复选框:
功能:
在HTML文件中加入复选框(可以同时选中几个)
具体代码:
解释说明:
checkbox代表复选框,DHCPassigned为复选框之后的字符。
HTML单选框:
功能:
在HTML文件中加入单选框,只能选中一个。
具体代码:
解释说明:
radio代表单选框,name为其名字,调用时的标记。
Value表示其值。
表单的动作属性(Action)和确认按钮
功能:
在HTML文件中加入确认和重置按钮。
用来提交数据或者重置。
具体代码:
解释说明:
其中的action表示点了按钮之后的动作如何,比如,此时的动作时转向一个网页。
method表示传递的方式。
现在,我们已经有了一个静态网页,但是我们还需要变量的传递,以及服务器端与客户端的数据传输。
要完成这些功能,还要用到XMLDOM。
服务器与客户端通信的方式有很多种,我们常用的是GET和POST方式。
服务器给客户端传信息:
首先,我们来讲述服务器如何给客户端传信息,这里我们用的是JavaScript中的XMLDOM来完成。
XMLDOM简介:
XML语言:
功能:
是指一套定义语义标记的规则。
他和HTML的区别,简单的说就是:
XML用来描述数据,而HTML用来显示数据。
XML比HTML更看重格式。
例如:
具体代码:
xmlversion="1.0"encoding="ISO-8859-1"?
>
解释说明:
第一行是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");//装载
具体代码:
varxmlDoc=newActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("test.xml")
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
检测XMLDOM
To:
From: