Prototype的Ajax支持使用Ajax.Updater类

最新推荐文章于 2018-08-08 17:30:13 发布

平民-王子

最新推荐文章于 2018-08-08 17:30:13 发布

阅读量119

点赞数

分类专栏： Prototype 文章标签： Ajax prototype Apple Servlet JavaScript ViewUI

本文链接：https://blog.csdn.net/libinxuan520/article/details/83767855

版权

Prototype 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这个类是对Ajax.Request类的简化，使用该类不需要使用回调方法，该类自动讲服务器响应显示到某个容器。

下面就是一个简单的例子：

<%@ 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=GBK" />
	</head>
	<body>
		<h3>
			请输入您喜欢的水果
		</h3>
		<div style="width: 280px; font-size: 9pt">
			输入apple、banana、peach可看到明显效果:
		</div>
		<br />
		<input id="favorite" name="favorite" type="text"
			οnblur="$('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';
				//取得请求参数字符串
				var params = $('favorite').serialize();
				//创建Ajax.Updater对象，对应于发送一次请求
				var myAjax = new Ajax.Updater(
				//指定tips作为服务器响应的容器
						'tips', url, {
							//发送请求的方法
							method : 'post',
							//请求参数
							parameters : params,
							//指定Ajax交互结束后的回调函数，匿名函数——显示id为tips的元素
							onComplete : function() {
								$('tips').show();
							}
						});
			}
			//为表单域绑定事件监听器
			new Form.Element.Observer("favorite", 0.5, searchFruit);
			//定义Ajax事件的全局处理器
			var myGlobalHandlers = {
				//当开始Ajax交互时，激发该函数
				onCreate : function() {
					$('Loadingimg').show();
				},
				//当Ajax交互失败后，激发该函数。
				onFailure : function() {
					alert('对不起!\n页面加载出错!');
				},
				//当Ajax交互结束后，激发该函数。
				onComplete : function() {
					//如果所有Ajax交互都已完成，隐藏Loadingimg对象
					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");
		}
	}

}

平民-王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Prototype的Ajax支持使用Ajax.Updater类

这个类是对Ajax.Request类的简化，使用该类不需要使用回调方法，该类自动讲服务器响应显示到某个容器。下面就是一个简单的例子：&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;% String path = request.getContextPath();...
复制链接

扫一扫

专栏目录