通用的Ajax模板 校验用户名

最新推荐文章于 2022-12-04 13:36:26 发布
最新推荐文章于 2022-12-04 13:36:26 发布
阅读量424 收藏
点赞数
分类专栏： 网页特效等 文章标签： ajax stylesheet xmlhttprequest callback function string

Ajax.js

Javascript代码 复制代码
  1. var _xmlHttpRequestObj;   
  2. var _loadingFunction;   
  3. var _postHttpProcessChangeCallback;   
  4. var resultValue;   
  5.   
  6.   
  7. function postXmlHttp(submiturl,callbackfunc,loadfunc)   
  8. {   
  9.     _postHttpProcessChangeCallback = callbackfunc;   
  10.     _loadingFunction=loadfunc;   
  11.     if(window.createRequest)   
  12.     {   
  13.         _xmlHttpRequestObj = window.createRequest();   
  14.         _xmlHttpRequestObj.open('POST',submiturl,true);   
  15.         _xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;   
  16.         _xmlHttpRequestObj.send();   
  17.     }else if(window.XMLHttpRequest)   
  18.     {   
  19.         _xmlHttpRequestObj = new XMLHttpRequest();   
  20.         _xmlHttpRequestObj.overrideMimeType('text/xml');   
  21.         _xmlHttpRequestObj.open('POST',submiturl,true);   
  22.         _xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;   
  23.         _xmlHttpRequestObj.send("");   
  24.     }else if(window.ActiveXObject)   
  25.     {   
  26.         _xmlHttpRequestObj = new ActiveXObject("Microsoft.XMLHTTP");   
  27.         _xmlHttpRequestObj.open('POST',submiturl,true);   
  28.         _xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;   
  29.         _xmlHttpRequestObj.send();   
  30.     }   
  31.        
  32.     
  33. }   
  34.   
  35. function postXmlHttpProcessPostChange()   
  36. {   
  37.     if(_xmlHttpRequestObj.readyState==4&&_xmlHttpRequestObj.status==200)   
  38.     {   
  39.         resultValue = _xmlHttpRequestObj.responseText;   
  40.         setTimeout(_postHttpProcessChangeCallback,2);   
  41.     }   
  42.     if(_xmlHttpRequestObj.readyState==1)   
  43.     {   
  44.         setTimeout(_loadingFunction,2);   
  45.     }   
  46. }  
var _xmlHttpRequestObj;
var _loadingFunction;
var _postHttpProcessChangeCallback;
var resultValue;


function postXmlHttp(submiturl,callbackfunc,loadfunc)
{
    _postHttpProcessChangeCallback = callbackfunc;
    _loadingFunction=loadfunc;
    if(window.createRequest)
    {
    	_xmlHttpRequestObj = window.createRequest();
    	_xmlHttpRequestObj.open('POST',submiturl,true);
    	_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
    	_xmlHttpRequestObj.send();
    }else if(window.XMLHttpRequest)
    {
    	_xmlHttpRequestObj = new XMLHttpRequest();
    	_xmlHttpRequestObj.overrideMimeType('text/xml');
    	_xmlHttpRequestObj.open('POST',submiturl,true);
    	_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
    	_xmlHttpRequestObj.send("");
    }else if(window.ActiveXObject)
    {
        _xmlHttpRequestObj = new ActiveXObject("Microsoft.XMLHTTP");
        _xmlHttpRequestObj.open('POST',submiturl,true);
        _xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
        _xmlHttpRequestObj.send();
    }
    
 
}

function postXmlHttpProcessPostChange()
{
   	if(_xmlHttpRequestObj.readyState==4&&_xmlHttpRequestObj.status==200)
   	{
   	    resultValue = _xmlHttpRequestObj.responseText;
   	    setTimeout(_postHttpProcessChangeCallback,2);
   	}
   	if(_xmlHttpRequestObj.readyState==1)
   	{
   		setTimeout(_loadingFunction,2);
   	}
}



JSP页面

