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

最新推荐文章于 2021-12-01 09:56:28 发布

Andy Chen 陈郑游

最新推荐文章于 2021-12-01 09:56:28 发布

阅读量1.4k

点赞数 1

分类专栏： ————[ 前端技术 ] 文章标签： Ajax演示用户名是否被注册例子 Ajax用户名注册 Ajax例子 Ajax学习 Ajax

本文链接：https://blog.csdn.net/JavaWebRookie/article/details/51519087

版权

————[ 前端技术 ] 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;
			}
		}
	}
}

效果图

Andy Chen 陈郑游

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax教程—用户名是否被注册之案例篇（三）

AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载
复制链接

扫一扫

专栏目录