黑马day17 ajax&实现username自己主动刷新
1. regist.jsp文件
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>校验用户名是否存在</title>
<script type="text/javascript" src="./regist.js"> </script>
</head>
<body>
<center>
<form action="" enctype="application/x-www-form-urlencoded" method="post">
<h3>请填写用户注冊信息</h3>
<table border="1">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" value="" id="username">
<div id="divcheck"></div>
<input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="psw" value=""></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="confpsw" value=""></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="text" name="birthday" value=""></td>
</tr>
</table>
</form>
</center>
</body>
</html>
执行界面：
2.regist文件
window.onload=function(){
document.getElementById("checkusername").onclick=function(){
var username=document.getElementById("username").value;//获取text文本框中输入的值
//1.获取xhr对象
var xhr=ajaxFunction();
//2.监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
document.getElementById("divcheck").innerHTML=data;
}
}
}
//3.建立连接
xhr.open("post","../servlet/ValidateUsernameServlet");
//4.发送数据
//假设请求类型是POST方式的话,须要设置请求首部信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+username);//把文本框中输入的用户名当做參数发送给server
}
}
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
3.ValidateUsernameServlet
package app.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidateUsernameServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
//模拟数据库
if(username==null||"".equals(username)){
response.getWriter().write("用户名不能为空！");
}else if("sa".equals(username)){
response.getWriter().write("用户名已经存在");
}else{
response.getWriter().write("用户名能够使用");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
黑马day17 ajax&实现username自己主动刷新的更多相关文章
- html学习 - 自己主动跳转与自己主动刷新
自己主动刷新 事实上自己主动刷新和跳转没啥差别,刷新就是跳转到本地址. 有几种办法,首先是直接在html的<head>标签里加入以下的代码. html代码 代码都放在<head> ...
- Spring Cache扩展：注解失效时间+主动刷新缓存
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- Spring Cache扩展：注解失效时间+主动刷新缓存(二)
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Thinkphp+Ajax带关键词搜索列表无刷新分页实例
Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...
- 黑马学习ajax&json 笔记
## 今日内容 1. AJAX: 2. JSON # AJAX: 1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步 ...
- 【AJAX】AJAX实现搜索信息自己主动推荐并补全
好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完.我们在搜索引擎中输入文字时文本框下会提示对应的信息,这个案例就是实现这样的基本功能,代码比較粗糙还须要进一步完好,当中有些地方也须要向 ...
- 黑马学习Ajax 跨域资源共享 jQuery+jsonp实现
- 黑马学习Ajax 概念和基本使用
- 黑马学习AJAX jQuery发送异步请求 $.ajax() $.post() $.get()是在调用方法而不是定义方法
随机推荐
- 【AtCoder】ARC101题解
C - Candles 题解 点燃的一定是连续的一段,枚举左端点即可 代码 #include <bits/stdc++.h> #define enter putchar('\n') #de ...
- P1736 创意吃鱼法 图的DP
题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...
- Successor hdu 4366 线段树
题意: 现在n个人,其中编号0的是老板,之后n-1个员工,每个员工只有一个上司,有一个忠诚值和能力值.每次要解雇一个人的时候,从他的下属中选取能力值大于他的且忠诚值最高的一个,若不存在则输出-1.共m ...
- Db2与Oracle的区别
这个部分是自己随便整理下. 在工作上需要,公司需要DB2兼容Oracle. 不懂DB2与Oracle的细节,这里努力整理,以后精通了再回来重新修改. https://www.2cto.com/data ...
- JAVA 图形开发中组件对齐方法及界面开发
/*文章中用到的代码只是一部分,需要源码的可通过邮箱联系我 1978702969@qq.com*/ 在上篇博客中提到了JAVA图形界面开发时的两种布局,流式布局和边框布局. 在实际使用中可能会发现,往 ...
- mybatis generator修改默认生成的sql模板
相关连接: mybatis-generator扩展教程系列 -- 自定义sql xml文件 git项目地址
- ssh端口转发（之kettle ssh方式连接数据库）
ssh参数解释 格式 ssh [user@]host [command] 选项: -1:强制使用ssh协议版本1: -2:强制使用ssh协议版本2: -4:强制使用IPv4地址: -6:强制使用IP ...
- 基于jquery的简洁树形折叠菜单
先上效果图: 最小的ul就是一个最小的树枝,空间允许时可无限扩展.html如下: <div class="panel panel-default"> <div c ...
- normalizr实践使用(个人总结，仅供参考)
# normalizr实践使用 原数据 (自编数据,本数据仅供参考) var aaaObj ={ "id" : "0000000000000000000000000000 ...
- 20172308 实验四《Java面向对象程序设计 》实验报告
20172308 2017-2018-2 <程序设计与数据结构>实验四报告 课程:<程序设计与数据结构> 班级: 1723 姓名: 周亚杰 学号:20172308 实验教师:王 ...