用XMLHTTPRequest对象来进行AJAX的异步数据交互实现用户名校验的方法

最新推荐文章于 2022-03-14 00:22:47 发布

iteye_9841

最新推荐文章于 2022-03-14 00:22:47 发布

阅读量265

点赞数

分类专栏： Ajax 文章标签： Ajax Servlet JSP IE HTML

本文链接：https://blog.csdn.net/iteye_9841/article/details/81971753

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

废话不多说直接贴源码：

1.新建一个jsp页面

<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=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>My JSP 'index.jsp' starting page</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">
	<script type="text/javascript" src="js/verifyown.js"></script>
  </head>
  <body>
  	<h3>用户名输入校验的例子</h3>
  	<input name="username" type="text" id="username"><br>
  	<input type="button" value="检验" οnclick="verify()">
  	<div id="result"></div>
  </body>
</html>

这样就不需要定义在form表单里了。

2.创建Servlet

package com.zchen.ajax.servlet;

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 AJAXServer extends HttpServlet {
	private static final long serialVersionUID = 3611240119854641367L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			response.setContentType("text/html");
			response.setCharacterEncoding("utf-8");
			PrintWriter out = response.getWriter();
			String old = request.getParameter("name");
			if (old == null || old.length() == 0) {
				out.println("用户名不能为空");
			} else {
				String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
				if (name.equals("chenzhen")) {
					out.println("用户名[" + name + "]已经存在。");
				} else {
					out.println("用户名[" + name + "]尚未存在。");
					out.println("<br/><a href=\'index.jsp\'>返回校验页面</a>");
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

3.jiangservlet配置在web.xml中（很简单忽略）

4.最重要的一部新建一个js文件进行异步校验

//用户名校验的方法
//这个方法是用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//1.使用dom的方式获取文本框的值
	//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面的一个标签，例如<input >
	//.value可以获取一个元素节点的value属性值
var username = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
	//这XMLHTTPRequest是对象内部使用中最复杂的一步
	//需要针对IE和其他类型的游览器建立这个对象的不同使用方式
	if(window.XMLHttpRequest){
		//针对FireFox、Mozillar、Opera、safari、IE7、IE8
		xmlhttp = new XMLHttpRequest();
		if(xmlhttp.overrideMineType){
			//针对某些特定版本的mozillar游览器的BUG进行修正
		   xmlhttp.overrideMimeType("text/html");
		}
	}else if(window.ActiveXObject){
	 	//针对IE6、IE5.5、IE5
	 	//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
	 	//排在前面的版本较新
	 	var activexName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
	 	for(var i=0;i<activexName.length;i++){
	 		try{
	 			//取出一个控件名进行创建，如果创建成功就终止循环
	 			//如果创建失败回抛出异常然后可以继续循环继续藏式创建
	 			xmlhttp = new ActiveXObject(activexName[i]);
	 			break;
	 		}catch(e){
	 			
	 		}
	 	}
	}
	//确认XMLHTTPRequest对象创建成功
	if(!xmlhttp){
		alert("XMLHTTPRequest对象创建失败！");
	}else{
		alert(xmlhttp);
	}
	
//3.注册回调函数
	//注册回调函数时，只需要函数名不需要括号
	//我们需要将函数名之策，如果加上括号就会把函数的返回值注册上这是错误的
	xmlhttp.onreadystatechange = callback;	
	
//4.设置连接信息
	//第一个参数表示http的请求方式，支持所有http的请求方式，只要使用get和post
	//第二个参数表示请求的url地址，get方式请求的参数也在url中
	//第三个参数表示采用异步还是同步方式交互 true表示异步
	xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
	
//5.发送数据，开始和服务器端进行交互
	//同步方式下，send这句话会在服务器端数据回来后才执行完
	//异步方式下，send这句话会立即完成执行
	xmlhttp.send(null);
}

function callback(){
//6.接受响应的数据
	//判断对象的状态时交互完成
	//一共有5种状态，4表示完成
	if(xmlhttp.readyState == 4){
		//判断http的交互是否成功 200表示成功
		if(xmlhttp.status == 200){
			//获取服务器端返回的数据
			//获取服务器端返回的纯文本数据
			var responseText =  xmlhttp.responseText;
			//将数据显示在页面上
			//通过dom的方式找到div标签所对应的元素的节点
			var divNode = document.getElementById("result");
			//设置元素节点中的html内容
			divNode.innerHTML = responseText;
		}
	}
}

注意：上面使用的get方式请求参数如果要换成post则应该将：

xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
xmlhttp.send(null);

换成：

//POST方式请求的代码
	xmlhttp.open("POST","servlet/AJAXServer",true);
//POST方式需要自己设置http的请求头
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POst方式发送数据
	xmlhttp.send("name="+username);

5测试okay。