`

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

AjaxprototypeAppleServletJavaScript 
阅读更多

这个对象用于注册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, {
					//请求方式：POST
					method : '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对象数目为0
					if (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");
		//获取请求参数favorite
		String hdchar = request.getParameter("favorite");
		System.out.println(hdchar);
		PrintWriter out = response.getWriter();
		//如果请求参数是apple的前几个字符，则输出apple
		if ("apple".startsWith(hdchar))
		{
			out.println("apple");
		}
		//如果请求参数是banana的前几个字符，则输出banana
		else if("banana".startsWith(hdchar))
		{
			out.println("banana");
		}
		//如果请求参数是peach的前几个字符，则输出peach
		else if("peach".startsWith(hdchar))
		{
			out.println("peach");
		}
		//否则将输出other fruit
		else
		{
			out.println("other fruit");
		}
	}

}
 

分享到：
| Prototype的Ajax支持使用Form.request方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    prototype的ajax应用

    综上所述，Prototype库的AJAX应用提供了一套全面且易于使用的工具集，简化了Web开发中涉及的异步数据交互，提高了Web应用程序的响应性和交互性。通过`Ajax.Request`和`Ajax.Updater`等工具，开发者可以快速构建出...

    Developer Notes for prototype.doc

    Prototype 还定义了一些新的对象和类，包括但不限于 PeriodicalExecuter、Prototype、Enumerable、Hash、ObjectRange、Class、Ajax、Ajax.Responders、Ajax.Base、Ajax.Request、options argument object、Ajax....

    prototype.js开发者手册(中文)

    - **Ajax.Responders 对象**：管理 AJAX 请求的响应者。 - **Ajax.Base 类**：为所有 AJAX 类提供通用功能。 - **Ajax.Request 类**：用于发起 AJAX 请求。 - **Ajax.Updater 类**：用于更新页面上某个区域的内容。 ...

    prototype

    - **Ajax.Responders**：管理Ajax请求的响应器。 - **Ajax.Updater**：更新页面部分。 ##### 3. Array - **clear**：清空数组。 - **clone**：克隆数组。 - **compact**：去除数组中的`null`或`undefined`元素。 -...

    prototype 中文教程PDF

    这一章节重点介绍了 prototype.js 中的 Ajax 相关类和对象，使开发者能够轻松实现异步数据请求。 ##### 3.1 使用 Ajax.Request 类 - **功能描述**：`Ajax.Request` 类用于发起 AJAX 请求。它支持多种请求类型（GET...

    prototype_1_6教程

    - **示例**：`Ajax.Responders.register(function(request) { console.log('Request completed.'); });` ##### 5. Ajax.Response - **用途**：表示Ajax请求的响应对象。 - **示例**：`response.responseText;` ###...

    Ajax4Download

    - **Ajax.Responders**：处理 Ajax 请求的响应。 - **Ajax.Updater**：根据 Ajax 响应更新页面的一部分。 **3. Array** - **Why you should stop using for…into to iterate (or never take it up)**：解释为何不...

    prototype1.5.1 英文版

    - **Ajax.Responders**：定义请求成功或失败时的响应器。 - **Ajax.Updater**：更新页面的部分内容而无需刷新整个页面。 ##### 3. Array - **clear**：清空数组。 - **clone**：复制数组。 - **compact**：去除...

    prototype1.4中文手册

    Prototype 提供了强大的 Ajax 支持，主要包括两个核心类： ##### 3.1 使用 Ajax.Request 类 `Ajax.Request` 是一个高级 API，用于发送异步 HTTP 请求。它允许自定义请求方法、请求 URL、请求参数、请求类型等，并...

    Prototype API Documentation

    Ajax.Responders.register({ onCreate: function(request) { /* ... */ }, onComplete: function(request) { /* ... */ } }); ``` **3.5 Ajax.Response** - **简介**：封装了Ajax响应的相关信息。 - **示例**...

    prototype-151-api

    ### Prototype 1.5.1 API 全面参考 #### 概述 Prototype 是一个 JavaScript 框架，旨在简化动态 ...以上是对 Prototype 1.5.1 API 参考手册中的主要知识点进行了详细的介绍，可以帮助开发者更好地理解和使用这个框架。

Magicbox
Global site tag (gtag.js) - Google Analytics