AJAX:校验用户名是否被注册

1. ajax是什么?
* asynchronous javascript and xml：异步的js和xml
* 它能使用js访问服务器，而且是异步访问！
* 服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！
> json：它是js提供的数据交互格式，它在ajax中最受欢迎！

2. 异步交互和同步交互
* 同步：
> 发一个请求，就要等待服务器的响应结束，然后才能发第二个请求！中间这段时间就是一个字“卡”
> 刷新的是整个页面！
* 异步：
> 发一个请求后，无需等待服务器的响应，然后就可以发第二个请求！
> 可以使用js接收服务器的响应，然后使用js来局部刷新！

3. ajax应用场景
* 百度的搜索框
* 用户注册时（校验用户名是否被注册过）

4. ajax的优缺点
优点：
* 异步交互：增强了用户的体验！
* 性能：因为服务器无需再响应整个页面，只需要响应部份内容，所以服务器的压力减轻了！

缺点：
* ajax不能应用在所有场景！
* ajax无端的增多了对服务器的访问次数，给服务器带来了压力！

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>My JSP 'ajax3.jsp' starting page</title>

window.onload = function() {
// 获取文本框，给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开连接
xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>", 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元素
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>

SERVLET:

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");

/*
* 1. 获取参数username
* 2. 判断是否为itcast
* 3. 如果是：响应1
* 4. 如果不是：响应0
*/
String username = request.getParameter("username");
if(username.equalsIgnoreCase("WTY")) {
response.getWriter().print("1");
} else {
response.getWriter().print("0");
}
}

转载于:https://www.cnblogs.com/oycq9999/p/10334198.html

AJAX:校验用户名是否被注册相关推荐

删除商品信息恢复的java_零基础学习java------35---------删除一个商品案例，删除多个商品，编辑（修改商品信息），校验用户名是否已经注册（ajax）...
一. 删除一个商品案例将要操作的表格思路图前端代码 > Insert title here 查詢商品列表 idnamecategorypnumdescription描述${product. ...
ajax 用户已注册,Ajax检测用户名是否已经注册
程序功能当用户名输入完成(即用户名输入框失去焦点),利用Ajax检测用户名是否已经注册! 实现过程利用Ajax向CheckUserServlet发送请求,判断该用户名是否可用.这里只是为了演示Aj ...
十七 Ajax校验用户名功能
Ajax: 即"Asynchronous JavaScript And XML", 异步JavaScript和XML , 是指一种创建的交互式页面应用的网页开发技术,它并不是新的技 ...
Ajax——判断用户名是否已经注册
1.1.Ajax 1.Ajax:异步的JavaScript and XML 2.目的:用来发送异步请求,然后当服务器给我想要的时候进行回调操作 3.好处:提高用户体验:局部刷新: 1.2.判断用户名是 ...
javaweb基础----使用ajax校验用户名是否重复
首先是前端js的代码: 1 <script type="text/javascript"> 2 function checkForm(){ 3 //1.验证用户名不能为 ...
ssm用ajax校验用户名,SSM之检验用户名是否重复
1.controller(事务处理)层方法 /*** *检验学院名是否重复(是否可用) ResponseBody:返回的是json数据 * @param xueyuan_name * @param r ...
ajax校验用户名可用吗,基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML Insert title here //页面加载完成后 $(function() ...
ajax注册判断怎么写,ajax之判断用户名是否被注册
/** * * @author liang * 需求:模拟注册校验: * 1:jsp页面放置一个text文本框,当用户输入用户名,文本框失去焦点的时候,通过ajax访问服务器 * 2:servlet模 ...
java ajax找回密码,Java之AjaxAjax异步校验用户名
Ajax 即"Asynchronous JavaScript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax并非一种新的技 ...

AJAX:校验用户名是否被注册

AJAX:校验用户名是否被注册相关推荐

最新文章

热门文章