关于AJAX,其实我觉得不用理解很多,直接能套上用就可了。
首先,我们先建立一个js文件,包含返回xmlhttp的方法。
当我们需要时,引入这个js文件。
function getXMLHttpRequest()
{ var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
从获得xmlhttp开始,我们应用有四步:
window.onload=function(){
var xmlreq = getXMLHttpRequest();//1.得到XMLHttpRequest对象
//4.当服务器端返回数据时的处理方式--回调
xmlreq.onreadystatechange=function(){
//判断请求是否成功
if(xmlreq.readyState==4){
//判断响应是否成功
if(xmlreq.status==200){
//获取服务器返回的数据
alert(xmlreq.responseText);
}
}
};
//2.指明请求的服务器资源,创建了一个连接
xmlreq.open("get","${pageContext.request.contextPath}/servlet/AJAXServlet");
//3.发送请求
xmlreq.send(null);
};
xmlreq.responseText获得从servlet请求的数据。
下面我们看一个注册时验证用户名有没有重复的例子
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<script type="text/javascript">
function checkName()
{
//得到用户输入的用户名
var txt = document.getElementsByName("username")[0];
var name = txt.value;
var req = getXMLHttpRequest();//得到 XMLHttpRequest对象
//定义当servlet返回结果时的处理方法
req.onreadystatechange=function(){
if(req.readyState==4 && req.status==200){
//得到响应的数据
var span = document.getElementById("msg");
span.innerHTML = req.responseText;
}
};
req.open("get","${pageContext.request.contextPath}/servlet/findNameServlet?name="+name);
req.send(null);
}
</script>
<body>
<!-- 验证用户名是否存在,当文本框失去焦点时立刻验证 -->
用户名<input type="text" name="username" onblur="checkName()"><span id="msg"></span></br>
密码<input type="password" name="passwd"></br>
<input type="submit" value="注册">
</body>