Ajax发送GET请求

这里用一个实例演示Ajax发送get请求，实例具体要求为一个注册页面，当用户填写完用户名称时，该输入框失去焦点后会通过Ajax向后台发送验证信息，如果用户名不是admin则通过验证，否则不通过验证。

下面先看JSP页面具体信息：

<form action="servlet/LoginServlet" method="post">
    	<table>
    		<tr>
    			<td>用户账号：</td>
    			<td><input type="text" name="username" onblur="checkUser(this)"/></td>
    		</tr>
    		<tr>
    			<td>用户密码：</td>
    			<td><input type="password" name="password"/></td>
    		</tr>
    		<tr>
    			<td><input type="submit" value="注册"/></td>
    			<td><input type="reset" value="重置"></td>
    		</tr>
    	</table>
    </form>

这里后台处理信息用的是Servlet进行处理

首先看web.xml配置信息

<servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>login.LoginServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/servlet/LoginServlet</url-pattern>
  </servlet-mapping>

然后看具体的servlet类的doGet方法

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charaet=UTF-8");
		PrintWriter out = response.getWriter();
		String name=request.getParameter("username");
		System.out.println(name);
		if(name.equals("admin"))
			out.print(false);
		else
			out.print(true);
		out.flush();
		out.close();
	}

在Servlet类中做一个简单的验证。

在JSP的表单中，对输入用户名称的输入框设置了失去焦点的事件，也就是onblur事件。下面看javascript代码。

<script type="text/javascript">
		//创建XMLHttpRequest
		function createXmlHttpRequest(){
			if(window.XMLHttpRequest){
				return new XMLHttpRequest();
			}else{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		//当用户账号输入框失去焦点时调用该方法
		function checkUser(obj){
			//获取输入框输入的值
			var user = obj.value;
			//如果输入框中的值为空，那么弹窗提示，并且让该输入框获得焦点
			if(!user){
				alert("用户名不能为空！");
				obj.focus();
				return;
			}
			//不为空时，使用Ajax请求向后台发送信息，验证该用户名是否可用
			//get请求字符串
			var url="servlet/LoginServlet?username="+user;
			//调用方法创建XMLHttpRequest对象
			XmlHttpRequest = createXmlHttpRequest();
			//设置回调函数
			XmlHttpRequest.onreadystatechange=finish;
			//初始化xmlhttprequest
			XmlHttpRequest.open("GET",url,true);
			//发送请求
			XmlHttpRequest.send(null);
		}
		//回调函数
		function finish(){
			if(XmlHttpRequest.readyState == 4&& XmlHttpRequest.status == 200){
				var result = XmlHttpRequest.responseText;
				if(result =="true"){
					alert("用户名可用！");
				}else{
					alert("用户名不可用！");
				}
			}
		}
	</script>