5、用AJax实现用户名检测
5.1AJax
AJax=Asynchronous(异步) JavaScript+XML
异步和同步:
给大家举个入例子,同步好比一个人有许多事情,他要一样一样的往下做。
而异步在做这些事情时,有些小事情会分配给别人去做,别人做完后会报告结果给他。
这个人亲自做的事情叫做主线程,分配给别人做的事情叫做子线程。
AJax所实现的功能是网页的局部刷新
我们先使用JavaScript来实现AJax,学习AJax我们还需掌握一些Java WEB 开发
环境的配置,jsp,servlet的知识。
5.2一个用户名检测的案例
需要用到的工具:eclipse EE版,tomcat
首先更改下JSP默认编码设置
windows-preferences-web-jsp files-encoding:utf-8
创建一个动态网页Dynamic Web项目Test
创建一个注册页面register.jsp
更改默认编码后生成的jsp页面编码为utf-8
使用dreamweaver打开刚才生成的页面
做一个验证表单
网页客户端是没办法知道用户是否已经注册的,必须跟服务器进行联系才可以,AJax就是可以通过后台的线程跟服务器联系,把结果取过来。
Javascript
<script type="text/javascript">
var req;
function checkit()
{
//把用户名传递到服务器,看看该用户名是否已经被注册了
//判断浏览器类型,生成一个req对象,用它和服务器联系
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url="CheckUser?uname="+ document.getElementById("uname").value;//url为servlet地址并传入一个参数
req.open("GET",url, true);
req.onreadystatechange = show;//访问结束,拿到结果交给谁处理?
req.send(null);
}
function show()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
document.getElementById("info").innerHTML=req.responseText;
}
}
}
</script>
创建servlet CheckUser.java
/**
* Servlet implementation class CheckUser
*/
@WebServlet("/CheckUser")
public class CheckUser extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CheckUser() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String uname = request.getParameter("uname");
String[] names= {"zhang","wang","zhou"};//为了方便就把查数据库了,我们存几个名字在数组里
boolean flag=true;
for(int i=0;i<names.length;i++)
{
if(names[i].equals(uname))
{
flag=false;
break;
}
}
response.setCharacterEncoding("UTF-8");//设置编码为utf-8
if(!flag)
{
response.getWriter().println("该用户名已注册!");
}
else
{
response.getWriter().println("该用户名尚未注册");
}
}
测试结果
5.3JQuery实现AJax
我们先看下jQuery手册中AJax的说明
根据这个例子我们将之前的JavaScript改写一下
<script type="text/javascript" src="jslib/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(){
obj=$.ajax({url:"CheckUser?uname="+ $("#uname").val(), async:false});
$("#info").html(obj.responseText);
});
});
</script>
测试一下发现也可以实现验证功能
我们再来看一个其中的load方法,功能更强大
我们的代码可以改写为这样
<script type="text/javascript" src="jslib/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(){
$("#info").load("CheckUser?uname="+ $("#uname").val());
});
});
</script>
根据语法可改写为这样
$("#info").load("CheckUser",{uname:$("#uname").val()});
由于传的是data数据,所以我们服务端要改为dopost方法(传字符串用get)
在dopost中加上doGet(request,response)
欢迎进群交流258897306或关注公众号“IT群英汇”