桂林理工大学 web技术实验一Web客户端编程.docx

《桂林理工大学 web技术实验一Web客户端编程.docx》由会员分享，可在线阅读，更多相关《桂林理工大学 web技术实验一Web客户端编程.docx（12页珍藏版）》请在冰豆网上搜索。

桂林理工大学web技术实验一Web客户端编程

《Web技术B》

实验报告

课题名称实验一、Web客户端编程

姓名何天从

学号3110757101

班级网络11-1班

院系信息科学与工程学院

实验一Web客户端编程

一、实验目的及要求

使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。

验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。

通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。

通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。

通过实验了解Ajax的编程方法，掌握Ajax编程技巧。

二、实验内容及步骤

1）请参考教材的第2-4章内容，认真阅读分发的源代码，并根据教材上的提示，完成源代码中没有实现的功能。

2）开发一个用户注册界面，要求：

用户名基于Ajax检测是否重复，年龄需用JavaScript检查格式是否正确。

实验代码：

客户端：

h1{color:

red}

.pos{position:

absolute;left:

340px;top:

50px;line-height:

30px;}

functionloadXMLDoc（）{

varxmlhttp,x,i,name,age,password,repassword;

if（window.XMLHttpRequest）{

//codeforIE7+,Firefox,Chrome,Opera,Safari

xmlhttp=newXMLHttpRequest（）;

}

else{

//codeforIE6,IE5

xmlhttp=newActiveXObject（"Microsoft.XMLHTTP"）;

}

xmlhttp.onreadystatechange=function（）{

name=document.getElementById（"un"）.value;

age=document.getElementById（"ag"）.value;

password=document.getElementById（"pa"）.value;

repassword=document.getElementById（"rpa"）.value;

if（xmlhttp.readyState==4&&xmlhttp.status==200）{

xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName（"user"）;

if（name==""）{

alert（"用户名为空，请从新输入！

"）;

returnfalse;

}

for（i=0;i

if（name==x[i].childNodes[0].nodeValue）{

alert（"该用户名已存在，请从新起一个用户名！

"）;

returnfalse;}

}

if（password!

=repassword）{

alert（"两次输入的密码不一致，请从新输入！

"）;

returnfalse;

}

if（age<=0）{

alert（"年龄输入有误，请从新输入！

"）;

returnfalse;

}

varre=/^[0-9]+?

[0-9]*$/;

if（!

re.test（age））{

alert（"年龄输入有误，请从新输入！

"）;

returnfalse;

}

alert（"注册成功！

"）;

}

}

xmlhttp.open（"GET","user.xml",true）;

xmlhttp.send（）;

}

functionreset（）{

document.getElementById（"re"）.innerHTML="";

}