Ajax发送GET请求

前端之家收集整理的这篇文章主要介绍了Ajax发送GET请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

  1. <form action="servlet/LoginServlet" method="post">
  2. <table>
  3. <tr>
  4. <td>用户账号:</td>
  5. <td><input type="text" name="username" onblur="checkUser(this)"/></td>
  6. </tr>
  7. <tr>
  8. <td>用户密码:</td>
  9. <td><input type="password" name="password"/></td>
  10. </tr>
  11. <tr>
  12. <td><input type="submit" value="注册"/></td>
  13. <td><input type="reset" value="重置"></td>
  14. </tr>
  15. </table>
  16. </form>
这里后台处理信息用的是Servlet进行处理

首先看web.xml配置信息

  1. <servlet>
  2. <servlet-name>LoginServlet</servlet-name>
  3. <servlet-class>login.LoginServlet</servlet-class>
  4. </servlet>
  5.  
  6. <servlet-mapping>
  7. <servlet-name>LoginServlet</servlet-name>
  8. <url-pattern>/servlet/LoginServlet</url-pattern>
  9. </servlet-mapping>
然后看具体的servlet类的doGet方法
  1. public void doGet(HttpServletRequest request,HttpServletResponse response)
  2. throws ServletException,IOException {
  3.  
  4. response.setContentType("text/html;charaet=UTF-8");
  5. PrintWriter out = response.getWriter();
  6. String name=request.getParameter("username");
  7. System.out.println(name);
  8. if(name.equals("admin"))
  9. out.print(false);
  10. else
  11. out.print(true);
  12. out.flush();
  13. out.close();
  14. }
在Servlet类中做一个简单的验证。

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

  1. <script type="text/javascript">
  2. //创建XMLHttpRequest
  3. function createXmlHttpRequest(){
  4. if(window.XMLHttpRequest){
  5. return new XMLHttpRequest();
  6. }else{
  7. return new ActiveXObject("Microsoft.XMLHTTP");
  8. }
  9. }
  10. //当用户账号输入框失去焦点时调用方法
  11. function checkUser(obj){
  12. //获取输入框输入的值
  13. var user = obj.value;
  14. //如果输入框中的值为空,那么弹窗提示,并且让该输入框获得焦点
  15. if(!user){
  16. alert("用户名不能为空!");
  17. obj.focus();
  18. return;
  19. }
  20. //不为空时,使用Ajax请求向后台发送信息,验证该用户名是否可用
  21. //get请求字符串
  22. var url="servlet/LoginServlet?username="+user;
  23. //调用方法创建XMLHttpRequest对象
  24. XmlHttpRequest = createXmlHttpRequest();
  25. //设置回调函数
  26. XmlHttpRequest.onreadystatechange=finish;
  27. //初始化xmlhttprequest
  28. XmlHttpRequest.open("GET",url,true);
  29. //发送请求
  30. XmlHttpRequest.send(null);
  31. }
  32. //回调函数
  33. function finish(){
  34. if(XmlHttpRequest.readyState == 4&& XmlHttpRequest.status == 200){
  35. var result = XmlHttpRequest.responseText;
  36. if(result =="true"){
  37. alert("用户名可用!");
  38. }else{
  39. alert("用户名不可用!");
  40. }
  41. }
  42. }
  43. </script>

猜你在找的Ajax相关文章