《网页的制作以及客户端和服务器的通信》由会员分享，可在线阅读，更多相关《网页的制作以及客户端和服务器的通信（12页珍藏版）》请在金锄头文库上搜索。
1、网页的制作以及客户端与服务器的通信西电测控教研室【实现的目标】制作网页以及完成服务器和客户端的数据交换。【平台信息】目标板(Star2410)CPU:S3C2410X(ARM920-T 结构)SDRAM: HY57V561620(32MB)FLASH: K9F1208(64MB)NET:DM9000AELinux Kernel: 2.6.24HOST-PC机一台系统采用：Windows XP Professional 装载IIS,用于测试。【版本信息】2010年4月28 口 杨宁 编写初始版本V1.0 实现的目标（1）制作一个测试网页，能够从服务器端读取数据并显示出来:（2）可以往服务器端写入
2、数据，并执行相应的操作；（3）加入所需的其他元素并美化该网页。开发板的准备条件开发板上己经移植好BOA服务器（可参见BOA服务器的移植文档）主机的准备条件（1）主机使用WmdowsXP系统，需要安装IIS服务器作为测试使用。（可参见文档如何在Windows上搭建IIS服务器）（2）浏览器要求：正6.0或者以上版本。设计的思路首先制作一个静态的网页，具体完成的有页面的文本格式化，表格的添加和操作，图 片的添加，文本框的操作，单选框，复选框以及确认按钮等。再次做一个简单的测试页面，完成服务器与客户端之间的数据交换和信息传递。最后以静态页面为基础，修改并添加选项，做一个可以完成服务器与客户端数据交换
3、 的网页。移植好嵌入式web服务器后，将制作好的网页放入服务器卜的目录，即可以通过浏览 器浏览网页并与服务器进行通信o1、静态网页的编写主要用到HTML语言。可完成页面的文本格式化，表格的添加和操 作，图片的添加，文本框的操作，单选框，复选框以及确认按钮等操作2、服务器获取客户端数据的方式有多种（主要有GET和POST方式）（1）GET方式保密性不好，而且能传递的数据量较小。（2）POST通过fbrm的形式传递，保密性好，传递的数据量大。3、服务器往客户端传递数据变量用到了 XMLDOM以及JavaScripto4、客户端往服务器传递数据使用的GET方式，通过wl将数据传递环境变量，再通过环境
4、 变量将数据传递给CGI程序，再执行相应的程序。具体的实验操作首先，我们先要完成一个基本的静态页面。HTML简介：HTML语言的基本结构：页面的标题v/titleJVp这是我的第一个页面。Vb这是粗体文本。这是一个最基本的结构：打开一个殳本号，复制以上代衬顶吞为一个.html友件， 即可得到一个网页。HTML文本格式化实例：功能：将网页分隔为几个部分。具体代码：Jframeset cols-*H7No7 noresize解释说明：这条语句将网页分割为 20%, 80%两部分，参数rows表示横向分割，即分为上下两个部分；frameboider=0表示边框不显示。表示第一部分引用该网页：scio
5、llmg表示不允许滚动条；noresize表示不可改动大小。表示将剩卜的第二部分再分成 25%, 75%两部分，参数cols表示纵向分割，即分为左右两部分；, noresize即为左右分割的第一部分；v&ameset cols=40%,*”表示再分割为左右两部分，其中40%的部分做选择项，保留 着，60%做浮动项，可变换。7Non noresize 其中有 name 选项， 表明其作用，用作选择用途。上下两物中的上都，占局酬20%Lan rXt ensi ons for Instrumentation左边的选择椎Instrument ModelLXI -1ManufacturerExanrpl
6、e Test IncSerial Nun)brr651 93Description|Exawlc Lxi. hist rumen-LXI ClassClass CLXI Versi on1.0Host NaircLxidcvcl. cxawlctcst.MAC Address00-CC-6E-76-5B-C8TCP/IP Address192.168. 0.110Firnwarc Revision1.0Current TimeCurrent Time source |lEEE-1528 PTPVISA resource stringAsset Nuinberl右途的直客框HTML表格功能：在H
7、TML文件中添加表格o具体代码：JHOME LAN Configuration解释说明：设置表格，且边框粗度为1；设置表格背景颜色，为灰色：HOME v/th表格的内容为 HOME。其中的表示 HOME 的超级链接。表格是横向添 加的，这里只有一列。LAN Configuration如果想再加一列只需在再加入一组vth.也即可，例如：Instmment ModelLXI-l这即为一行两列的表格。Instrument Model LXI-1HTML添加图片功能：在HTML文件中添加图片。具体代码：Jvpinig src=MLXI-logo.pngH alt=MLXI LOGO”Lan exten
8、sions fbr Iiistnimentation解释说明：mig sic=nLXLlogo.pngH alt=nLXI LOGO”引用图片 LXMogo.png,如果无法显示图 片，则显示LXI LOGO oLaii extensions fbr Iiistmmentation 显示字符串，用 h4 的大小。Lan extensions for InstrumentationHTML表单：功能：在HTML文件中加入文本框，用来提交用户的输入。具体代码：Hostname解释说明：此处为表格中的文本框。表示一个文本 框。HostnsoneHTML复选框：功能：在HTML文件中加入复选框（可以同
9、时选中几个） 具体代码： DHCP assigned Auto IP Static IP解释说明：checkbox代表复选框，DHCPassigned为复选框之后的字符。0 DHCP assigned Auto IP Static IPHTML单选框：功能：在HTML文件中加入单选框，只能选中一个。具体代码：DisabledEnabled解释说明：radio代表单选框，name为其名季，调用时的标记I Value表宗其值:。Disabled0 Enabled表单的动作属性（Action）和确认按钮功能：在HTML文件中加入确认和重置按钮。用来提交数据或者重置。具体代码：解释说明：其中的action表示点了按钮之后的动作如何，比如此时的动作时转向一个 网页。method表示传递的方式。SubmitReset现在，我们已经有了一个静态网页，但是我们还需要变量的传 递，以及服务器端与客户端的数据传输。要完成这些功能，还要用 到 XML DOMo服务器与客户端通信的方式有很多种，我们常用的是GET和POST方式。服务器给客户端传信息：首先，我们来讲述服务器如何给客户端传信息，这里我们用的是JavaScript 的XML DOM来完成。XML DOM 简介：
