一、实验简介

目的:检验输入登录名在数据库中是否存在,如果存在,当鼠标移出登录名框后,会提示用户名已存在,并且鼠标指针自动回到登录名框内。

操作步骤:

  1、获取登录名的值

  2、根据获取的登录名,组织查询条件,查询用户信息。

      *如果值存在,不能保存

      *如果值不存在,可以保存

二、实验操作

jsp部分:

<s:textfield name="logonName" id="logonName" size="20" maxlength="25" onblur="checkLogonName()" />

ajax部分:

 //创建Ajax引擎
function createXmlHttpRequest(){
var xmlHttp;
try{
//Firefox,Opera,safari
xmlHttp=new XMLHttpRequest();
}catch(e){
try{
//internet Explorer
xmlHttp=new ActiveXObject("Mxxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return xmlHttp;
}
 function checkLogonName(){
var logonName=document.getElementById("logonName").value;
//第一步:创建一个ajax引擎
xmlHttp=createXmlHttpRequest(); //第二步:事件处理函数,实质上相当于一个监听,监听服务器与客户端的连接状态
xmlHttp.onreadystatechange=function(){
//存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
if(xmlHttp.readyState==4){
/**
readyState:存有 XMLHttpRequest 的状态。从0到4发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
**/
if(xmlHttp.status==200){
/**
status:
400: 未找到页面
200:"OK"
**/
var data=xmlHttp.responseText;
/**
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
**/
if(data==1){
//说明已经存在
alert("当前输入的登录名["+logonName+"]已经存在");
document.getElementById("logonName").value="";
document.getElementById("logonName").focus();
}
}
}
} //第三步:与后台服务器创建一个连接
xmlHttp.open("POST","../../CheckLogonName",true);
/**
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
**/
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头
//第四步:发送请求的参数
xmlHttp.send("logonName="+logonName);
/**
send(string)
将请求发送到服务器。
string:仅用于 POST 请求
**/
/**
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
1: 无法使用缓存文件(更新服务器上的文件或数据库)
2: 向服务器发送大量数据(POST 没有数据量限制)
3: 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
**/
}

路径设置:
  在web.xml配置文件中,新建一个Servlet-mapping和Servlet

<servlet>
<servlet-name>CheckLogonName</servlet-name>
<servlet-class>cn.itcast.elec.servlet.CheckLogonName</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>CheckLogonName</servlet-name>
<url-pattern>/checkLogonName</url-pattern>
</servlet-mapping>

新建一个Servlet文件

 IElecUserService elecUserService=(IElecUserService)ServiceProvider.getService(IElecUserService.SERVICE_NAME);
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String logonName=request.getParameter("logonName");
/**
* checkflag:判断当前登录名是否在数据库中存在
* 如果查询结果有值,checkflag=1;则,数据库中有重复值
* checkflag=2,数据库中没有重复值
*/
String checkflag=elecUserService.checkLogonName(logonName);
out.print(checkflag);
out.flush();
out.close();
}
 public String checkLogonName(String logonName) {
// TODO Auto-generated method stub
String hqlWhere=" and o.logonName = ? ";
Object [] params={logonName};
List<ElecUser> list=elecUserDao.findCollectionByConditionNoPage(hqlWhere, params, null);
String checkflag="";
if(list!=null&&list.size()>0){
checkflag="1";
}else{
checkflag="2";
}
return checkflag;
}

ajax总结及案例的更多相关文章

  1. AJAX应用小案例

    此案例在XAMPP本地服务器上运行,需要应用jquery3.1.1的版本,应用JSON传递数据 代码如下: html代码: <!DOCTYPE html><html lang=&qu ...

  2. ajax调用数据案例,二级联动

    题目:请针对移动端web浏览器制作一个结账数据信息展示页面 要求: 1. 页面样式除不使用表格呈现外,可自由选择其他呈现方式 2. 需符合移动端操作习惯 3. 可根据服务区.门店查询结账信息 4. 可 ...

  3. ajax基本原理与案例

    一.什么是Ajax AJAX即“Asynchronous Javascript And XML”( 异步 JavaScript和XML),AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互 ...

  4. jquery ajax/post 请求 案例

    @RequestMapping("/hello")    @ResponseBody    public Hello getJson(HttpServletRequest requ ...

  5. jSon和Ajax登录功能,ajax数据交互案例

    ajax实例,检测用户与注册 检测用户名是否被占用: 在用户填写完用户名之后,ajax会异步向服务器发送请求,判断用户名是否存在 首先写好静态页面: index.html <!DOCTYPE h ...

  6. ajax+php处理案例

    <div> <table> <tr> <th>状态</th> <th>信息</th> </tr> < ...

  7. 使用struts dojo ajax源码案例

    我这里使用的jar 包struts2-dojo-plugin-2.2.1.1.jar ===========jsp======================= <%@ taglib prefi ...

  8. 【前端学习笔记】2015-09-11~~~~ js中ajax请求返回案例

    <body><textarea id='a' rows=100 cols=300>result:</textarea>><script>var a ...

  9. 第六章 jQuery和ajax应用

    ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...

随机推荐

  1. [2019杭电多校第二场][hdu6599]I Love Palindrome String(回文自动机&&hash)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6599 题目大意为求字符串S有多少个子串S[l,r]满足回文串的定义,并且S[l,(l+r)/2]也满足 ...

  2. [BZOJ 2199] [USACO11JAN] 大陆议会The Continental Cowngress(2-SAT)

    [BZOJ 2199] [USACO11JAN] 大陆议会The Continental Cowngress(2-SAT) 题面 题面较长,略 分析 考虑把问题转化成一个依赖性问题 我们把每只奶牛投出 ...

  3. python 二维数组转一维数组

    三种方法 比如 a = [[1, 2], [3, 4], [5, 6]] 列表推导式 [i for j in a for i in j] 库函数 from itertools import chain ...

  4. 修复线上bug

    1,git branch new_branch 2,git push origin new_branch 以上是线上地址操作,以下是本地仓库操作 3,git fetch 4,git checkout ...

  5. C# ListView添加DragDrop

    先建立好ListView,ImageList,然后编写一个比较类在就是添加DragDrop事件了具体实现看代码吧 public partial class Form1 : Form { public  ...

  6. spring,get请求中带date日期格式参数,后台无法转换的问题

    今天遇到个很奇怪的问题.前端 的查询条件中带有日期范围日期的格式 是 yyyy-MM-dd HH:mm 结果后台报错 org.springframework.validation.BindExcept ...

  7. java 中Shallow Heap与Retained Heap的区别

    Shallow Size Shallow Size是对象本身占据的内存的大小,不包含其引用的对象.对于常规对象(非数组)的Shallow Size由其成员变量的数量和类型来定,而数组的ShallowS ...

  8. 01.Windows2008R2系统禁启SMBv1服务命令

    微软漏洞安全问题: 检测:默认配置 = 已启用(未创建注册表项),所以不会返回 SMB1 值.Get-Item HKLM:\SYSTEM\CurrentControlSet\Services\Lanm ...

  9. ForkJoinPool源码简单解析

    ForkJoin框架之ForkJoinTask  java  阅读约 62 分钟 前言 在前面的文章"CompletableFuture和响应式编程"中提到了ForkJoinTas ...

  10. 自定义线程池的名称(ThreadPoolExecutor)

    目的:有时候为了快速定位出现错误的位置,在采用线程池时我们需要自定义线程池的名称. 1.创建ThreadFactory(ThreadPoolExecutor默认采用的是DefaultThreadFac ...