AJAX应用实例之检测用户名是否唯一（实例代码)

先给大家展示下效果图，然后再给大家撸代码，效果图如下所示：

下面写一个简单的例子，检测用户名是否唯一（直接撸代码):

前端界面：

% @ page语言=' Java ' ContentType=' text/html；charset=GB18030 '页面编码=' GB18030 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；字符集=GB18030 '标题检测用户名是否唯一/titlestyle type='text/css '！-# toolTip {位置：绝对；left :331 xtop :39 px宽度：98 px高度：48 px填充-top :45 px；左填充左：25px填充-右侧：25 pxz索引：1;display:nonecolor:red背景-图像： URL(图像/工具提示。jpg)；}-/style/head body style=' margin : 0px；form method=' post ' action=' name=' form 1 '表格宽度=' 509 '高度=' 352 '边框=' 0 ' align=' center '单元格填充=' 0 '单元格间距=' 0 '背景=' images/BG。gif ' tr TD高度=' 54 '/TD/tr TD高度=' 253 ' valign=' top ' div style=' position : absolute；表格宽度='100% '高度='250 '边框='0 '单元格填充='0 '单元格间距='0' tr td宽度='18% '高度=' 54 ' align=' right ' style=' color : # 8e 6723 '用户名：/td td宽度='49% '输入名称=' username ' type=' text ' id=' username ' size=' 32 '/TD TD width=' 33% ' img src=' http : images/CheckBt。jpg ' width=' 104 ' height=' 23 ' style='游标3360 handonClick=' CheckUser(表单1。用户名)；/TD/tr/tr高度=' 51 ' align=' right ' style=' color : # 8e 6723 '密码：/TD TD TD输入名称=' pwd 1 ' type=' password ' id=' pwd 1 ' size=' 35 '/TD TD行span=' 2 ' div id=' toolTip '/div/TD/tr TD高度=' 56 ' align=' right ' style=' color : # 8e 6723 '确认密码：/TD TD TD输入名称=' pwd 2 ' type=' password ' id=' pwd 2 ' size=' 35 '/TD/tr TD高度=' 55 ' align=' right ' style=' color : # 8e 6723 '电子邮件：/td td colspan='2 '输入名称=' email ' type=' text ' id=' email ' size=' 45 '/TD/tr TD tr TD col span=' 2 '输入类型='image '名称='imageField' src='文件：

脚本语言='javascript '函数创建请求(URL){ http _ request=false；如果(窗口. XMLHttpRequest) { //非工业管理学(工业工程)浏览器http _ request=new XMlhttprequest()；//创建XMLHttpRequest对象} else if(窗口. ActiveXObject) { //IE浏览器请尝试{ http _ request=新的ActiveX对象(' Msxml 2 .XMLHTTP’)；//创建XMLHttpRequest对象} catch(e){ try { http _ request=new ActiveX对象(' Microsoft .XMLHTTP’)；//创建XMLHttpRequest对象} catch (e) {} } } if(！http_request) { alert('不能创建XMLHttpRequest对象实例!');返回false} http _ request。onreadystatechange=GetResult//调用返回结果处理函数http_request.open('GET '，url，true)；//创建与服务器的连接http _ request。发送(null)；//向服务器发送请求}函数getResult(){ if(http _ request。readystate==4){//判断请求状态if(http _ request。status==200){//请求成功，开始处理返回结果文件。getelementbyid(“工具提示”).innerHTML=http _ request。responsetext//设置提示内容文件。getelementbyid(' toolTip ')。风格。display=' block//显示提示框} else { //请求页面有错误警报('您所请求的页面有错误!');} } }函数检查用户(用户名){ if(用户名。value==' '){ alert('请输入用户名!');用户名。焦点()；返回；} else { create request(' CheckUser。JSP？用户='用户名。值)；}}/scriptjsp文件：

此例并没有连接数据库，只是用数组简单表示注册过的用户。

% @ page language=' Java ' import=' Java . util . * ' page encoding=' GB 18030 ' % % string[]user list={ '明日科技'，' mr '，' mrsoft '，' wgh ' }；//创建一维数组字符串用户=新字符串(请求。getparameter ('user ')。getbytes ('iso-8859-1 '，' GB 18030 ')；//获取用户名arrays . sort(user list)；//排序数组int result=arrays . binary search(user list，user)；//搜索数组if(result-1){ out.println('抱歉，此用户名已注册！');//输出测试结果}else{ out.println('恭喜，此用户名未注册！');//输出测试结果}%摘要

以上是边肖介绍的AJAX应用程序示例是否唯一(示例代码)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！