AJAX JQuery+Servlet

在JQuery框架的基础上实现AJAX还是比较方便的，下面是一些简单介绍：

下面通过Ajax实现注册信息的验证，先来看一下以"POST"的请求方式：

JQuery代码：

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	function validateUsername() {
		var username = $("#username").val();
		var methodName = "queryUserByUsername";
		if(username == null || username == ""){
			$("#unameDiv").html("用户名不能为空");
			$("#username")[0].focus();
		}else{
			$.ajax({
				url:"http://localhost:8080/MessageProject/servlet/UserServlet",
				type:"post",/*与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
								①无法使用缓存文件（更新服务器上的文件或数据库）②向服务器发送大量数据（POST 没有数据量限制）
								③发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠*/
				
				dataType: "text",
				data: {username:username,method:methodName },/* 传递多个值时，可以用JSON来包装，例如{username:username,age:age}*/

				success:function(result){
					if($.trim(result) == "true"){
						$("#unameDiv").html("<span style='color:red'>用户名已被注册</span>");
						$("#username")[0].focus();
					}else{
						$("#unameDiv").html("<span style='color:green'>用户名可以使用</span>");
					}
				},
				error:function(){
					alert("AJAX执行失败");
				}
			
			});
			
		}
	}

第1行代码是加载一个jQuery库，这里随意加载一个现有的jQuery库即可。

第11行代码，url传递数据, 这里的参数为发送请求的地址，可以能添加参数(post、get类型）。

第13行代码是指定预期服务端返回的数据类型，这里我们将其指定为“text”文本形式（也可指定为xml、json等格式）。
第16行代码是请求成功后回调的函数，“function(result)”这里的result是一个变量，是服务端返回的数据，相当于var result= xmlHttp.responseText();

Servlet 代码：

		response.setContentType("application/text; charset=utf-8");
		PrintWriter out = response.getWriter();
		String username = request.getParameter("username");
		System.out.println(username);
		UserDao userDao = new UserDao();
		User user = new User();
		user = userDao.queryUserByUsername(username);
		if(user.getPassword() != null){
			out.write("true");
		}
		else{
			out.write("false");
		}
这里需要注意的是第1行代码，response.setContentType("application/text;
 charset=utf-8"); 这里声明response返回一个text文件。



调用response.getWriter().write()方法返回数据。