Html代码 复制代码
  1. <%@ page language="java" pageEncoding="utf-8"%>  
  2. <%   
  3. String path = request.getContextPath();   
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.        
  12.     <title>AjaxApp</title>  
  13.     <meta http-equiv="pragma" content="no-cache">  
  14.     <meta http-equiv="cache-control" content="no-cache">  
  15.     <meta http-equiv="expires" content="0">       
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  17.     <meta http-equiv="description" content="This is my page">  
  18.     <!--  
  19.     <link rel="stylesheet" type="text/css" href="styles.css">  
  20.     -->  
  21.        
  22.     <script type="text/javascript" src="./ajax.js"></script>  
  23.   
  24.        
  25.     <script type="text/javascript">  
  26.             
  27.          function checkUserName()   
  28.          {   
  29.             var userName = document.getElementsByName("userName")[0].value;   
  30.             postXmlHttp("./UserServlet.do?userName="+userName,"callback(resultValue)","loadingFunc()");   
  31.          }   
  32.             
  33.          function callback(resultValue1)   
  34.          {   
  35.             var td = document.getElementById("td");   
  36.             td.innerHTML=resultValue1;   
  37.          }   
  38.             
  39.          function loadingFunc()   
  40.          {   
  41.             var td = document.getElementById("td");   
  42.             td.innerHTML="loading..."  
  43.          }   
  44.     </script>  
  45.   </head>  
  46.      
  47.   <body>  
  48.     <form action="" method="post">  
  49.        <table align="center" border="0">  
  50.           <tr>  
  51.             <td>用户名</td><td><input name="userName"></td><td id="td"></td>  
  52.           </tr>  
  53.           <tr>  
  54.             <td>密  码</td><td><input name="password" onclick="checkUserName();"></td>  
  55.           </tr>  
  56.           <tr>  
  57.             <td colspan="2"><input type="submit" value="提交"></td>  
  58.           </tr>  
  59.        </table>  
  60.     </form>  
  61.   </body>  
  62. </html>  
<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>AjaxApp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript" src="./ajax.js"></script>

	
	<script type="text/javascript">
	     
	     function checkUserName()
	     {
	        var userName = document.getElementsByName("userName")[0].value;
	        postXmlHttp("./UserServlet.do?userName="+userName,"callback(resultValue)","loadingFunc()");
	     }
	     
	     function callback(resultValue1)
	     {
	        var td = document.getElementById("td");
	        td.innerHTML=resultValue1;
	     }
	     
	     function loadingFunc()
	     {
	        var td = document.getElementById("td");
	        td.innerHTML="loading..."
	     }
	</script>
  </head>
  
  <body>
    <form action="" method="post">
       <table align="center" border="0">
          <tr>
            <td>用户名</td><td><input name="userName"></td><td id="td"></td>
          </tr>
          <tr>
            <td>密  码</td><td><input name="password" οnclick="checkUserName();"></td>
          </tr>
          <tr>
            <td colspan="2"><input type="submit" value="提交"></td>
          </tr>
       </table>
    </form>
  </body>
</html>



Serlet类

Java代码 复制代码
  1. public class UserServlet extends HttpServlet   
  2. {   
  3.   
  4.     /**  
  5.      * Destruction of the servlet. <br>  
  6.      */  
  7.     public void destroy()   
  8.     {   
  9.         super.destroy(); // Just puts "destroy" string in log   
  10.         // Put your code here   
  11.     }   
  12.   
  13.   
  14.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
  15.             throws ServletException, IOException   
  16.     {          
  17.         String userName = (String)request.getParameter("userName");   
  18.         UserService userService = new UserService();   
  19.         boolean b = userService.checkUserName1(userName);   
  20.         response.setCharacterEncoding("utf-8");   
  21.                   //jsp页面编码最好也用utf-8 防止乱码   
  22.         PrintWriter pw= response.getWriter();   
  23.         if(b)   
  24.         {   
  25.             pw.write("<font color=red>该用户名已经被使用</font>");   
  26.         }else  
  27.         {   
  28.             pw.write("<font color=red>该用户名可用</font>");   
  29.         }   
  30.            
  31.     }   
  32. }  
