用ajax和jsp完成用户注册的用户名验证(用户名唯一)

什么是AJAX?
ajax:Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.
为什么使用ajax?
ajax是一种用于快速创建动态网页的技术,通过后台与服务器进行少量的数据交换,ajax可以使网页实现异步更新,这意味着可以在不重新加载网页的情况下对网页的部分实现更新。而传统的网页(不适用ajax)需要重新加载网页
1.网页代码

    <input name='username',value='',required="required" placeholder='请输入用户名' onBlur="checkUserName(this)"/>

2.使用异步做用用户校验

<script>
//异步请求处理对象
function checkUserName(obj){
//1.要创建异步处理对象,XMLHttpRequest
var xmlReq=new XMLHttpRequest();
//2.设置请求数据
    //1).get方式请求
    /*xmlReq.open("GET","ajaxControll.jsp?userName="+obj.value,true)
var param=null; */
    //2).post方式请求
    xmlReq.open("POST","ajaxControll.jsp");//打开方式为post
    xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置参数类型
    var param="username"+obj.value;
3.设置响应数据处理
xmlReq.onreadystatechange=function(){
    //xmlReq.readyState见文知意,这表示异步对象状态
    //0(创建异步对象)1(异步请求初始化)2.(发送异步请求准备)3.(发送异步请求)4.(响应完成)
    if(xmlReq.readyState==4){//表示响应完成
        if(xmlReq.status==200){//表示响应成功
            ![响应200则表示成功](http://img.blog.csdn.net/20160826210552253)
            var json=$.parseJSON(xmlReq.responseText.trim());//接收响应的文本数据,并用jquery把它转换成对象
            if(json.isCheck){
                //表示名字不是唯一
            }else{
                //表示名字唯一,可以使用
            }

        }
    }
}
//4.发送请求
xmlReq.send(param);
}
</script>   

查询后台检测页面”ajaxControll.jsp”

<%!
    //连接数据库查询用户名存不存在
    //存在为true,反之false
%>
//处理异步请求
request.setCharacterEncoding("utf-8");//设置编码集,反之乱码
String name=request.getParameter("username");//通过request获得参数值
//使用json:对象或map使用{},集合或数组使用[]
//属性名,方法,字符串类型属性值,使用双引号引起来
使用out输出流将结果输出
out.print("{\"checkUser\":"+checkUser(name)+"}");
out.flush();
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值