1.ajax介绍
见过百度的搜索框吗?当你输入一个关键词,下面立马会出现一些相关的热词,这就是用ajax做到的。
2.环境设想:
有一个注册页面.jsp
<span id="mess"></span>
用户名:<input type="text" id="username" onblur="showMSG()"/>
当你鼠标移除焦点时会触发jscript中showMSG方法,想立刻从数据库中查该用户名是否可用
3.script中代码:
var username;
function showMSG(){
//获得界面输入的用户名
username=document.getElementById("username").value;
//创建浏览器对象
createXMLHttp();
xmlHttp.onreadystatechange=function showMsgCallBack(){
if(xmlHttp.readState==4){ //响应完成
if(xmlHttp.status==200){ //交易成功
document.getElementById("mess").innerHTML=xmlHttp.responseText; //将struts servlet回写的信息写到span上
}
}
};
//请求action处理(GET方式发送,请求action路径,时间戳用以区分,获取到的输入值,true是否采用异步请求方式)
xmlHttp.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username"+username,true);
//发送
xmlHttp.send(null);
}
function createXMLHttp(){
//(Firefox,Opera,8.0+,safari)
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
//微软IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
4.Servlet中代码
HttpServletResponse response = ServletActionContext.getResponse();
response.getWriter().println("<font color="red">用户名已被使用</font>");