AJAX与JQuery简化网页更新-优快云博客

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的页面如果想要更新页面，需要从新刷新一下，用户体验不好。还不方便 AJAX 就是在不刷新页面的情况下，更改数据。为什么今天说Jquery AJAX 因为 Jquery 对AJAX 做了简单封装，简化代码（传统的AJAX，我都忘了怎么写了）

我这里有一个Demo 就是常见的用户注册的时候动态的告诉你你的账号是否被注册过，如果不用AJAX 只有表单提交的时候才会告诉用户对不起您的账号被注册过了请您修改，如果用AJAX的话当用户失去账号焦点的时候就去判断，用户刚输入完账号，立马告诉他，您的密码不对麻烦您改改。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'UserRegister.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
		function userForm(){
			var account1=$("#account1").val();
			$.ajax({
			url:'<%=basePath %>/user/userIsAccount',
			type:'post',/* ajax路径 */
			data: {'account':account1},  /*  参数 */
			dataType: 'json',/* 返回值类型 */
			success: function (data, status) {/* 返回数据，返回状态 */
  			if(data==true){
  				if(type=="1"){
  					$("#Userfrom").submit();
  				}
	  			}else{
			  		alert("您的账号已经被注册过了");	
	  			}
  			},
			});
		}
	</script>
  </head>
  
  <body>
  	<h2>用户注册</h2>
  	<form action="<%=basePath %>/user/registerUser" method="post" id="Userfrom">
  		账号：<input  onblur="userForm()" name="account" value="" type="text" id="account1" /><br/>
  		密码：<input name="password" value="" type="password" /><br/>
  		邮箱：<input name="email" value="" type="text" /><br/>
  		电话：<input name="phone" value="" type="text" /><br/>
  		<button onclick="userForm(1)">注册</button>
  	</form>
  </body>
</html>

首先看一下body里面就一个简单的不能再简单的 form 我在账号的输入框给了一个onblur事件，当你失去焦点的时候去执行userForm()这个方法，这个方法获取你的账号，执行ajax url就是你判断账号是否存在的Controller或者Action或者Servlet((lll￢ω￢))。

这里我用的SpringMVC所以是Controller。type就是提交方式 method:post/get，data就是你携带的参数，当然如果你用Get的话直接拼在URL就行，dataType返回值类型，我所见过大多数是JSON 还有text，最后success，这是一个成功时的回掉，也有失败，请求前请求后等等回掉，这里我只用了一个成功的时候的回掉。

	//AJAX动态判断用户名是否被注册
	@RequestMapping("userIsAccount")
	@ResponseBody
	public Boolean userAccount(HttpServletRequest request){
		log.info("ajax动态查询开始");
		String account=request.getParameter("account");
		log.info("account="+account);
		User user=userService.Login(account);
		if(user==null){
			log.info("可以注册");
			return true;
		}else{
			log.info("不能注册");
			return false;
		}
	}

这就是ajax访问的Controller查询一下，是不是有如果没有可以注册，如果数据库里有账号就提示不能注册。现在来模拟一下输入你输入了一个 123然后点击别的地方 input检测到失去交单了执行ajax 将你之前输入的账号去后台查询返回boolean类型然后ajax success执行成功获取后台传过来的是否能注册判断如果不能提示框。

转载于:https://my.oschina.net/yanhaohub/blog/3065919