用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 > </ p >
< p > </ p >
< p >< span id ="content" >
< textarea id =result cols =60 rows =10 ></ textarea >
</ span ></ p >
</ form >
</ body >
</ html >
<% ...
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 > </ p >
< p > </ 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();
}
}
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();
}
}