第一种：传统的创建交互式、快速动态网页应用的网页开发技术异步请求，后台代码以及效果在最下边

首先我们在黯然失色中创建一个注册页面regist.jsp，创建一个形式表单，注意，由于我们只是实现用户名校验的效果，下边红色部门是我们需要研究对象，所以其他的部门可以忽略不看。

内容如下：

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE html html hearteta charset=' UTF-8 '标题用户注册/titlelink rel='样式表type=' text/CSS ' href=' $ { page context。请求。上下文路径}/CSS/登录。CSS ' rel='外部无跟随'脚本类型='text/javascript'//第三步：ajax异步请求用户名是否存在函数checkUsername(){//获得文本框值： var username=文档。getelementbyid('用户名').价值；//1.创建异步交互对象var xhr=createXmlHttp()；//第二步中已经创建xmlHttpRequest，这里直接调用函数就可以了。//2.设置监听xhr。onreadystatechange=function(){ if(xhr。readystate==4){ if(xhr。status==200){//把返回的数据放入到跨度中document.getElementById('span ').xhr.responseText//responseText是后台返回的数据}}}//3.打开连接xhr.open('GET '，' $ { page context。请求。上下文路径}/user _ findbyname。行动？时间='新日期()。getTime() 'username=' username，true)；//4.发送xhr。发送(null)；} //第二部：创建xmlHttp对象函数createXmlHttp(){ var xmlHttpRequest；试试{ //火狐，Opera 8.0，SafarixmlHttp=new XMLHttpRequest()；} catch(e){ try {//Internet ExplorerxmlHttp=new ActiveX对象(' Msxml 2 .XMLHTTP’)；} catch(e){ try { xmlHttp=new ActiveX对象(' Microsoft .XMLHTTP’)；} catch(e){ } } }返回xmlHttpRequest}函数change(){ var img 1=文档。getelementbyid(' CheckIMg ')；img 1。src=' http : $ { page context。请求。上下文路径}/CheckIMg。行动？新日期()。getTime()；}/script/head dyform操作=' $ { page context。请求。上下文路径}/user _ regist。submit上的action ' method=' post '=' return CheckFORm()'；regist ' div class=' regist _ center ' div class=' regist _ top ' div class=' left fl '会员注册/div class=' right fr ' a href=' $ { page context。请求。上下文路径}/索引。JSP ' rel='外部无跟随' target=' _ self '小米商城/a/div class=' clear '/div class=' xian center '/div/div class=' regist _ main center '//第一步：首先，我们创建一个用户名投入输入框，并添加一个onblur=' checkUsername()'事件div class='username '用户名： input class=' shurukuang ' type=' text ' id=' username ' name=' username ' on bulr=' checkUsername()'/span id=' span '/span/div class=' username '密码：输入类=' shurukuang ' type=' password ' id=' password ' name=' password '/div div class=' username '确认密码： input class=' shurukuang ' type=' password ' id=' repassword ' name=' repassword '/div div class=' username '邮箱号： input class=' shurukuang ' type=' email ' id=' email ' name=' email '/div class=' username '姓名：输入类=' shurukuang ' type=' text ' id=' name ' name=' name '/div div class=' username '手机号： input class=' shurukuang ' type=' text ' id=' phone ' name=' phone '/div class=' username '地址：输入类=' shurukuang '类型=' text ' id=' addr ' name=' addr '/div class=' username ' div类='左fl '验证码： input class=' yanzhengma ' type=' text ' id=' check code ' name=' check code ' maxlength=' 4 '/div div class=' right fl ' img id=' check img ' class=' captchaImage ' src=' http : $ { page context。 请求。上下文路径}/checkImg。操作“onclick=”change()“title=”点击更换验证码/div class=' clear '/div/div/div class=' regist _ submit ' input class=' submit ' type=' submit ' name=' submit ' value='立即注册/div/div/表单/正文/html第二种方式：使用jQuery中的创建交互式、快速动态网页应用的网页开发技术实现以上效果。首先形式表单以及行动中的都不变，我们只需改变脚本就可以了。

第一步：引入射流研究…文件脚本类型=' text/JAVAScript ' src=' http : $ { page context。请求。上下文路径}/js/jquery-3。2 .1 .量滴js /脚本

第二步：

//ajax异步请求用户名是否存在$ (function () {$ ('# username '))。change(function(){//添加一个变更事件var val=$(this)。val()到用户名；//获取输入框的值val=$。微调(val)；//空if(val！=' '){//判断值是否为空。var URL=' $ { page context . request . context path }/user _ find by name . action '；//url是相同的URL varargs={'time' :new date()。gettime()，' username ' : val }；//这里的区别在于json用于实现传入的时间和用户名参数$。post (URL，args，function(data){//发送post请求，后台返回的数据在data中，$('#span ')。html(数据)；//将后台返回的数据放入span })；}});})然后我们来看看后台数据将如何返回。因为我使用ssh框架来实现这一点，为了方便起见，我只展示了如何在Action中返回数据。请自行解决ssh框架中服务层和dao层的实现。

公共类UserAction扩展ActionSupport实现modeldrivenuuser { private static final long serial version id=1L；/* * *模型驱动*/私有用户用户=新用户()；@ override public User getModel(){ return User；}//注入userserviceuserservicepublic void setuser service(user service user service){ this . user service=user service；}/***异步验证用户名的AJAX执行方法* * @抛出ioexception */public string find by name()抛出ioexception { user exists user=user service。查找by name(user . getusername())；//调用服务层的方法返回数据库中查询的对象//获取响应对象，并向页面输出： http servlet response=servletactioncontext . getresponse()；response . setcontenttype(' text/html；字符集=UTF-8’；//设置编码格式//判断返回的对象是否为空如果(existUser！=null) {//如果是，则发现该用户：的用户名已经存在。response.getWriter()。println('用户名已经存在')；} else {//如果不是，用户名可以使用response.getwriter()。println ('font color=' green '用户名可以使用/font ')；}返回NONE//此处返回空}效果如下：

上面用ajax和$实现用户名验证的传统。jquery的post方法(示例说明)都是边肖分享给大家的内容，希望能给大家一个参考，多支持我们。