ajax总结及案例

一、实验简介

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

操作步骤：

　　1、获取登录名的值

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

　　　　　　*如果值存在，不能保存

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

二、实验操作

jsp部分:

<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

<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文件

 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     }

 

posted @ 2017-03-10 12:09  liurio  阅读(300)  评论(0)  编辑  收藏  举报