Ajax学习第五节_ajaxJquery

使用JQuery进行Ajax的请求，JQuery封装了Ajax,所以使用起来特别的方便。现在讲解一下JQuery使用ajax的方法。

运行效果：

    

百度云源代码下载：http://pan.baidu.com/s/1sliltO5

Jsp页面关键代码

	//验证用户名是否可以使用
	function checkUserName() {
		//获取用户名
		var userName = $("#userName").val();
		//请求的url
		var dataUrl = "Regedit";
		//要提交的参数如果是对象可以："user.userName":userName提交到action
		var params = {
			"userName" : userName
		};
		$.ajax({
			async : true,//设置为异步，如果设置为同步，必须等ajax请求完毕之后，再执行进行下面的操作
			url : dataUrl,//请求的url
			data : params,//要传递的参数
			dataType : "json",//返回的数据格式为json
			cache : false,//不设置缓存
			type : "POST",//提交方式post
			//请求出错调用的方法
			error : function(textStatus, errorThrown) {
				alert("ajax请求失败！");
			},
			//请求之前的方法
			beforeSend : function() {
				//alert("请求前执行的方法！通常放一张加载的图片");
			},
			//请求成功的方法，data为返回的数据
			success : function(data, textStatus) {
				$("#msg").html("姓名:"+data.userName + "----年龄:" + data.age);
			}
		});
	}

Servlet关键代码

/**
	 * @MethodName:doPost
	 * @Description:接收post请求的方法
	 * @param request
	 * @param response
	 * @throws ServletException
	 * @throws IOException
	 * @author:徐半仙儿
	 * @date:Apr 20, 201610:13:16 AM
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 设置返回数据的编码
		response.setContentType("text/json;charset=utf-8");
		// 接收传递过来的数据
		String userName = URLDecoder.decode(request.getParameter("userName"), "UTF-8");
		// 实例化PrintWriter，用于向前台打印数据
		PrintWriter out = response.getWriter();
		// 模仿数据库请求，假如数据库中有个用户名为xukaiqiang
		if (userName.equals("xukaiqiang")) {
			// 以json形式返回数据到前台
			User user = new User(1, "xukaiqiang1234", 25);
			Utils.printInfo(user, response);
		} else {
			// 以json形式返回数据到前台
			User user1 = new User(1, "xukaiqiang", 22);
			Utils.printInfo(user1, response);
		}
		// 关闭流
		out.close();
	}

工具类Utils关键代码

public static String printInfo(Object object, HttpServletResponse response) {
		//如果是Struts2这里可以使用ServletActionContext.getResponse();获取HttpServletResponse对象
		Gson gson = new Gson();
		String result = gson.toJson(object);
		response.setContentType("text/json; charset=utf-8");
		response.setHeader("Cache-Control", "no-cache"); // 取消浏览器缓存
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		out.print(result);
		out.flush();
		out.close();
		return null;
	}