傻瓜式使用Ajax进行表单验证（附完整代码）另：xmlHttp.open在eclipse中的url参数

最新推荐文章于 2021-08-06 01:04:30 发布

Science || Romance

最新推荐文章于 2021-08-06 01:04:30 发布

阅读量425

点赞数

分类专栏： web 文章标签： Ajax xmlHttp.open() url 表单验证

本文链接：https://blog.csdn.net/a1007174282/article/details/89501683

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

做毕业设计时想要在网页设计中加入Ajax的应用，但苦于没有学过Json，jQuery等一些相对成熟的框架，只有jsp+JavaBean+servlet的MVC模式还学过一些，于是只能在网上查找各种教程和相关知识，最后还在图书馆借了N本书，最后误打误撞，竟然真给我搞了出来！

环境：eclipse、tomcat

代码如下：

jsp页面端

head部分的js代码

<head>
<script type="text/javascript" language="javaScript">
	var xmlHttp=false;     //全局变量，用于记录XMLHttpRequest对象
	function createXMLHttpRequest(){
		if(window.ActiveXObject){//Internet Explorer时，创建XMLHttpRequest对象的方法
			try{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					//旧版本的Internet Explorer,创建XMHttpRequest对象
				}catch(e){
					window.alert("创建XMLHttpRequest对象错误"+e);
				}
			}
		}else if(window.XMLHttpRequest){
			xmlHttp =new XMLHttpRequest();
		}
		if(!(xmlHttp)){//未成功创建XMLHttpRequest对象
			window.alert("创建XMLHttpRequest对象异常！");
		}
	}
	//用户名校验的操作
	function userVal(objVal){
		var userName=objVal;
		createXMLHttpRequest();  //创建xmlHttp对象
		xmlHttp.onreadystatechange=userBack;
		var url='UserValServlet?userName='+ userName;//！！！特别注意，见代码下方解释
		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
	}
	function userBack(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				userInfo(xmlHttp.responseText);  //对服务器端的返回文本信息进行处理
			}
		}
	}
	function userInfo(retFlag){//对服务器端返回的数据进行判断，并设置不同的内容
		if(retFlag == "1"){//返回值为“1”，说明用户名已经存在
			document.getElementById("msg").innerHTML="<font color=red>该用户名已经存在！</font>";
		}else{//否则提示用户名可用
			document.getElementById("msg").innerHTML="<font color=green>该用户名可用！</font>";
		}
	}
	</script>
</head>

特别注意（解释）：

xmlHttp.open(method, url, mode, user, pwd)这个方法，用于创建一个新的HTTP请求，并指定此请求的方法、URL及验证信息等，参数具体含义此处不解释，要重点提出的一点是，url这个参数。

url为请求的目标地址，因为我用的是servlet，所以这里就用了url向servlet传值。如果是在eclipse中，使用如我所说的MVC（jsp+JavaBean+servlet）模式，那么目录结构应该是在src下放了servlet，而在Webcontent下存放jsp，此时的URL只需要如我代码中所写，直接就是servlet名就可以，不用管相对地址绝对地址。这里我不清楚是不是因为我的servlet里直接有@WebServlet。

另外，在页面需要出现提示信息的位置插入

<span id="msg"></span><br><br>

需要验证的表单文本框

<input type="text"  name="userName" onblur="userVal(this.value)" placeholder="用户名 *">

服务器端（主要是doGet方法部分）

以下以固定用户名验证为例，即如果输入的验证信息是“Ajaxhahaha”就返回“1”，否则返回“0”.

package az.mvc;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

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 UserValServlet
 */
@WebServlet("/UserValServlet")
public class UserValServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UserValServlet() {
        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
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		response.setContentType("text/html;charset=UTF-8");
		String userName=request.getParameter("userName");
		System.out.println("userName value is "+userName);
		PrintWriter out=response.getWriter(); 
		if("Ajaxhahaha".equals(userName)){
            out.print("1");
        }else{
            out.print("0");
        }
		out.flush();//输出流刷新
		out.close();//关闭输出流
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

以上方法主要借鉴自《JavaScript完全自学宝典》。感谢助我完成毕设。