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群英汇”