Chinaunix首页 | 论坛 | 博客

kylin_755的ChinaUnix博客kylin755.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

kylin_755

  • 博客访问： 96048
  • 博文数量： 34
  • 博客积分： 925
  • 博客等级： 准尉
  • 技术积分： 350
  • 用 户 组： 普通用户
  • 注册时间： 2011-08-15 11:52
文章分类

全部博文（34）

文章存档

2011年（34）

我的朋友
最近访客
推荐博文
相关博文
原始的Ajax - 检查用户名是否存在

分类： WINDOWS

2011-08-29 17:05:25

1. checkUser.jsp
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

  3.     <%
  4.         String name = request.getParameter("name");
  5.         String msg = "恭喜你，该用户可以注册！";
  6.         if("admin".equals(name)){
  7.             msg = "Sorry, The user name is already exist.";
  8.         }
  9.         out.print(msg);
  10.     %>
test_ajax1.jsp
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>

  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     
  12.     <title>My JSP 'test_ajax1.jsp' starting page</title>
  13.     
  14.     <meta http-equiv="pragma" content="no-cache">
  15.     <meta http-equiv="cache-control" content="no-cache">
  16.     <meta http-equiv="expires" content="0">
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18.     <meta http-equiv="description" content="This is my page">
  19.     
  20.     
  21.     <script type="text/javascript">
  22.     function createXmlHttpRequest(){
  23.         var xmlhttp = null;
  24.         try{
  25.                 //Firefox, Opera 8.0+, Safari
  26.          xmlhttp=new XMLHttpRequest();
  27.                 }catch(e){//IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
  28.         var MSXML =
  29.         ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
  30.         'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
  31.         'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
  32.          for(var n = 0; n < MSXML.length; n ++){
  33.          try{
  34.          xmlhttp = new ActiveXObject(MSXML[n]);
  35.          break;
  36.          }catch(e){}}
  37.          }
  38.         return xmlhttp;
  39.     }
  40.     
  41.         function checkUserByAjax(){
  42.             var name = document.getElementById("name").value;
  43.             // 第一步：得到一个XMLHttpRequest对象
  44.             //var xhr = new new XMLHttpRequest();
  45.             // 如果ie6需要使用到ActiveX组建
  46.             var xhr = createXmlHttpRequest();
  47.             // 第二步，准备一个链接请求
  48.             
  49.             xhr.open("get","checkUser.jsp?name="+ name, true);
  50.             //第三步，发起请求
  51.             xhr.send(null);
  52.             xhr.onreadystatechange = function(){
  53.                 //var smsg = document.getElementById("statusMsg");
  54.                 //smsg.innerHTML += "readyState:" + xhr.readyState + ",status: " + xhr.status+ "
    "    ;
  55.                 //4表示加载完成
  56.                 if(xhr.readyState == 4){
  57.                     if(xhr.status == 200 || xhr.status == 304){
  58.                         //获取结果
  59.                         document.getElementById("msg").innerHTML = xhr.responseText;
  60.                     }
  61.                 }
  62.             }
  63.         }
  64.     </script>
  65.   </head>
  66.   
  67.   <body>
  68.     
  69.     
  70.     <form action="" method="post">
  71.         <p>用户名：
  72.             <input type="text" name="name" id="name"> <input type="button" value="Check User Name" onclick="checkUserByAjax();">
  73.             
  74.         </p>
  75.         <div id="msg"></div>
  76.         <div id="statusMsg"></div>
  77.     </form>
  78.   </body>
  79. </html>

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>

  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     
  12.     <title>My JSP 'test_ajax1.jsp' starting page</title>
  13.     
  14.     <meta http-equiv="pragma" content="no-cache">
  15.     <meta http-equiv="cache-control" content="no-cache">
  16.     <meta http-equiv="expires" content="0">
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18.     <meta http-equiv="description" content="This is my page">
  19.     
  20.     
  21.     <script type="text/javascript">
  22.     function createXmlHttpRequest(){
  23.         var xmlhttp = null;
  24.         try{
  25.                 //Firefox, Opera 8.0+, Safari
  26.          xmlhttp=new XMLHttpRequest();
  27.                 }catch(e){//IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
  28.         var MSXML =
  29.         ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
  30.         'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
  31.         'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
  32.          for(var n = 0; n < MSXML.length; n ++){
  33.          try{
  34.          xmlhttp = new ActiveXObject(MSXML[n]);
  35.          break;
  36.          }catch(e){}}
  37.          }
  38.         return xmlhttp;
  39.     }
  40.     
  41.         function checkUserByAjax(){
  42.             var name = document.getElementById("name").value;
  43.             // 第一步：得到一个XMLHttpRequest对象
  44.             //var xhr = new new XMLHttpRequest();
  45.             // 如果ie6需要使用到ActiveX组建
  46.             var xhr = createXmlHttpRequest();
  47.             // 第二步，设置一个针对readystatechange的事件的监听函数
  48.             xhr.onreadystatechange = function(){
  49.                 if(xhr.readyState == 4){
  50.                     if(xhr.status == 200 || xhr.status == 304){
  51.                         // 监听函数处理返回的结果
  52.                         document.getElementById("msg").innerHTML = xhr.responseText;
  53.                         // 如果用户已经存在需要把光标重新设置到name,填写
  54.                         var ret = xhr.responseText;
  55.                         document.getElementById("msg").innerHTML = ret;
  56.                         if(ret == "Name can be used."){
  57.                             document.getElementById("name").focus();
  58.                         }
  59.                     }
  60.                 }
  61.             }
  62.             // 第三步，准备一个post请求
  63.             xhr.open("post","checkUser.jsp?name="+ name, true);
  64.             //第四步，发起请求
  65.             // 设置请求头
  66.             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  67.             xhr.send("name="+name+"&password=pp");
  68.         }
  69.     </script>
  70.   </head>
  71.   
  72.   <body>
  73.     
  74.     
  75.     <form action="" method="post">
  76.         <p>用户名：
  77.             <input type="text" name="name" id="name"> <input type="button" value="Check User Name" onclick="checkUserByAjax();">
  78.             
  79.         </p>
  80.         <div id="msg"></div>
  81.         <div id="statusMsg"></div>
  82.     </form>
  83.     
  84.     
  85.     
  86.   </body>
  87. </html>
阅读(363) | 评论(0) | 转发(0) |
0

上一篇：BOM及DOM加强

下一篇：extJS事件驱动

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6