认识Ajax基本原理即使用Ajax校验（Ajax原生代码）

Ajax

原理：

使用原理进行ajax校验，这里完成一个用户名是否重复的校验：

第一步：给username这个文本框一个失去焦点事件，失去的时候调用isUserNameValid这个函数,给这个提示的句子加一个span标签设一个id等一下用于提示信息的替换

第二步：实现isUserNameValid这个函数，在里面做一些前端校验的东西，比如下面的var username 是通过上面我们设的id获取到username的值然后赋值给这个username，然后对它进行能不能为空之类的前端校验，也称客服端校验

第三步：我们主要是用ajax完成客服端校验，跟着原理走



post请求与get请求的区别，其实在这里也就是一个带参的问题和post请求必须写的语句，当然他们的区别不止如此，我的博客好像有吧。

第四步：servlet

代码：

<script type="text/javascript">
	var xhr = false;
	
	//校验用户名是否合法：1.【客户端】用户名不能为空    2.【客户端】由字母、数字或“_”组成，长度不少于6位，不多于30位    3.【服务端】用户名不能重复
	function isUserNameValid()
	{
		var username = document.getElementById("username").value;

		//1.【客户端】用户名不能为空
		if(username == "")
		{
			document.getElementById("usernameErrorMsg").innerHTML = "<font color='red'>用户名不能为空</font>";
			return;
		}
		
		// 2.【客户端】由字母、数字或“_”组成，长度不少于6位，不多于30位
		var regex = /^[a-zA-Z_0-9]{6,30}$/;
		if(!regex.test(username))
		{
			document.getElementById("usernameErrorMsg").innerHTML = "<font color='red'>由字母、数字或“_”组成，长度不少于6位，不多于30位</font>";
			return;
		}
		
		// 3.【服务端】用户名不能重复---使用Ajax
		//① 获取请求,创建XMLHttpRequest对象
		//非IE浏览器
		if(window.XMLHttpRequest)
		{
			xhr = new XMLHttpRequest();
		}
		//IE浏览器
		else if(window.ActiveXObject)
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		if(xhr)
		{
			/*
			 * GET请求
			 */
			/* //② 定义url连接
			var url = "ValidationServlet?username="+username;
			
			//③ 打开到服务器的连接
			xhr.open("get", url, true);//true 异步请求   false同步请求
			
			//④ 绑定回调函数（响应回来了之后被调用的函数）
			xhr.onreadystatechange = callback;
			
			//⑤ 发送请求
			xhr.send(null); */
			
			/*
			 * POST请求
			 */
			//② 定义url连接
			var url = "ValidationServlet";
			
			//③ 打开到服务器的连接
			xhr.open("post", url, true);//true 异步请求   false同步请求
			
			//---------------POST请求时，必须要写的语句--------------------
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			
			//④ 绑定回调函数（响应回来了之后被调用的函数）
			xhr.onreadystatechange = callback;
			
			//⑤ 发送请求
			xhr.send("username="+username);
		}
		else 
		{
			alert("XMLHttpRequest创建失败");
		}
	}
	//回调函数（响应回来了之后被调用的函数）
	function callback()
	{
		//响应结果readyState为4时，表示响应完成
		if(xhr.readyState == 4)
		{
			//响应没有异常时，才获取结果 200    404路径找不到   500发生服务器Exception
			if(xhr.status == 200)
			{
				var result = xhr.responseText;
				//用户名重复，已存在
				if(result == "true")
				{
					document.getElementById("usernameErrorMsg").innerHTML = "<font color='red'>用户名已存在，请重新输入，not ok</font>";
				}
				else
				{
					document.getElementById("usernameErrorMsg").innerHTML = "<font color='green'>用户名合法， ok</font>";
				}
			}
		}
	}