通用的Ajax模板校验用户名

gzd58_

于 2009-08-13 09:09:20 发布

阅读量89

点赞数

分类专栏： Ajax 文章标签： Ajax JSP JavaScript Microsoft Servlet ViewUI

本文链接：https://blog.csdn.net/gzd58_/article/details/83440627

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[b]校验用户名是否存在[/b]

[b]Ajax.js[/b]

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);
   	}
}

[b]JSP页面[/b]

<%@ 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" onclick="checkUserName();"></td>
          </tr>
          <tr>
            <td colspan="2"><input type="submit" value="提交"></td>
          </tr>
       </table>
    </form>
  </body>
</html>

[b]Serlet类[/b]

public class UserServlet extends HttpServlet
{

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy()
	{
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{		
		String userName = (String)request.getParameter("userName");
		UserService userService = new UserService();
		boolean b = userService.checkUserName1(userName);
		response.setCharacterEncoding("utf-8");
                  //jsp页面编码最好也用utf-8 防止乱码
		PrintWriter pw= response.getWriter();
		if(b)
		{
			pw.write("<font color=red>该用户名已经被使用</font>");
		}else
		{
			pw.write("<font color=red>该用户名可用</font>");
		}

	}
}

gzd58_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通用的Ajax模板校验用户名

[b]校验用户名是否存在[/b][b]Ajax.js[/b][code="javascript"]var _xmlHttpRequestObj;var _loadingFunction;var _postHttpProcessChangeCallback;var resultValue;function postXmlHttp(submiturl,callbac...
复制链接

扫一扫