这里用一个实例演示Ajax发送get请求,实例具体要求为一个注册页面,当用户填写完用户名称时,该输入框失去焦点后会通过Ajax向后台发送验证信息,如果用户名不是admin则通过验证,否则不通过验证。
下面先看JSP页面具体信息:
这里后台处理信息用的是Servlet进行处理
- <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>
首先看web.xml配置信息
然后看具体的servlet类的doGet方法
- <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类中做一个简单的验证。
- 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();
- }
在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>