Ajax框架Prototype入门实例收藏
Ajax实现的一个登录验证程序，可以看到代码有些复杂。但是Java世界里从来就不缺少框架，Ajax也有不少优秀的框架，其中Prototype就是其中之一。通过Prototype可以轻松实现很多功能，关于Prototype请参见：http://www.prototypejs.org/
下面就用Prototype实现登录验证
1.页面
<form name="myform" action="login.do" method="post" onSubmit="return check()">
Name: <input type=text id="usr" name="usr"><br>
Password: <input type=password id="pwd" name="pwd"><br>
<input type=submit />
</form>
2.JavaScript
<script type="text/javascript" src="js/prototype.js"></script>
<scritp type="text/javascript">
function check() {
//获得用户输入的用户名和密码
var params = "usr=" + document.getElementById("usr").value + "&pwd=" + document.getElementById("pwd").value;
new Ajax.Request(
"login", //请求URL
{
method:''post'',
parameters : params, //请求参数
onComplete: function(transport) { //设置回调函数
var data = transport.responseXML;
var flag = data.getElementsByTagName("flag")[0].firstChild.nodeValue;
if (flag == "false") {
alert(''用户名或密码错误！请重新输入！'');
} else {
window.open("ok", "_top");
}
}
});
return false;
}
怎样，和上一篇实现相同的功能，却简单了许多
二、Ajax.Updater
Ajax.Updater是用来将返回的html插入到指定的标签中。比如
页面：
<body>
<form name="myform" action="login.do" method="post" >
<div id="s"></div>
</form>
</body>
JavaScript：
function check() {
//获得用户输入的用户名和密码
var params = "usr=" + document.getElementById("usr").value + "&pwd=" + document.getElementById("pwd").value;
new Ajax.Updater(
''s'', //要将html插入的标签ID
''login'', //能获得HTML的请求URL
{
method: "post",
parameters : params 参数
});
return false;
}
这样，从服务器返回的HTML就会被插入到指定的标签中。