- 浏览: 286290 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
cheetah_ysc:
不错不错,我喜欢!
Java固定时间间隔执行 -
voyage_mh:
阿选百度竟然一下可以吧你百度出来
使用DWR注解Annotation
这个类是对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"
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';
//取得请求参数字符串
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");
}
}
}
发表评论
-
Prototype的Ajax支持使用Ajax.PeriodicalUpdater类
2010-11-21 00:01 1339简单的说:它就是一个周期性的Ajax.Updater。 ... -
Prototype的Ajax支持使用Ajax.Responders对象
2010-11-20 23:55 1123这个对象用于注册Ajax时 ... -
Prototype的Ajax支持使用Form.request方法
2010-11-20 23:50 1614Form.request()方法实际上是Ajax.Reques ... -
Prototype的Ajax支持使用Ajax.Request类
2010-11-20 23:45 1240我们只要简单的创建一个Ajax.Request对象,就可以完成 ... -
Prototype扩展Array,document,String,Function,Number
2010-11-20 22:54 1436Array的扩展 <!DOCTYPE html PUB ... -
Prototype中两个常用的监听器
2010-11-20 22:49 1013Form.Observer(form,interval, ... -
Prototype中使用Class
2010-11-20 22:43 1169Class是Prototype库中为弥补JavaScript不 ... -
Prototype中使用Event和Template
2010-11-20 22:40 899Prototype中使用Event的一个简单的例子: < ... -
Prototype使用Form操作表单和使用Hash对象
2010-11-20 22:36 1272先看使用Form操作表单: <!DOCTYPE htm ... -
Prototype中使用ObjectRange和Form.Element操作表单
2010-11-20 22:33 1302先看ObjectRange的应用: <!DOCTYPE ... -
Prototype中使用Enumerable
2010-11-20 22:30 871下面是each()方法的遍历示范 <!DOCTYPE ... -
Prototype中使用Element对象
2010-11-20 22:28 1321增加CSS样式 <!DOCTYPE html PUBL ... -
Prototype支持JSON
2010-11-20 22:22 2366JSON格式的数据具有轻量级,易懂,跨语言的优势,Protot ... -
Prototype的简单介绍
2010-11-20 22:19 1361Prototype只是一个JavaScript库, 可到ht ...
相关推荐
Ajax.updater是Prototype JavaScript库中的一个关键功能,用于实现页面的部分更新,无需刷新整个页面即可获取新数据。这种技术在Web开发中被称为异步JavaScript和XML(Ajax),尽管现在更常见的是与JSON或其他数据...
1.4.2. 使用 Ajax.Updater 类 2. prototype.js参考 2.1. JavaScript 类的扩展 2.2. 对 Object 类的扩展 2.3. 对 Number 类的扩展 2.4. 对 Function 类的扩展 2.5. 对 String 类的扩展 2.6. 对 document DOM 对象的...
1.4.2.使用Ajax.Updater类 Ajax.Updater类用于更新页面中的某个元素。 二、Prototype.js参考 Prototype.js提供了许多有用的函数和方法,以帮助开发者快速构建Web应用程序。下面是Prototype.js的参考手册: 2.1. ...
作为一个Ajax开发框架,Prototype对 Ajax开发提供了有力的支持。在Prototype中,与Ajax相关的类和对象包括:Ajax、Ajax.Responsders、 Ajax.Base、Ajax.Request、Ajax. PeriodicalUpdater和Ajax.Updater,图2-3所示...
7. **Prototype的Ajax**:Prototype库提供了一个强大的Ajax模块,包括`Ajax.Request`用于发起请求,`Ajax.Updater`用于更新页面内容。它还提供了一些便利的选项和事件处理,使开发更加灵活。 8. **应用场景**:Ajax...
Prototype通过`Ajax`类封装了这一技术,包括`Ajax.Request`、`Ajax.Updater`和`Ajax.PeriodicalUpdater`等方法,使得创建异步请求变得简单直观。 总结来说,这个压缩包是学习和使用Prototype JavaScript库的宝贵...
不过,随着现代浏览器对原生API的支持越来越完善,现在更多的开发者倾向于使用fetch API或XMLHttpRequest的原生方法来处理AJAX请求,因为它们更轻量级且无需引入额外的库。 总之,Prototype框架通过提供方便的AJAX...
这款库的核心理念是通过类原型(Class Prototyping)实现面向对象编程,从而在JavaScript这种原生不支持类的动态语言中引入类的概念。 一、Prototype.js基础 1. **对象扩展**:Prototype.js对JavaScript的内置对象...
通过上述介绍可以看出,Prototype框架通过内置的`Ajax.Updater`和`Ajax.PeriodicalUpdater`提供了非常方便的Ajax支持功能,大大降低了开发者的编码难度,使得异步数据交互变得更加简单高效。无论是简单的数据更新...
在"使用prototype简化Ajax操作"这个主题中,我们将深入探讨Prototype库如何使Ajax变得更加简单易用。 首先,Prototype为Ajax操作提供了一个统一的接口——`Ajax`对象。这个对象下包含了一系列方法,如`Request`、`...
`Ajax.Request`和`Ajax.Updater`是其中两个关键的类,它们分别用于发起完整的HTTP请求和替换页面的部分内容。 Prototype.js的另一个显著特点是对JavaScript对象的增强。1.7.3版本继续沿用了基于类的模拟实现,通过`...
Prototype的Ajax模块提供了一系列实用的类和方法,如`new Ajax.Request(url, options)`用于发起HTTP请求,`new Ajax.Updater(container, url, options)`用于更新指定容器的内容。这些方法支持异步通信,使页面能够在...
2. **Ajax与Prototype**:讲解如何利用Prototype的Ajax类,如Ajax.Request和Ajax.Updater,来实现后台数据的异步获取和页面部分的更新。 3. **Scriptaculous特效**:详述如何使用Effect库创建动画效果,包括淡入...
`Ajax.Request`和`Ajax.Updater`类使得创建异步请求非常直观,可以处理GET和POST请求,同时支持JSON、XML和其他数据格式。 3. **事件处理**:Prototype.js通过`Event.observe`和`Event.stopObserving`方法,简化了...
在Prototype中,我们通常使用`new Ajax.Request()`或`new Ajax.Updater()`来发起Ajax请求。这些请求会携带HTTP方法(GET或POST)、URL以及回调函数,以便在服务器响应后执行特定的操作。 `Ajax.Request`的典型用法...
这个"Prototype Ajax学习范例"提供了一系列实例,旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax,即异步JavaScript和XML(Asynchronous JavaScript and XML),是一种在无需刷新整个网页的情况下...
- `Ajax.Updater` 类:当服务器返回的是 HTML 内容,可以直接更新页面的某个部分,简化了页面动态更新的逻辑。 4. **DOM 操作**: - Prototype 提供了一系列的 DOM 操作方法,使得操作 DOM 结构更加便捷,如 `...
综上所述,Prototype库的AJAX应用提供了一套全面且易于使用的工具集,简化了Web开发中涉及的异步数据交互,提高了Web应用程序的响应性和交互性。通过`Ajax.Request`和`Ajax.Updater`等工具,开发者可以快速构建出...
`prototype`是JavaScript的一个库,它为JavaScript语言添加了许多实用的功能,其中包括对Ajax操作的强大支持。本实例将探讨如何使用Prototype库中的Ajax功能进行编程。 首先,我们需要理解Prototype库是如何引入到...
3. **Ajax**:Prototype的`Ajax`模块简化了与服务器端的异步通信,提供了`Ajax.Request`和`Ajax.Updater`等方法,用于发送HTTP请求并处理响应。 4. **事件处理**:Prototype改进了JavaScript的事件处理机制,允许更...