html页面代码：
<body> <h3> 请输入用户名和密码登录 </h3> <form id="login" action="/Ajax/login.jsp" method="post"> 用户名： <input type="text" name="user" /> <br /> 密 码： <input type="password" name="pass"> <br /> <input type="button" value="验证用户" onclick="login();"/> <br /> <div id="d"></div> </form> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function login() { //直接使用Form的request方法发送异步请求，request方法的参数是个json数组的格式！ $("login").request( { //指定回调函数 onComplete : function(request) { $("d").innerHTML = request.responseText; } }); }</script></body>jsp页面嵌入的Java代码<%String user=request.getParameter("user");String pass=request.getParameter("pass");if(user.equals("zpc")&&pass.equals("123456")){out.println("验证通过！");}else{out.println("没有通过验证！");} %>(2)使用Ajax.Responders对象
这个对象用于注册Ajax事件监听器，该对象注册的Ajax事件监听器不管是哪个XMLHttpRequest在发生交互，都能被自动触发。因而Ajax.Responders注册的事件监听器是全局有效的，可以用于监控整个Ajax的交互过程。
//增加了loading图片的fruit.html <body> <h3> 请输入您喜欢的水果 </h3> <div style="width: 280px; font-size: 9pt"> 输入apple、banana、peach可以看到明显效果 </div> <br /> <input id="favorite" name="favorite" tyep="text" onblur="$('tips').hide();" /> <img alt="loading" id="loading" src="/Ajax/images/loading.gif" style="display: none; width: 20px; height: 20px"> <div id="tips" style="width: 160px; border: 1px solid menu; background-color: #ffffcc; display: none;"></div> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function searchFruit() { var url = "/Ajax/fruit.jsp"; //将favorite表单域的值转化为请求参数，形如favorite=app&color=red.... var params = Form.Element.serialize('favorite'); //alert(params); //创建Ajax.Request对象,对应于发送请求 var myAjax = new Ajax.Request(url, { method : 'post', parameters : params, onComplete : showResponse, asynchronous : true }); } //定义回调函数 function showResponse(request) { //alert("回调函数被触发！"); //在tip中显示服务器的响应 $('tips').innerHTML = request.responseText; //显示tip对象 $('tips').show(); } //定义Ajax的全局事件处理器对象 var myGlobalHandlers = { //刚刚开始Ajax交互时触发该属性指定的函数 onCreate:function() { $("loading").show(); }, //交互完成时触发该属性的指定函数 onComplete:function() { if (Ajax.activeRequestCount == 0) { $('loading').hide(); } }, //交互失败时触发该属性指定的函数 onFailure:function() { alert("对不起，页面加载出错！"); } }; //为Ajax事件绑定全局的事件处理器 Ajax.Responders.register(myGlobalHandlers); new Form.Element.Observer("favorite", 1, searchFruit);</script></body>(3)使用Ajax.Updater类
这个类是Ajax.Updater类的简化，使用该类无需使用回调函数，该类可以自动将服务器响应显示在某个容器中。当服务器响应完成时，客户端html页面无需使用回调函数解析服务器响应(当然也可以手动添加回调函数)，从而进一步简化Ajax交互编程。
(4)使用Ajax.PeriodicalUpdater类
它是一个周期性的Ajax.Updater类，周期性地向服务器发送请求(当然也可以手动指定定时器对象)，并将服务器响应在客户端HTML页面的某个元素中显示出来。
相关文章
精彩导读
热门资讯
关注我们
