一、实验简介

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

操作步骤:

  1、获取登录名的值

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

      *如果值存在,不能保存

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

二、实验操作

jsp部分:

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

ajax部分:

  1. //创建Ajax引擎
  2. function createXmlHttpRequest(){
  3. var xmlHttp;
  4. try{
  5. //Firefox,Opera,safari
  6. xmlHttp=new XMLHttpRequest();
  7. }catch(e){
  8. try{
  9. //internet Explorer
  10. xmlHttp=new ActiveXObject("Mxxml2.XMLHTTP");
  11. }catch(e){
  12. try{
  13. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  14. }catch(e){}
  15. }
  16. }
  17. return xmlHttp;
  18. }
  1. function checkLogonName(){
  2. var logonName=document.getElementById("logonName").value;
  3. //第一步:创建一个ajax引擎
  4. xmlHttp=createXmlHttpRequest();
  5.  
  6. //第二步:事件处理函数,实质上相当于一个监听,监听服务器与客户端的连接状态
  7. xmlHttp.onreadystatechange=function(){
  8. //存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
  9. if(xmlHttp.readyState==4){
  10. /**
  11. readyState:存有 XMLHttpRequest 的状态。从0到4发生变化。
  12. 0: 请求未初始化
  13. 1: 服务器连接已建立
  14. 2: 请求已接收
  15. 3: 请求处理中
  16. 4: 请求已完成,且响应已就绪
  17. **/
  18. if(xmlHttp.status==200){
  19. /**
  20. status:
  21. 400: 未找到页面
  22. 200:"OK"
  23. **/
  24. var data=xmlHttp.responseText;
  25. /**
  26. responseText 获得字符串形式的响应数据。
  27. responseXML 获得 XML 形式的响应数据。
  28. **/
  29. if(data==1){
  30. //说明已经存在
  31. alert("当前输入的登录名["+logonName+"]已经存在");
  32. document.getElementById("logonName").value="";
  33. document.getElementById("logonName").focus();
  34. }
  35. }
  36. }
  37. }
  38.  
  39. //第三步:与后台服务器创建一个连接
  40. xmlHttp.open("POST","../../CheckLogonName",true);
  41. /**
  42. open(method,url,async)
  43. 规定请求的类型、URL 以及是否异步处理请求。
  44. method:请求的类型;GET 或 POST
  45. url:文件在服务器上的位置
  46. async:true(异步)或 false(同步)
  47. **/
  48. xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头
  49. //第四步:发送请求的参数
  50. xmlHttp.send("logonName="+logonName);
  51. /**
  52. send(string)
  53. 将请求发送到服务器。
  54. string:仅用于 POST 请求
  55. **/
  56. /**
  57. GET 还是 POST?
  58. 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
  59. 然而,在以下情况中,请使用 POST 请求:
  60. 1: 无法使用缓存文件(更新服务器上的文件或数据库)
  61. 2: 向服务器发送大量数据(POST 没有数据量限制)
  62. 3: 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
  63. **/
  64. }

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

  1. <servlet>
  2. <servlet-name>CheckLogonName</servlet-name>
  3. <servlet-class>cn.itcast.elec.servlet.CheckLogonName</servlet-class>
  4. </servlet>
  5.  
  6. <servlet-mapping>
  7. <servlet-name>CheckLogonName</servlet-name>
  8. <url-pattern>/checkLogonName</url-pattern>
  9. </servlet-mapping>

新建一个Servlet文件

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

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. java中过滤器Filter的使用总结【转载】

    1.看了别人写的,觉得获益匪浅,转载下为以后的使用 java中Filter的使用

  2. BZOJ 1767] [Ceoi2009] harbingers (斜率优化)

    [BZOJ 1767] [Ceoi2009] harbingers (斜率优化) 题面 给定一颗树,树中每个结点有一个邮递员,每个邮递员要沿着唯一的路径走向capital(1号结点),每到一个城市他可 ...

  3. Django之视图(V)

    Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  4. 说明一下 os.path 和 sys.path 分别代表什么?

    os.path 主要是用于对系统路径文件的操作. sys.path 主要是对Python解释器的系统环境参数的操作(动态的改变Python解释器搜索路径).

  5. Codeforces Round #545 (Div. 2) C. Skyscrapers (离散化)

    题目传送门 题意: 给你n*m个点,每个点有高度h [ i ][ j ] ,用[1,x][1,x]的数对该元素所处十字上的所有元素重新标号, 并保持它们的相对大小不变.n,m≤1000n,m≤1000 ...

  6. 使用Kafka的一些简单介绍: 1集群 2原理 3 术语

    目录 第一节 Kafka 集群 Kafka 集群搭建 Kafka 集群快速搭建 第二节 集群管理工具 集群管理工具 集群 Issues 第三节 使用命令操纵集群 第四节 Kafka 术语说明 第五节 ...

  7. mongoDB学习笔记(2)

    一.删数据库 1.语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 2.实例 以下实例我 ...

  8. BigDecimal 的用法

    1.初始化 BigDecimal discount=new BigDecimal(0.9); BigDecimal discount=new BigDecimal(200); 2.加减乘除 加法 ad ...

  9. Robot Framework 源码阅读 day2 TestSuitBuilder

    接上一篇 day1 run.py 发现build test suit还挺复杂的, 先从官网API找到了一些资料,可以看出这是robotframework进行组织 测试案例实现的重要步骤, 将传入的te ...

  10. VMware新加网卡NAT连接(内网)出现本机与虚拟机ping不通的问题

    今新加网卡NAT连接,配置好之后始终出现eth1:link is not ready. 虚拟机与本机不能建立连接. 解决方案:windows里面打开服务开启VMware NAT Service,并关闭 ...