最简单的Ajax应用，异步验证用户名

最新推荐文章于 2020-09-17 16:08:57 发布

iteye_2022

最新推荐文章于 2020-09-17 16:08:57 发布

阅读量237

点赞数

文章标签： java javascript ViewUI

Ajax异步交互技术在现在网页制作方面非常的流行，这里先介绍一下使用jQuery完成Ajax的异步验证用户名的做法，

然后再深入剖析，使用纯JS创建XMLHttpRequest对象，完成jQuery底层封装的内容，下面先演示jQuery的实现，其实

非常简单。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
	<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		function test(){
			//1.获取文本框中的值
			var value = $("#userName").val();
			//2.将文本框中的内容发送给后台服务器
			//使用jQuery的XMLHTTPRequest的方法的封装
			$.get("/Ajax/servlet/AjaxServlet?name="+value,null,callback);
		}
		
		function callback(data){//回调函数
			//3.接受服务器的返回的数据
			//alert(data);
			//4.将结果显示在页面中
			$("#div1").html(data);
		}
	</script>
  </head>
  
  <body>
    用户名:<input type="text" id="userName" οnblur="test();"/><span id="div1" style="color: red"></span>
	<br/>
    密码:<input type="password" id="password" /><br/>
    邮箱:<input type="text" id="mail" />
  </body>
</html>

大部分讲解都已经写在了代码的注释上面，其实不需要解释什么，这个是使用get方面后缀数据传递给后台服务器的。

当然，后台服务器代码如下

package com.bird.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

	/**
	 * 获取前台传递过来的参数
	 */
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		String name = request.getParameter("name");
		name = new String(name.getBytes("ISO-8859-1"),"UTF-8");
		PrintWriter out = response.getWriter();
		if(name.equals("bird")){
			out.println("用户名"+name+"已经存在");
			
		}else{
			out.println("用户名不存在，可以使用");
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);

	}

}

然后下面是使用纯JS完成创建XMLHttpRequest对象和交互的效果，后台代码是一样的，你会发现jQuery帮助我们很

多.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax1.html</title>
	<script type="text/javascript">
		var xmlhttp;
		function verify(){//这个方法使用XMLHttpRequest对象来进行Ajax异步交互数据
			//1.使用dom的方式获取文本框的内容
			var userName = document.getElementById("userName").value;
			//2.创建XMLHTTPRequest对象
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				//针对ie6以下版本
				var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
				//两个可以用来创建XMLHTTPRequest对象的控件，进行尝试创建
				for(var i=0; i < activexName.length; i++){
					try{
						xmlhttp = new ActiveXObject(activexName[i]);
						break;
					}catch(e){
						
					}
				}
			}
			
			//最后 确认xmlhttprequest对象创建成功
			if(!xmlhttp){
				alert("请更换更新版本的浏览器");
				return;
			}else{
				//2.注册回调函数,只需要函数名不需要加括号
				xmlhttp.onreadystatechange = callback;
				//3.设置连接信息
				xmlhttp.open("GET","/Ajax/servlet/AjaxServlet?name="+userName, true);
				//4.发送数据，开始和服务器端进行交互
				xmlhttp.send(null);
			}
		}
		
		//回调函数
		function callback(){
			//判断对象交互完成
			if(xmlhttp.readyState==4){
				//判断http交互是否成功
				if(xmlhttp.status==200){
					//获取服务器的数据
					//获取纯文本的数据
					var responseText = xmlhttp.responseText;
					document.getElementById("div1").innerHTML=responseText;
				}
			}
		}
	</script>
  </head>
  
  <body>
   用户名:<input type="text" id="userName" οnblur="verify();"/><span id="div1" style="color: red"></span>
	<br/>
    密码:<input type="password" id="password" /><br/>
    邮箱:<input type="text" id="mail" />
  </body>
</html>