Ajax教程—用户名是否被注册之案例篇(三)

版权声明:本文为博主原创文章,可允许转载,但注明出处。 https://blog.csdn.net/JavaWebRookie/article/details/51519087

1、Ajax简介

    AJAX即“AsynchronousJavascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术、AJAX =异步 JavaScript和XML(标准通用标记语言的子集)。

    AJAX 是一种用于创建快速动态网页的技术。

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。



教程连接




例子:注册表单之校验用户是否注册!

Servlet类:

package com.ajax.data;

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 AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		doPost(request,response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		
		/*
		 * 1. 获取参数username
		 * 2. 判断是否为itcast
		 * 	 5. 如果为空:响应2
		 *   3. 如果是:响应1
		 *   4. 如果不是:响应0
		 */
		String username = request.getParameter("username");
		
		if(username.equalsIgnoreCase("chen")) {
			response.getWriter().print("1");
		}else if(username.equalsIgnoreCase("")) {
			response.getWriter().print("2");
		}else {
			response.getWriter().print("0");
		}
	}

}

jsp页面、显示页面与处理:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>演示用户名是否被注册</title>
    
<script type="text/javascript" src="ajax_createXMLHttpRequest/createXMLHttpRequest.js"></script>
<script type="text/javascript">

window.onload = function() {
	// 获取文本框,给它的失去焦点事件注册监听
	var userEle = document.getElementById("usernameEle");
	userEle.onblur = function() {
		//1.得到异步对象
		var xmlHttp = createXMLHttpRequest();
		//2.打开连接
		xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>", true);
		//3.设置请求头:Content-Type
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		//4.发送请求,给出请求体
		xmlHttp.send("username=" + userEle.value);
		
		//5.给xmlHttp的onreadystatechange事件注册监听
		xmlHttp.onreadystatechange = function() {
			//双重判断
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				//获取服务器的响应,判断是否为1
				// 是:获取span,添加内容:“用户名已被注册”
				var text = xmlHttp.responseText;
				var span = document.getElementById("errorSpan");
				
				if(text == "1"){
					span.innerHTML = "很抱歉!用户名已被注册!";
				}else if(text == "2") {
					//得到span元素
					span.innerHTML = "请输入用户名!";
				}else if(text == "0"){
					span.innerHTML = "恭喜您!该用户名可以注册哦!";
				}else {
					span.innerHTML = "";
				}
			}
		};
	};
};
</script>

  </head>
  <body>
    
	<h1>演示用户名是否被注册</h1>
	<form action="" method="post">
		用户名:<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
		密 码:<input type="password" name="password"/><br/>
		<input type="submit" value="注册"/>
	</form>
    
  </body>
</html>



createXMLHttpRequest.js

/**
 * 创建XMLHttpRequest
 * return XMLHttpRequest
 * 适用常用浏览器
 * 
 */
function createXMLHttpRequest() {
	
	try {
		//大多数浏览器
		return new XMLHttpRequest();
	} catch (e) {
		try {
			//IE6.0
			return ActvieXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				//IE5.5及更早版本	
				return ActvieXObject("Microsoft.XMLHTTP");
			} catch (e) {
				alert("请换更新版本的浏览器!该浏览器不支持XMLHttpRequest!");
				throw e;
			}
		}
	}
}


效果图




展开阅读全文

没有更多推荐了,返回首页