Prototype为Ajax增加的类
1、使用Ajax.Request类
Ajax.Request类包含构造器Ajax.Request(URL,options) ,用于创建一个Ajax.Request对象,对应于发送一次请求。
url:异步请求发送的地址
options:是一个若名对象,该对象封装了发送请求的选项,该对象通常需要如下4个属性
method:发送请求的方法,只能是post或get,不能大写
parameters:发送请求的请求参数,应采用name=value的形式
onLoading:当readystate状态为1时, 将触发该属性指定的方法
onLoaded:当readystate状态为2时,将触发该属性指定的方法
onInteractive:当readystate状态为3时,将触发该属性指定的方法
onComplete:当readystate状态为4时,将触发该属性指定的方法
onSuccess:当服务器响应成功时,自动触发该属性指定的方法
onFailure:当服务器响应失败时,自动触发该属性指定的方法
asynchronous:是否异步发送请求,该参数默认是true
如下程序
<HTML>
<head>
<title>输入提示</title>
<script src="JavaScript/prototype/prototype-1.6.0.2.js"
type="text/javascript">
</script>
</head>
<body>
<h3>
请输入您喜欢的水果
</h3>
<div style="width:280px;font-size:9pt">
输入apple、banana、peach可看到明显效果
</div>
<p />
<input id="favorite" name="favorite" type="text" length="20"
onBlur="Element.hide('tips')" />
<div id="tips"
style="width:160px; border:1px solid menu; background-Color:#ffffcc;display:none" />
</body>
</html>
<
<script type="text/javascript">
<!--
function searceFruit()
{
alert("a");
var url="tips.jsp";
var params = Form.Element.serialize('favorite');
var myAjax = new Ajax.Request(
url,
{
method:'post',
parameters:params,
onComplete: showResponse,
asynchronous:true
}
);
}
function showResponse(orgiginalRequest)
{
$('tips').innerHTML = orgiginalRequest.responseText;
Element.show('tips');
}
new Form.Element.Observer("favorite", 1, searceFruit);
//-->
</script>
Ajax.Request还有如下属性:
Events:返回Ajax操作中所有XMLHttpRequest对象readystate的5个状态,这些状态包括Uninitialized, Loaded, Interactive和Complete
transport:本次Ajax交互所使用的XMLHttpRequest对象
url:异步请求发送的URL
2、使用Ajax.Responders对象
register(handler) :注册一个全局Ajax事件处理器。该事件处理器应包含名如Ajax事件的系列该方法(如onCreate,onComplete,onException)的属性,这一系列属性对应的值是事件发生时触发的动作
unregister(handler):删除一个已经注册的Ajax事件处理器
dispatch(callback, request, transport, json):遍历被注册的处理器列表,找出参数callback指定的处理器,然后向这个处理器传递其他3个参数,如果Ajax响应中包含一个含有JSON内容的X-JSON HTTP头,处理将被触发,json作为参数被传入该处理器。如果事件是onException,则异常对象代替transport, json参数也不会传递
3、使用Ajax对象
activeRequestCount:正在处理过程中的Ajax请求的个数
getTransport():该方法返回一个新的XMLHttpRequest对象
4、使用Ajax.Updater类
这个类是对Ajax.Requets类的简化,使用该类无须使用回调函数,该类可将服务器响应自动显示在某个容器中
Ajax.Updater(containers, url, options):创建一个Ajax.Updater对象,完成一次Ajax交互。
containers参数正是前面介绍的containers属性
url是发送请求的服务器URL
options该参数包含了如下属性
method:该属性指定发送请求的方法,通常只能是post和get不能大写
parameters:发送请求的请求参数
onLoading:当XMLHttpRequest对象的readystate状态为1时,触发该属性指定的函数
onLoaded:当XMLHttpRequest对象的readystate状态为2时,触发该属性指定的函数
onInteractive:当XMLHttpRequest对象的readystate状态为3时,触发该属性指定的函数
onComplete:当XMLHttpRequest对象的readystate状态为4时,触发该属性指定的函数
onSuccess:当服务器响应成功时,触发该属性指寂静的函数
onFailure:当服务器响应失败时,触发属性指定的函数
evalScripts:该属性值只能为true和false,用于指定是否执行服务器响应中的JavaScript脚本
5、使用Ajax.PeriodicalUpdater类
Ajax.PeriodicalUpdater是一个周期性的AjaxUpdater类,用于周期性地向服务器发送请求,并将服务器响应在客户端HTML页面的某个元素中显示出来
该类包含以下属性:
container:该属性与Ajax.Updater属性完全相同,该属性的值直接传入Ajax.Updater的containers属性
url:请求服务器URL
frequency:两次发送Ajax请求的时间间隔(单位为秒),如果两次服务器的请求完全相同,则两次请求的发送间隔可能是frequency*decay.该属性的值默认是2
decay:如果服务器的两次响应完全相同,则减慢发送请求的频率。如果服务器响应有n次完全相同,则发送请求的时间隔为frequency*(decay的n-1次方) .该属性的值默认为1
updater:最后一次使用的Ajax.Updater对象
timer:周期性发送Ajax请求的定时器。
该类有一个构造函数
Ajax.PeriodicalUpdater(containers, url, options):创建一个Ajax.Updater对象完成一次交互
otptions参数有小小的区别,增加了如下属性
frequency:该属性批定多长时间(单位为秒)发送一次请求
decay:如果服务器的两次请求完全相同,则减慢发送请求的频率。如果服务器响应有n次完全相同,则发送请求的时间间隔为frequency*(decay的n-1次方)
分享到:
相关推荐
此外,过多的Ajax请求可能会增加服务器负载,合理设计和优化请求频率对性能至关重要。 以上是关于Ajax、jQuery和Prototype的一些基本知识点。通过这些技术,开发者可以构建出更加动态和高效的Web应用。
Prototype提供了一系列Ajax类和对象,如Ajax.Request和Ajax.Updater,它们简化了异步请求的处理。Ajax.Request用于发起HTTP请求,而Ajax.Updater则负责更新页面的部分内容。 2. prototype.js参考 Prototype扩展了...
Prototype是一个JavaScript库,它为JavaScript语言增加了许多便利的功能,而AJAX(Asynchronous JavaScript and XML)则是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。接下来,我们将深入...
在本示例中,我们使用的是一种JavaScript库——Prototype,它为JavaScript提供了许多实用的工具和功能,包括对Ajax的优雅封装。Prototype简化了Ajax操作,使得开发者可以更方便地与服务器进行异步数据交互。 ...
Prototype是JavaScript库,它为浏览器环境提供了强大的对象扩展和功能,尤其在处理DOM(文档对象模型)和Ajax交互时。这个压缩包包含了Prototype库的多个版本的手册和源代码文件,便于开发者理解和使用。 首先,...
Prototype库由Sam Stephenson开发,它为JavaScript增加了一系列面向对象的特性,如类、继承和函数重载。这使得JavaScript代码更易于维护和扩展。Prototype 1.6.0.2是该框架的一个稳定版本,包含了一些改进和修复,...
Prototype的AJAX功能是其核心部分,它封装了XMLHttpRequest对象,提供了`Ajax.Request`和`Ajax.Updater`等类。`Ajax.Request`用于发起HTTP请求,可以设置参数如URL、HTTP方法、数据发送方式等,还支持事件处理。`...
它提供了丰富的动画效果和用户界面组件,如滑块、拖放功能、模态对话框等,为Web应用程序增加了丰富的交互性。Scriptaculous的使用通常需要配合Prototype库,利用Prototype提供的基础功能来构建复杂的用户交互。 ...
Prototype 是一个广泛使用的JavaScript库,它为Web开发提供了一系列强大的工具和功能,特别是在处理DOM(文档对象模型)操作、事件处理、Ajax交互等方面。这个库的设计目标是简化JavaScript编程,提高代码的可读性...
### 《Prototype and Scriptaculous Quickly》:深入解析Ajax开发框架 #### 一、引言:Prototype与Scriptaculous在Ajax开发中的角色 随着Ajax技术的快速发展,一系列第三方库应运而生,这些库简化了开发者的工作...
Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript语言增加了许多实用的功能,使开发Web应用程序变得更加简单。这个压缩包包含了Prototype的1.6.0版本,包括中文版和英文版的文档,以及源代码文件。 首先...
Prototype是一个广泛使用的JavaScript框架,它为JavaScript提供了一些类的特性,使得代码更加简洁和易于维护。 Prototype的核心思想是通过扩展JavaScript的内置对象和添加新的方法来增强其功能。在处理表格这类HTML...
4. **函数扩展**:Prototype.js为JavaScript的函数增加了许多实用的功能,如currying(柯里化)、partial application(部分应用)和throttling(节流)等,提高了代码的可读性和可维护性。 5. **数组和对象操作**...
Prototype.js 的 AJAX 支持在 1.6 版本中得到增强,`Ajax.Request` 和 `Ajax.Updater` 类提供了一种优雅的方式来处理异步数据交换。新版本增加了错误处理机制,同时支持 JSONP 和 CORS,适应了跨域请求的需求。 ###...
标题"prototype_PrototypeJS1.6_"中提到的"Prototype"是一个JavaScript库,它为JavaScript编程提供了一套丰富的工具集,主要用于简化DOM操作、创建Ajax应用以及实现对象的继承机制。"1.6版本"表明这是该库的一个特定...
Prototype.js的核心理念在于通过增加类和模块化功能,使JavaScript更加接近传统的面向对象语言,如Java或C#。 Prototype_1.7.3.js作为该库的一个重要版本,包含了众多优化和改进。首先,它增强了对HTML5元素和API的...
1. **对象扩展**:Prototype的核心特性之一就是对JavaScript原生对象的扩展,如Array、String、Function等,增加了许多实用的方法,如Array的each、indexOf等,方便数组和字符串的操作。 2. **Class与Prototype链**...
Prototype是JavaScript库的一个轻量级框架,它为JavaScript语言增加了许多实用功能,提升了开发者的生产力,并简化了DOM操作。 Prototype 1.4版本在当时是非常流行的一个版本,它提供了许多关键特性,如对象扩展、...
Prototype 类库是一个强大的JavaScript工具库,它为JavaScript语言增加了许多实用功能,特别是在对象操作、类式继承和函数增强等方面。这个库由 Sam Stephenson 创建,最初是为了支持Ruby on Rails框架,但后来发展...