力所能及第二步ajax学习直播---get异步提交

前端之家收集整理的这篇文章主要介绍了力所能及第二步ajax学习直播---get异步提交前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

小狼从上回做第二单元项目开始就对ajax充满了好奇,看着别人的代码,总是觉得什么能让数据不通过刷新页面完成提交,从而知道用户输入的用户名是否已经输入过。未来研究这个神奇的事情,今天,小狼完成了ajax异步的get提交

首先,先把后台写好

  1. public void doPost(HttpServletRequest request,HttpServletResponse response)
  2. throws ServletException,IOException {
  3.  
  4. response.setContentType("text/html;charset=UTF-8");
  5. PrintWriter out = response.getWriter();
  6. String name=request.getParameter("uname");
  7. boolean uexits=false;
  8. if("admin".equals(name)){
  9. uexits=true;
  10. out.print(uexits);//输出
  11. }else{
  12. out.print(uexits);
  13. }
  14. out.flush();
  15. out.close();
  16. }

显而易见,这是一个servlet,小狼主要是觉得这是一个练习,自然是怎么简单怎么来,就不用struts了。

其次,写一个表单

  1. <form name="myform" action="ajax.do">
  2. <table align="center">
  3. <tr>
  4. <td>用户账户:</td>
  5. <td><input name="uname" onblur="checkUser(this)"/></td>
  6. </tr>
  7. <tr>
  8. <td>用户密码:</td>
  9. <td><input name="pass1" type="password"/></td>
  10. </tr>
  11. <tr>
  12. <td>重复密码:</td>
  13. <td><input name="pass2" type="password"/></td>
  14. </tr>
  15. <tr>
  16. <td><input name="submit" type="submit" value="submit"/></td>
  17. <td><input name="reset" type="reset" value="reset"/></td>
  18. </tr>
  19. </table>
  20. </form>

接下来,就是我们的重头戏了。。。。ajax大神

  1. var xmlHttpRequest;
  2. function checkUser(ouser){
  3. var uname=ouser.value;
  4. if(!uname){
  5. alert("用户的账号不为空");
  6. ouser.focus();
  7. return ;
  8. }
  9. var url="ajax.do?uname="+uname;
  10. xmlHttpRequest=createXmlHttpRequest();
  11. xmlHttpRequest.onreadystatechange=checkStatus;
  12. xmlHttpRequest.open("GET",url,true);
  13. xmlHttpRequest.send(null);
  14. }
  15. //这是一个回调函数,处理完成对后台的数据的处理后的内容
  16. function checkStatus(){
  17. if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
  18. var result=xmlHttpRequest.responseText;
  19. //用正则表达式去掉首尾空格
  20. result=result.replace(/(^\s*)|(\s*$)/g,"");
  21. //判断servlet的输出
  22. if(result=="true"){
  23. alert("用户名已经存在");
  24. }else{
  25. alert("用户名可以使用");
  26. }
  27. }
  28. }
  29. //这是小狼上一篇讲的东西,就不叙述了
  30. function createXmlHttpRequest(){
  31. if(window.XMLHttpRequest){
  32. return new XMLHttpRequest();
  33. }else{
  34. return new ActiveXObject("Microsoft.XMLHTTP");
  35. }
  36. }
此示例,小狼都自己亲自实践过,绝对ok,如果您觉得有用,就给小狼一个关注吧

猜你在找的Ajax相关文章