黑马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 ...
- 基于用Path.Combine的优化
Path.Combine: 什么时候会用到Path.Combine呢?,当然是连接路径字符串的时候! 所以下面的代码可以完美的工作: public static void Main() { strin ...
- android:怎么实现一个控件与另一个指定控件左对齐
https://segmentfault.com/q/1010000003905460?_ea=425861 针对你这种情况,最简单的一种办法是,设置两个TextView的宽度为固定值,且相等. Li ...
- 那些年我们踩过的坑之表单reset
开发者往往是在一个又一个的坑中成长起来的,自学的开发者尤其如此,刚刚填完一个坑,转身又掉进另一个坑.有些坑很容易就跳出来了,也有些坑能整了一天都没头绪,第二天早上一来发现后面就有一架通往坑外的梯子,坑 ...
- HNA CloudOS | 容器云服务专家
HNA CloudOS | 容器云服务专家 http://cloudos.hnaresearch.com
- android 的几个黄色警告解决办法(转)
转自:http://my.eoe.cn/864234/archive/5162.html 1:Handler 1 2 3 4 5 6 7 8 // This Handler class should ...
- 【原创】Nginx+PHP-FPM优化技巧总结(转)
php-fpm的安装很简单,参见PHP(PHP-FPM)手动编译安装.下面主要讨论下如何提高Nginx+Php-fpm的性能. 1.Unix域Socket通信 之前简单介绍过Unix Doma ...
- Gson通过借助TypeToken获取泛型参数的类型的方法(转)
最近在使用Google的Gson包进行Json和Java对象之间的转化,对于包含泛型的类的序列化和反序列化Gson也提供了很好的支持,感觉有点意思,就花时间研究了一下. 由于Java泛型的实现机制,使 ...
- MongoDB+MongoVUE安装及入门
前言及概念 据说nodejs和mongoDB是一对好基友,于是就忍不住去学习了解了一下MongoDB相关的一些东西, 那么,MongoDB是什么?这里的五件事是每个开放人员应该知道的: MongoDB ...
- [Go] 如何正确地 抛出 错误 和 异常（error/panic/recover）？
序言 错误 和 异常 是两个不同的概念,非常容易混淆.很多程序员习惯将一切非正常情况都看做错误,而不区分错误和异常,即使程序中可能有异常抛出,也将异常及时捕获并转换成错误.从表面上看,一切皆错误的思路 ...