黑马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()是在调用方法而不是定义方法
随机推荐
- CAS单点登录流程
CAS的官方站点: https://apereo.github.io/cas/5.2.x/index.html 概念解读: The TGT (Ticket Granting Ticket), stor ...
- Oracle 11g R2 32位 & Oracle 11g R2 64位 -百度云下载
Oracle 11g R2 32位 & Oracle 11g R2 64位 -百度云下载 https://pan.baidu.com/s/1fuzy67Olfxzsy3WJMCrCnQ 提取码 ...
- Mvc+Dapper+存储过程分页10万条数据
10万条数据采用存储过程分页实现(Mvc+Dapper+存储过程) 有时候大数据量进行查询操作的时候,查询速度很大强度上可以影响用户体验,因此自己简单写了一个demo,简单总结记录一下: 技术:Mvc ...
- 【LOJ】#2532. 「CQOI2018」社交网络
题解 基尔霍夫矩阵,外向树是入度矩阵-邻接矩阵 必须删掉第一行第一列然后再求行列式 代码 #include <bits/stdc++.h> #define fi first #define ...
- 2018 Arab Collegiate Programming Contest (ACPC 2018) E - Exciting Menus AC自动机
E - Exciting Menus 建个AC自动机求个fail指针就好啦. #include<bits/stdc++.h> #define LL long long #define fi ...
- Python3安装turtle提示错误：Command "python setup.py egg_info" failed with error code 1
Python3安装turtle提示错误:Command "python setup.py egg_info" failed with error code 1 Python3.5安 ...
- javascript编写带阴历的黄历
最近在做一个黄历的快应用(quickapp),需要涉及到公历转阴历,效果如下: 快应用(https://www.quickapp.cn/): 快应用是基于手机硬件平台的新型应用形态:标准是由主流手机厂 ...
- JAVA 图形开发中组件对齐方法及界面开发
/*文章中用到的代码只是一部分,需要源码的可通过邮箱联系我 1978702969@qq.com*/ 在上篇博客中提到了JAVA图形界面开发时的两种布局,流式布局和边框布局. 在实际使用中可能会发现,往 ...
- 捕获程序异常之tryCatch
一.try catch语法try…catch…finally…语法中除了try以外,catch和finally都是可选的(两者必须要有一个),也就是说try…catch…finally…语法有以下三种 ...
- JDBC之 大数据内容的传输
JDBC之 大数据内容的传输 什么是大数据内容? 在数据库中,有一条一条的记录,记录中很多字段都是几个字符就够的,假如现在要把一部小说存入数据库,这本小说当然不是几个字符组成,而是由几万字组成,这本小 ...