您的位置：首页 > 其它

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

2016-05-27 19:18 316 查看

1、Ajax简介

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

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

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

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

教程连接

Ajax教程一响应text文本

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

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航