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

时间：2023-02-08 17:11:38

    大家都知道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 stubrequest.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);}}

    
   


标签：
相关文章