本帖最后由 苑占丽 于 2012-7-14 23:20 编辑
<script language="javascript">
//创建XMLHttpReques对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
//Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
} else{
// IE浏览器
if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) { }
}
}
}
}
//处理服务器响应结果
function handleResponse() {
// 判断对象状态
if (XMLHttpReq.readyState == 4) {
// 信息已经成功返回,开始处理信息
if (XMLHttpReq.status == 200) {
var out = "";
var res = XMLHttpReq.responseXML;
var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
document.getElementById("nameResult").innerHTML = response;
}
}
}
//发送客户端的请求
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
//指定响应函数
XMLHttpReq.onreadystatechange = handleResponse;
// 发送请求
XMLHttpReq.send(null);
}
//验证用户名
function validateName()
{
var name = document.getElementById("name").value;
sendRequest("UserInsertServlet?name="+name);
}
//验证两次输入的密码是否相同
function validatePassword()
{
var password = document.getElementById("password").value;
var rePassword = document.getElementById("repassword").value;
if(password == rePassword)
document.getElementById("repasswordResult").innerHTML="密码验证已经通过。";
else
document.getElementById("repasswordResult").innerHTML="两次密码输入不相同,请重新输入。";
}
function validate()
{
var password = document.getElementById("password").value;
var repassword = document.getElementById("rePassword").value;
var name = document.getElementById("name").value;
if(!password == "" && !repassword == "" && !username == "" )
{return true;}
else{
if(password == "")
{document.getElementById("passwordResult").innerHTML="密码不能为空!"; }
if(repassword == "")
{document.getElementById("repasswordResult").innerHTML="确认密码不能为空!";}
if(name == "")
{document.getElementById("nameResult").innerHTML="用户名不能为空!"; }
if( sendRequest("UserCheckServlet?name="+name)){
document.getElementById("nameResult").innerHTML=res;}
return false;
}
}
</script>下面再贴出传统web应用模型与Ajaxweb应用模型的对比图:
Ajax的工作原理相当于在用户和服务器之间加了一个中间层,称为Ajax引擎,该引擎使用户操作与服务器响应异步化。在这种模式下,用户请求不是全部都提交给服务器。部分请求,如一些数据验证和简单的数据处理请求等就交给Ajax引擎完成,只有那些确实需要由服务器来完成的请求,才由Ajax引擎代为向服务器提交。
以上仅供参考,因为字符长度的限制,body部分代码没能贴出,不过可以写个简单的jsp页面来看下效果。对Ajax感兴趣的可以运行一下这个页面,看下效果。。 |
|