使用Ajax验证用户名是否存在

一、什么是Ajax

参考：http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html

【1】简介：

Ajax：（Asynchronous JavaScript And XML）

                     异步 JavaScript 及 XML

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法。

(一般都跟xml 是没有关系的)

Ajax：只刷新局部页面的技术

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果

CSS：美化页面样式

异步：发送请求后不等返回结果，由回调函数处理结果（onreadystatechange）

【2】XMLHttpRequest对象 及 创建方式

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力 

不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

构造方法（可以将创建XMLHttpRequest 写在一个js文件中）

位置 ：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp 

    
    
var xmlhttp;
if(window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=newXMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject

【3】Api详解

主要使用的方法：

【3.1】open(method,url,async) 建立与服务器的连接

 提供五个参数，但是我们常用前两个参数  

"get|post"                ：请求的方式

"url?name=tom"     ：请求的路径  和 携带的参数

例如：

req.open("post",

"${pageContext.request.contextPath}/CheckName?username="

+ username.value);

【3.2】send(content)  发送请求

发送请求 ，可以带参数 或 null 

分Post  和 Get 两种方式。

【1】当open(Get )时

// 设置为 null 即可

send(null); 

例子：

     
     
//添加参数,以求每次访问不同的url,以避免缓存问题
 xmlHttp.open("get","Server.aspx?username="+ encodeURIComponent(username)
+"&age="+ encodeURIComponent(age)+"&random="+Math.random());
//发送请求,参数为null  xmlHttp.send(null);

【2】当open(Post) 时,必须设置setRequestHeader();

//设置请求的参数

send(data);

 //必须设置,否则服务器端收不到参数

 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

例子：

      
      
//不用担心缓存问题
 xmlHttp.open("post","Server.aspx",true);
//必须设置,否则服务器端收不到参数
 
 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求,要data数据
 
 xmlHttp.send(data);

区别:

1.get请求需注意缓存问题,post请求不需担心这个问题

2.post请求必须设置Content-Type值为application/x-form-www-urlencoded

3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

来源：http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html

方法名	说    明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

【3.3】事件处理器

【1】简介：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

可以理解为回调函数：

其中需要用的两个状态：

readyState：类型short；只读

status：类型short；只读

【2】readyState：XMLHttpRequest的状态信息  

就绪状态码	说    明
0	XMLHttpRequest对象没有完成初始化 即：刚刚创建。
1	XMLHttpRequest对象开始发送请求 调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束 收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束 一切都收到了

【2.1】status：HTTP的状态码 

状态码	说    明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

responseText：获得响应的文本内容 ，类型String；只读【常用】

responseXML：获得响应的XML文档对象 documednt，类型Document；只读

注：就绪状态是4而且状态码是200，才可以处理服务器数据

例子：

Myjs.js   获取xmlHttpRequest 对象

   
   
function getXMLHttpRequest(){
 var xmlhttp;
if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp =newXMLHttpRequest();
}else{// code for IE6, IE5
 xmlhttp =newActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}

index.jsp 

   
   
<script type="text/javascript" src="${pageContext.request.contextPath}/Myjs.js"></script>
<script type="text/javascript">
window.onload = function (){
// 1.创建一个 xmlhttpRequest 对象
 var xmlHttpRequest1 = getXMLHttpRequest();
// 4.处理响应结果（执行回调函数）
 xmlHttpRequest1.onreadystatechange = function (){
//查看服务器端响应状态
//alert(xmlHttpRequest1.readyState);
if(xmlHttpRequest1.readyState ==4){
//查看服务器响应是否正常
if(xmlHttpRequest1.status ==200){
// 获取响应的文本内容
 alert(xmlHttpRequest1.responseText);
}
}
}
//2. 创建一个连接 
 xmlHttpRequest1.open("GET","${pageContext.request.contextPath}/TestServlet");
//3. 发送请求 ,没有参数 null
 xmlHttpRequest1.send(null);
}
</script>

servlet 

   
   
publicvoid doGet(HttpServletRequest request,HttpServletResponse response)
throwsServletException,IOException{
//请求
 response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
 writer.print("get 方法执行");
}

测试：

---

案例：使用Ajax验证用户名是否存在实现步骤：

1、使用文本框的onBlur事件

2、使用Ajax技术实现异步交互

               a)创建XMLHttpRequest对象

               b)通过 XMLHttpRequest对象设置请求信息

               c)向服务器发送请求

               d)创建回调函数，根据响应状态动态更新页面

   
   
<script type="text/javascript"
 src="${pageContext.request.contextPath}/Myjs.js"></script>
<script type="text/javascript">
 function checkName(){
// 
 var username = document.getElementsByTagName("input")[0];
// 1,获取xmlHttpRequest
 var req = getXMLHttpRequest();
// 2,
 req.onreadystatechange = function(){
if(req.readyState ==4){
if(req.status ==200){
 var msg = document.getElementById("msg");
if(req.responseText =="true"){
//msg.innerHTML = "用户名已经存在";
 msg.innerHTML ="<font color='red'>用户已经存在</font>";
}else{
//msg.innerHTML = "可以使用";
 msg.innerHTML ="<font color='green'>可以使用</font>";
}
}
}
}
// 3, 发送一个请求
 req.open("post",
"${pageContext.request.contextPath}/CheckName?username="
+ username.value);
 req.send(null);
}
</script>
</head>

     
     
<body>
用户名：
<input type="text" name="username" onblur="checkName()"/>
<span id="msg"></span>
<br />密码：
<input type="password" name="password"/>
</body>
</html>

servlet 

    
    
publicvoid doGet(HttpServletRequest request,HttpServletResponse response)
throwsServletException,IOException{
String name = request.getParameter("username");
System.out.println(name);
PrintWriter out = response.getWriter();
if(name.equals("tom")){
 out.print(true);
}else{
 out.print(false);
}
}

测试：

用户存在

 

可以使用

---

改进方式： 将在input 中写方法，改为当页面记载完成后获取字段，然后做判断。

   
   
window.onload=function(){//onload 表示当前页面都加载完成后。
 var nameElement = document.getElementsByName("userName")[0];
 nameElement.onblur = function(){
 var name =this.value;//this等价于nameElement
//创建XMLHttpRequest对象
 var xhr = getXMLHttpRequest();
//处理结果
 xhr.onreadystatechange = function(){
if(xhr.readyState==4){//请求一切正常
if(xhr.status==200){//服务器响应一切正常
//alert(xhr.responseText);//得到响应结果
 var msg = document.getElementById("msg");
if(xhr.responseText=="true"){
 msg.innerHTML ="<font color='red'>用户名已存在</font>";
//msg.innerText = "<font color='red'>用户名已存在</font>";
}else{
 msg.innerHTML ="可以使用";
}
}
}
}
//创建连接
 xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
//发送请求
 xhr.send(null);
}
}
</script>