桂林理工大学 信息科学与工程学校 网络11-1
Web技术实验报告
（实验一 Web客户端编程）
学院：班级：姓名：学号：信息科学与工程学院
网络11-1班
曾 庆 勇
3110757118
1
桂林理工大学 信息科学与工程学校 网络11-1
实验一 Web客户端编程
一 、实验目的
1、使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存；
2、验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用；
3、通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用；
4、通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序； 5、通过实验了解Ajax的编程方法，掌握Ajax编程技巧。
二、实验原理
1、参考教材的第2-4章内容，认真阅读分发的源代码，并根据教材上的提示，完成源代码中没有实现的功能；
2、要求用户名基于Ajax检测是否重复，年龄需用JavaScript检查格式是否正确来开发一个用户注册界面。
三、实验内容及步骤
1、用户注册界面的规划
（1）、首先，确定注册界面应具有哪些内容，这里我的注册界面有的内容有用户名、密码、确认密码、年龄、性别以及兴趣爱好，这里用XHTML表单来处理。
2
桂林理工大学 信息科学与工程学校 网络11-1
（2）、布局页面内容，将页面内容置于网页中心。
2、页面内容功能的实现
(1)、采用AJAX交互模式来实现用户名重复检测，先给XMLHttpRequest new一个对象xmlhttp。
（2）、设置xmlhttp的onreadystatechange属性，这里使用函数function（），这函数的内容正是整个页面功能实现的关键。
（3）、设置判断HTTP请求的状态，将xmlhttp的readyState设为4，status属性为200，调用xmlhttp的responseXML方法将服务器返回的数据赋予xmlDoc。 （4）、函数分析：
a、先做一个对“用户名”进行是否为空的判断 if(name==\
alert(\用户名为空，请输入用户名 ！\ return false;}
同理，然后再做一个对用户名是否重复的判断。
b、既然已经对用户名做了是否为空的判断，所以，不妨也对用户的“密码”也做个是否为空的判断，然后再将“确认密码”与“密码”核对是否一致 if(password==\
alert(\您还没有输入密码，\\n\请输入！\
3
桂林理工大学 信息科学与工程学校 网络11-1
init.focus(); return false;} if(password!=repassword){
alert(\两次输入的密码不一致，请从新输入 ！\ return false;}
c 、对用户年龄的设置，要有一定的范围，这样才能符合人的寿命局限的实际， if(age<=0||age>=118){
}
alert(\年龄输入有误，请从新输入 ！\return false;
（5）、调用xmlhttp的open方法，创建HTTP请求 xmlhttp.open(\
调用xmlhttp的send方法 ，发送上面创建的HTTP请求 xmlhttp.send(); （6）、链接数据库
四、实验遇到的问题及解决方案
实验中遇到的问题就是，学习了书本上的知识，那毕竟是理论的东西，没有实际多练上机调试，即便是把书本上的东西背的滚瓜烂熟也难于作出点像样的东西，所以，实践是检验真理的唯一标准，动
4
桂林理工大学 信息科学与工程学校 网络11-1
手实际这样才能从中发现问题，能把发现的问题解决这样才能将所学的知识有所升华，才能将知识记的牢固，才能在实践中汲取经验。
五、实验结果
注册成功：
5