ajax总结及案例

一、实验简介

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

操作步骤：

　　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;
     }