使用JSP Servlet和Ajax实现简单的注册页面的用户名密码验证

时间：2023-02-08 17:12:02

    大家都知道Ajax并不是一项新的发明技术，它的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。我们在使用html表单提交页面时，会有一种刷新页面的感觉，这给予用户的体验感十分不好，在这里可以通过js脚本来和后台服务器进行数据传递与交互，服务器查询到页面后，会将数据传送到js里面，并有js相关变量来接收，再在js里将获取到的值赋给html的input对象value值（通常是<span><label><text>等），所以js与后台异步交互可以不刷新整个页面，达到了局部刷新的效果。在前面已经提到在这里的html页面局部值的动态改变效果的是有js里面实现的。

    那么实现js与后台传递的主要对象是XMLHttpRequest 对象，XMLHttpRequest 用于在后台与服务器交换数据。

    本文代码的实现使用了Eclipse Java EE IDE for Web Developers.Version: Indigo Service Release 2。在编写代码的时候有几个坑在这里和大家说一下，第一ajax在传值时可以选get或post，这和表单的用法一样，另外，如果你想传递中文，在接收的servlet里面需要转换一下编码。

    最后，本文使用的是最原始的ajax的异步传递原理，现在大都使用jquery封装的ajax，但最原始的往往是基础，是原理。


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function chaxun(){
	var userid=document.getElementById("userid");
	//document.write(userid.value);
	//document.getElementById("userid").innerHTML="hellod";
	
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	}else{
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			
			document.getElementById("uid").innerHTML=xmlhttp.responseText;
			
			//alert("hello");
		}
	}
	xmlhttp.open("POST", "ReTest?userid="+userid.value,true);xmlhttp.send();}</script></head><body><br><br>用户：<input type="text" id="userid" onblur="chaxun()"><span id="uid"></span><br>密码：<input type="text" id="pwd" ><br><input type="submit" value="dianji" onclick="myFunction()"></body></html>



 

 

 

Servlet实现代码如下：
 

package dao;

 

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ReTest
 */
@WebServlet("/ReTest")
public class ReTest extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ReTest() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String id=request.getParameter("userid");
		System.out.println(id);
		response.getWriter().println(id);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//request.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String id=request.getParameter("userid");
		id = new String(id.getBytes("iso-8859-1"),"gb2312");
		System.out.println(id);
		response.getWriter().println(id);
	}

}



 

      

标签：
相关文章