【ajax技术学习】原生ajax表单用户名验证

最新推荐文章于 2020-04-25 16:20:54 发布

北风剑客

最新推荐文章于 2020-04-25 16:20:54 发布

阅读量1.2k

点赞数

分类专栏：脚本语言文章标签： ajax

本文链接：https://blog.csdn.net/xiongwt/article/details/10260639

版权

脚本语言专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<p></p><p></p>
<%@page pageEncoding="utf-8" 
contentType="text/html;charset=utf-8"%>
<html>
	<head>
		<script type="text/javascript">
			//step1 获得XmlHttpRequest对象。
			function getXmlHttpRequest(){
			var xmlHttpRequest = null;
            if ((typeof XMLHttpRequest) != 'undefined') {
                xmlHttpRequest = new XMLHttpRequest();
             } else {
                xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
              }
                return xmlHttpRequest;
			}
			function valiusername(){
				//step1 获得XmlHttpRequest对象。
				var xhr = getXmlHttpRequest();
				var value = document.getElementById("username").value;
				//step2 使用XmlHttpRequest对象向服务器发送请求。发送get请求
				xhr.open("get","valiusername.do?username=" + encodeURI(value),true);
				//step4 使用服务器返回的数据更新页面。
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							var txt = xhr.responseText;
							var obj = document.getElementById('username_msg');
							obj.innerHTML = txt;
						}else{
							var obj = document.getElementById('username_msg');
							obj.innerHTML = 'system error';
						}
					}else{
						var obj = document.getElementById('username_msg');
						obj.innerHTML = 'checking...';
					}
				};
				xhr.send(null);
			}
			
			function valiusername2(){
				var xhr = getXmlHttpRequest();
				var value = document.getElementById("username").value;
				xhr.open("post","valiusername.do",true);
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							var txt = xhr.responseText;
							var obj = document.getElementById('username_msg');
							obj.innerHTML = txt;
						}else{
							var obj = document.getElementById('username_msg');
							obj.innerHTML = 'system error';
						}
					}else{
						var obj = document.getElementById('username_msg');
						obj.innerHTML = 'checking...';
					}
				};
				xhr.send("username=" + value);
			}
		</script>
	</head>
	<body style="font-size:30px;">
		<form action="regist.do" method="post">
			用户名:<input id="username" name="username" 
			οnblur="valiusername();"/>
			<span style="color:red;" id="username_msg"></span>
			<br/>
			密码:<input name="pwd"/>
			<br/>
			<input type="submit" value="确认"/>
		</form>
	</body>
</html>

后台servlet程序：

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UserServlet extends HttpServlet {
	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String uri =request.getRequestURI();
		String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		if(path.equals("/valiusername")){
			System.out.println("valiusername...");
			if(1==2){
				//模拟一个异常
				throw new ServletException("some error");
			}
			//String username = request.getParameter("username");//post提交使用，get提交后乱码
			//post提交乱码，get提交使用 
			String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8"); 
			System.out.println("username:" + username);
			if(username.equals("张三")){
				out.println("用户名已经存在.");
			}else{
				out.println("可以使用");
			}
		}else if(path.equals("/regist")){
			
		}
	
	}

}

本示例功能：

对表单中的用户名进行Ajax校验，如果输入的是张三，则显示用户名已经存在，否则显示可以使用。

本示例注意：

若是采用ajax的get提交方式，后台在取值时，用代码：

String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");

若是采用post提交，则用：

String username = request.getParameter("username");

本示例涉及技术知识点：ajax+jsp+servlet

北风剑客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录