xiezhilei1984
关注
专栏目录
《信息化项目文档模板一——项目需求说明书》
再见孙悟空的专栏
02-08 3999
系列文章目录 《信息化项目文档模板一——项目需求说明书》 《信息化项目文档模板二——项目启动会文档模板》 《信息化项目文档模板三——会议纪要模板》 《信息化项目文档模板四——系统项目蓝图设计模板》 《信息化项目文档模板五——系统详细设计模板》 《信息化项目文档模板六——系统详细设计模板》 《信息化项目文档模板七——系统开发计划模板》 《信息化项目文档模板八——系统功能测试模板》 《信息化项目文档模板九——系统压力测试模板》 《信息化项目文档模板十——系统推广上线计划模板》 《信息化项目文档模板十一——系统
ajax异步验证用户名是否存在
08-07
ajax异步验证用户名是否存在，非常小巧的实例，需要安装oracle数据，建立一个用户表，实例中有用户表的实体，可以仿照写一个数据库。
ajax,用ajax校验用户名
qq_44063001的博客
03-29 233
ajax之get和post使用
Ajax校验用户名
扮猪吃老虎二号的博客
02-27 322
一、Ajax介绍 1.1 是什么 “Asynchronous Javascript And XML”（异步JavaScript和XML） 并不是新的技术，只是把原有的技术，整合到一起而已。  使用CSS和XHTML来表示  使用DOM模型来交互和动态显示  使用XMLHttpRequest来和服务器进行异步通信  使用javascript来绑定和调用 1.2 有什么用 咱们的网页如...
使用ajax实现用户名存在校验,使用AJAX完成用户名是否存在异步校验
weixin_34498545的博客
08-06 685
使用AJAX完成用户名是否存在异步校验:1.事件触发:* onblur2.编写AJAX代码:* 项Action中提交:传递username参数3.编写Action* 接收username:模型驱动接收.4.* 编写实体类* User* User.hbm.xml* 配置到spring中.5.编写DAO* 继承HibernateDaoSupport* 在配置中注入sessionFactory6.编写S...
Ajax验证用户名
QDY5945的博客
10-26 166
用Ajax验证用户名： 接口： 　　　　　　　　　get guestbook/index.php m : index a : verifyUserName usernam...
[Javaweb/LayUI/上机考试作业/开源]学生/图书/课程/仓库等管理系统六合一基础功能通用模板
最新发布
01-05
这是一个基于JavaWeb技术的开源学生/图书/课程/仓库等管理系统的基础功能通用模板，整合了LayUI前端框架，提供了丰富的交互体验。该系统适用于上机考试作业或教学实践，帮助学习者掌握JavaWeb开发的核心技能。 首先...
jsp&ajax学习笔记
weixin_44736938的博客
06-30 1421
jsp&ajax学习笔记
JavaWeb加强之JSON、jQuery、Ajax、Java正则表达式、过滤器、监听器、模板引擎FreeMarker
qq_38326107的博客
11-29 613
过滤器、监听器，以及JSON、Ajax和正则表达式等开发必备技能，并学习文件上传和验证码等功能开发。 2.4.1 JSON基础 JSON的基础语法，以及流行JSON框架FastJSON的使用。 内容： JSON语法规则： JSON数据是以key/value的形式描述，key和value中间使用冒号分隔开；多组key/value值使用逗号分隔开，例如：{ “firstName”:“John” , “lastName”:“Doe” }。 JSON的作用主要就是数据的存储与传输，易于人阅读和编写，同时也易
【Django ORM数据校验守则】：保证数据准确性与合法性的黄金法则
![【Django ORM数据校验守则】：保证数据准确性与合法性的黄金法则]...本章将对Django ORM数据校验进行概述，为后续深入探讨打下
ajax验证用户名是否重复
05-18
ajax+jQuery+struts2验证用户名是否重复
Ajax 异步请求-校验用户名唯一性
11-08
项目采用MVC分层结构， 使用Ajax异步请求技术实现校验用户名唯一性的功能
Ajax进行用户名验证
童一的博客
03-31 312
学习目标： Ajax进行用户名验证 学习内容： Ajax进行用户名验证 学习时间： 学习产出： 接上篇 5、使用Ajax进行用户名验证 (1)、springmvc配置:springmvc-servlet.xml加入json乱码配置 <!--注解驱动--> <mvc:annotation-driven> <!--JSON乱码问题配置--> <mvc:message-converters register-def
简单的Ajax验证用户名
冬青的专栏
12-25 1161
ajax
Ajax——校验用户名是否可用
Woo_home的博客
04-06 786
1. 搭建环境 页面准备 <body> <table border="1" width="500"> <tr> <td>用户名:</td> <td><input type="text" name="name" id="name" onblur="checkUserName(...
Ajax详解（拓展：利用Ajax实现用户名的校验）
时间静止
07-15 521
Ajax的简介、作用、js下的Ajax的讲解、jquery下的Ajax的讲解、json格式的简单介绍、http响应状态码的介绍以及利用Ajax实现用户名校验（检验用户名是否已经被使用）
Ajax验证用户名是否可用
悬在半空的博客
12-04 985
使用Ajax实现注册验证功能。
ajax使用之验证用户名是否存在
热门推荐
花2不谢
06-14 2万+
ajax使用非常广，比如验证用户名、二级联动等。实现的效果如下： 前台代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> ajax用户名验证 window.onload = function() { document.get
AJAX-校验用户名是否可用
maco_liao的专栏
07-24 305
1.给用户名文本框绑定失去焦点事件 &lt;input type="text" name="username" onblur="validateUsername()" id="username"/&gt; 2.创建XMLHttpRequest对象 if (window.XMLHttpRequest) {     xhr=new XMLHttpRequest(); }else if (wind...
SSH商城：Ajax实现用户名实时校验
"SSH网上商城使用Ajax实现用户名异步校验技术详解" 在现代Web开发中，用户体验是至关重要的一个方面。SSH（Struts、Spring、Hibernate）网上商城项目中，利用Ajax技术进行实时的用户名是否存在校验，可以极大地提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值