首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

Prototype的Ajax支持运用Ajax.Responders对象

2012-10-26 
Prototype的Ajax支持使用Ajax.Responders对象这个对象用于注册Ajax时间监听器,该对象注册的Ajax时间监听器

Prototype的Ajax支持使用Ajax.Responders对象
这个对象用于注册Ajax时间监听器,该对象注册的Ajax时间监听器不管是那个XMLHttpRequest在发生交互,都能被自动触发。而且,Ajax.Responders注册的时间监听器是全局有效的,主要方法是register(函数名)。

?

?

一个简单的例子:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>输入提示示范</title><meta name="author" content="Yeeku.H.Lee" /><meta name="website" content="http://www.crazyit.org" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><h3>请输入您喜欢的水果</h3><div style="width: 280px; font-size: 9pt">输入apple、banana、peach可看到明显效果:</div><br /><input id="favorite" name="favorite" type="text"onblur="$('tips').hide()" /><img id="Loadingimg" src="img/indicator.gif" style="display: none" /><div id="tips"style="width: 160px; border: 1px solid menu; background-color: #ffffcc; display: none"></div><script src="js/prototype-1.6.0.3.js" type="text/javascript"></script><script type="text/javascript"><!--//监控目标文本框输入文字发生改变的函数function searchFruit() {//请求的地址var url = 'TipServlet';//将favorite表单域的值转换为请求参数var params = Form.Element.serialize('favorite');//创建Ajax.Request对象,对应于发送请求var myAjax = new Ajax.Request(url, {//请求方式:POSTmethod : 'post',//请求参数parameters : params,//指定回调函数onComplete : showResponse,//是否异步发送请求asynchronous : true});}//定义回调函数function showResponse(request) {//在提示tip元素中输出服务器的响应$('tips').innerHTML = request.responseText;//显示提示tip对象$('tips').show();}//为favorite表单域绑定事件处理函数new Form.Element.Observer("favorite", 0.5, searchFruit);//定义Ajax的全局事件处理器var myGlobalHandlers = {//刚刚开始Ajax交互时触发该属性指定的函数。onCreate : function() {$('Loadingimg').show();},//交互失败时触发该属性指定的函数。onFailure : function() {alert('对不起!\n页面加载出错!');},//交互成功时触发该属性指定的函数。onComplete : function() {//如果正在进行Ajax交互的XMLHttpRequest对象数目为0if (Ajax.activeRequestCount == 0) {$('Loadingimg').hide();}}};//为Ajax事件绑定全局的事件处理器Ajax.Responders.register(myGlobalHandlers);</script></body></html>
?Servlet代码:
import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class TipServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//获取请求参数favoriteString hdchar = request.getParameter("favorite");System.out.println(hdchar);PrintWriter out = response.getWriter();//如果请求参数是apple的前几个字符,则输出appleif ("apple".startsWith(hdchar)){out.println("apple");}//如果请求参数是banana的前几个字符,则输出bananaelse if("banana".startsWith(hdchar)){out.println("banana");}//如果请求参数是peach的前几个字符,则输出peachelse if("peach".startsWith(hdchar)){out.println("peach");}//否则将输出other fruitelse{out.println("other fruit");}}}
?

热点排行