prototye+java实现ajax登录实例

用prototype开源框架写了一个简单的ajax登录程序。

TestAjax.jsp

 

<% ... @ page language="java" import="java.util.*" pageEncoding="GBK" %>

<% ...
    String contextPath = request.getContextPath();
%>

< html >
< head >
< title > 操作完成 </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=GBK" >
< link  rel ="stylesheet"  href ="<%=contextPath%>/mc/common/css/grayStyle.css" >
< script  language ="JavaScript"  src ="<%=contextPath%>/mc/common/include/js/prototype.js" ></ script >
</ head >
< script  type ="text/javascript" > ...
function login()...{

    var name = $F("name");
    var psd = $F("password");
    var paras = 'name='+name+'&password='+psd;
  var url = "<%= contextPath %>/mc/inducorp/mc/di/agreement/test/TestAjaxServlet";
  var myAjax = new Ajax.Updater(
              'result',
            url,
            ...{
                method: 'get',
                parameters: paras
            });

    }

      function showResponse(originalRequest)
        ...{

       $("result").value=originalRequest.responseText;
        //alert("showResponse:"+originalRequest.responseText);

        }


</ script >
< body  >
< form  action  = ""  method ="get"  name ="agreementform" >
   < label > Name:
   < input  type ="text"  name ="name"  id ="name" >
   </ label >


   < p >
     < label > password:
     < input  type ="text"  name ="password"  id ="password" >
     </ label >
   </ p >
   < p >
     < label >
     < input  type ="button"  name ="button"  id ="button"  value ="Login"  onClick ="login()" >
     </ label >
   </ p >
   < p > &nbsp; </ p >
   < p > &nbsp; </ p >
   < p >< span  id ="content" >
   < textarea  id =result  cols =60  rows =10  ></ textarea >

   </ span ></ p >
</ form >
</ body >
</ html >

在Ajax.Updater构造方法中传入了一个元素 id，用于显示后台处理后传回的结果。

TestAjaxServlet.java

 

package  com.icss.mc.inducorp.mc.di.agreement.test;

import  java.io.Writer;

import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;

import  com.icss.mc.base.servlet.BaseServlet;


public   class  TestAjaxServlet  extends  BaseServlet  ... {

    public void performTask(HttpServletRequest request,
            HttpServletResponse response) throws Exception ...{

        String name = this.getParameter(request, "name", true,true,false,"");
        String password = this.getParameter(request, "password",true,true,false,"");
        log.debug("登录："+name+":"+password);
        String msg = "登录失败！";
        if(name.equals("test")&&password.equals("test"))...{
            msg = "登录成功！";
        }

        response.setContentType("text/xml; charset=UTF-8");
        response.setHeader("Cache-Control","no-cache");

        StringBuffer sb = new StringBuffer();
        sb.append(msg);
        Writer writer = response.getWriter();
        writer.write(sb.toString());
        writer.flush();
        writer.close();


    }

}