ajax：Asynchronous Javascript And XML

ajax发送请求

1、 ajax对象获取

ajax由浏览器提供，有兼容性问题，需要区分浏览器

方式一：判断方式

//获取ajax对象
function getXhr(){
	var xhr;
	//判断浏览器（非ie）
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{// 低版本ie
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	return xhr;
}

方式二：try...catch...方式
var ajax;
try {
	//如果是其它浏览器，这句代码可以成功，拿到ajax对象
	ajax  = new XMLHttpRequest(); 
} catch (e) {
	//如果是IE，上面会报错，就执行下面这句代码(IE支持)
	ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
}

2、创建请求

创建请求分为get请求和post请求

get请求：
	xhr.oper("get","url?username="+name) // username：传入的参数
post请求：
	比get请求多一步，必须设置请求头，操作必须在open与send之间调用。参数在send发送请求时传入
	xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

3、发送请求

//get请求：
	xhr.send();
		
	//post请求：
	xhr.send("username="+name);

4、 设置回调函数

设置监听事件：监听请求的状态，只监听：请求状态成功（4） 、 响应成功状态（200）

xhr.onreadystatechange = function(){
		//判断状态：请求状态成功4  、 响应成功状态200
		if(xhr.readyState == 4 && xhr.status == 200){
			//接收服务端响应回来的数据（responseText只接收text文本）
			var text = xhr.responseText;
			alert(txet);//弹窗，验证是否接收到数据
		}
	}

完整代码

<body>
	<form action="/register" method="post">
		用户名：<input type="text" name="username" id="name"/><span id="userSpan"></span><br />
		密 码：<input type="password" name="password" id="pwd"/><span id="userSpan"></span><br />
		<input type="submit" value="注册"/>
	</form>
	<script type="text/javascript">
		//获取ajax对象
		function getXhr(){
			var xhr;
			//判断浏览器（非ie）
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{// 低版本ie
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			return xhr;
		}
		
		//1、获取焦点事件onfocus 
		document.getElementById("name").onfocus = function(){
			//通过id获取元素，设置双标签中的元素（**innerHTML 浏览器会解析**）
			document.getElementById("userSpan").innerHTML = "<font color='#ADFF2F'>请填写用户名</font>"
		}
		//2、失去焦点onblur 
		document.getElementById("name").onblur = function(){
			//获取用户输入的值
			var name = document.getElementById("name").value;
			//非空判断
			if (name != "") { //此处判断不能使用null，只能使用""
				//清除userSpan内容
				document.getElementById("userSpan").innerHTML = ""
				
				//1.获取ajax对象
				var xhr = getXhr();
				//2.创建请求（请求方式，路径）
				xhr.open("POST","/user");  // post请求
				//若是get请求： xhr.open("get","/user?"username="+name)
				
				//get请求没有这一步。post请求必须设置请求头，操作必须在open与send之间调用
				//设置异步对象的xhr.setRequestHeader成员的值
				xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
				
				//3.发送请求
				xhr.send("username="+name); //post请求
				//若是get请求：xhr.send()
				
				//4.判断状态，请求成功，并且响应成功，处理
				xhr.onreadystatechange = function() {
					//判断状态：请求状态成功4  、 响应成功状态200
					if (xhr.readyState == 4 && xhr.status == 200) {
						//接收服务端响应回来的数据（responseText只接收text文本）
						var txt = xhr.responseText;
						//判断
						if (txt.indexOf("ok") != -1) {
							document.getElementById("userSpan").innerHTML = "<font color='red'>用户名可以使用</font>"
						} else{
							document.getElementById("userSpan").innerHTML = "<font color='red'>用户名已存在</font>"
						}
					}
				}
				
			} else{
				document.getElementById("userSpan").innerHTML = "<font color='red'>用户名不能为空</font>"
			}
		}
	</script>
</body>

java代码（用户名已写死）：

@Controller
public class AjaxContorller {

	@RequestMapping("/user")
	@ResponseBody //配置此标签，将不经过视图解析器
	public String userName(String username) {
		//验证用户名是否存在
		if ("admin".equals(username)) {
			return "error"; //应户名存在
		}
		return "ok"; //用户名不存在
	}
}