笔者是在SSH项目中实现的Ajax,用于异步验证用户输入的登录名是否已经注册。以下是相关过程
第一步:构建XMLHttpRequest对象
常见的操作是这样的
<script language="JavaScript" type="text/JavaScript">
<!- - var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
} //- ->
</script>
由于不同的浏览器之间的兼容性问题,如IE浏览器的IE5的XMLHttpRequest对象的创建需要使用Microsoft.XMLHTTP对象,而IE6则需要Msxml2.XMLHTTP对象,而其他浏览器一般直接使用XMLHttpRequest对象。为了最大限度地兼容不同浏览器的不同版本之间的问题,采用如下方式初始化XMLHttpRequest对象
<script language="JavaScript" type="text/JavaScript">
var xmlHttp = null;
try{
xmlHttp = new XMLHttpRequest();
}catch(msfirstkind){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //IE6对象
}catch(mssecondkind){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5对象
}catch(faild){
xmlHttp = null;
}
}
}
</script>
第二步:构建激发异步验证的js函数
在事件被激发后,然后调用callBack函数来执行服务器端的通讯
xmlHttp.open("get/post", uri, true/false, userName, userPwd); //通常前三个参数比较重要,第一个是向服务器发送请求的类型,第二个参数是服务器处理请求的action地址,第三个参数是是否通过异步的方式来发送请求。最后两个是可选参数,用来指定用户名和密码。
xmlHttp.onreadystatechange = callback; //注意,这里调用回调函数一定不能加上括号,否则xmlHttp.status的状态一直都是1.
xmlHttp.send(NULL); //配合open()函数操作,当open()函数指定了发送请求的方式为get时可以发送字符串,当指定为post时,可以发送XML文档
第三步:编写回调函数
function callback(){
if(xmlHttp.readyStatus == 4){//如果已从服务器收到了完整的响应数据
if(xmlHttp.stats == 200){//当服务器返回正确响应时
{
……//更新view层的相关逻辑操作
}
}
}
至此,Ajax的实现流程已经完成,然后,在servlet的java bean或Struts的action中返还相应的验证结果即可。
以action为例
public String checkUserName() throws Exception{
HttpServletResponse response = ServletActionContext.getResponse(); //获得HttpServletResponse对象
PrintWriter writer = response.getWriter(); //获得输出流,用以向ajax发送数据
if(….){
writer.print("true"); //如果业务逻辑验证为真,则向ajax发送字符串"true",ajax通过xmlHttp.responseText获取内容
}
else if(….){
writer.print("false"); //如果业务了逻辑验证为假,则向ajax发送字符串"false"
}
writer.close();
return SUCCESS;
}
struts.xml文件配置
…..
<package name="default" class="struts-default">
<actioin name="checkUserName" class="className" method="methodName">
<result name="success">/index.jsp</result>
</action>
</package>