- 浏览: 494859 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (301)
- Swing技术 (1)
- Linux (1)
- Javascript (22)
- 数据结构和算法 (3)
- J2SE (36)
- workflow (5)
- 设计模式 (14)
- web service (19)
- Ajax (14)
- 中间件 & 服务器 (8)
- 多线程 (9)
- Oracle (52)
- sys & soft (10)
- JMS (3)
- sso (9)
- android (11)
- struts2 (10)
- web协议 (2)
- 分布式 (2)
- PM (2)
- OLAP (3)
- Redis (2)
- Hibernate (7)
- ibatis (2)
- SQLServer (1)
- maven (3)
- Spring (7)
- Jsp (2)
- slf4j (1)
- jQuery (15)
- 权限 (1)
- 系统集成 (1)
- 笔记 (1)
- Freemarker (2)
- 项目管理 (1)
- eclipse (3)
- GIS (1)
- NoSql (3)
- win10 (1)
- win10网络 (2)
- 底层 (3)
- 数据库 (0)
最新评论
-
kabuto_v:
请问那种图,uml图是怎么画出来的呢?是您自己手工画的,还是有 ...
FastJSON 序列化、反序列化实现 -
梦行Monxin商城系统:
电商实例、业务并发、网站并发及解决方法 -
rockethj8:
client 㓟有一个参数是可以忽略一些URL 不进行验证登录 ...
SSO 之 (单点登录)实施中遇到的几个问题 -
mengxiangfeiyan:
好啊。。。。。
Oracle删除表,删除数据以及恢复数据、利用现有表创建新表
http://www.cnblogs.com/beyondGodLike/archive/2009/08/04/1538543.html
一、ajax.updater
方法有3个参数: ajax.updater(container, url, options)
分别表示 1.控件id;2.请求的url;3.具体如下(可选):
属性 类型 Default 描述
method Array 'post' HTTP 请求方式。get or post
parameters String '' 在HTTP请求中传入的url格式的值列表。
asynchronous Boolean true 指定是否做异步 AJAX 请求。
postBody String undefined 在HTTP POST的情况下,传入请求体中的内容。
requestHeaders Array undefined 和请求一起被传入的HTTP头部列表, 这个列表必须含有偶数个项目, 任何奇数项目是自定义的头部的名称, 接下来的偶数项目使这个头部项目的字符串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 在AJAX请求中,当相应的事件/状态形成的时候调用的自定义方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 这个方法将被传入一个参数, 这个参数是携带AJAX操作的 XMLHttpRequest对象。
onSuccess Function(XMLHttpRequest) undefined 当AJAX请求成功完成的时候调用的自定义方法。 这个方法将被传入一个参数, 这个参数是携带AJAX操作的 XMLHttpRequest对象。
onFailure Function(XMLHttpRequest) undefined 当AJAX请求完成但出现错误的时候调用的自定义方法。 这个方法将被传入一个参数, 这个参数是携带AJAX操作的 XMLHttpRequest对象。
insertion Function(Object, String) null 为了把返回的文本注入到一个元素中而执行的方法。 这个方法将被传入两个参数,要被更新的对象并且只应用于 Ajax.Updater 的响应文本 。
evalScripts Boolean undefined, false 决定当响应到达的时候是否执行其中的脚本块,只在 Ajax.Updater 对象中应用。
decay Number undefined, 1 决定当最后一次响应和前一次响应相同时在
Ajax.PeriodicalUpdater 对象中的减漫访问的次数, 例如,如果设为2,后来的刷新和之前的结果一样, 这个对象将等待2个设定的时间间隔进行下一次刷新, 如果又一次一样, 那么将等待4次,等等。 不设定这个只,或者设置为1,将避免访问频率变慢。
function getContents()
{
var request_url = "test1.html"; // 需要获取内容的url
var request_pars = '';//请求参数
var myAjax = new Ajax.Updater('result', request_url,{ // 将request_url返回内容绑定到id为result的容器中
method : 'get', //HTTP请求的方法,get or post
parameters : request_pars, //请求参数
onFailure : reportError, //失败的时候调用 reportError 函数
onLoading : loading, //正在获得内容的时候
onComplete : done //内容获取完毕的时候
});
}
function loading()
{
$('loading').style.display = 'block';
}
function done()
{
$('loading').style.display = 'none';
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
Ajax.Updater为我们提供加载文档时候的三种状态, onComplete,onLoading,onFailure.我们可以自定义一个函数分别相应这三种不同的状态。
下面的例子用到了success (一切OK的时候才被用到) ,和它同等地位的属性还有一个failure (有地方出问题的时候被用到) 这里没用到。出错时在 onFailure 处调用 reportError 方法。
复制代码
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>
二、使用 Ajax.Request 类 详解
使用 Ajax.Request 类 ,其实这个JS类不是系统自带的,而是网上的高人写的通用的JS类库,被广泛的使用,这个JS类为:prototype.js。
如果你不使用任何的帮助程序包,你很可能编写了整个大量的代码来创建 XMLHttpRequest 对象并且异步的跟踪它的进程,然后解析响应并处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。
为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。
假如你有一个应用程序可以通过 http://yoursever/app/get_sales?empID=1234&year=1998 与服务器通信。它返回下面这样的 XML 响应:
<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" id="productDetails">
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>
用 Ajax.Request 对象和服务器通信并且得到这段 XML 是非常简单的。下面的例子演示了它是如何完成的:
<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yourserver/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});
}
function showResponse(originalRequest)
{
// 将返回的 XML 放到 textarea 内
$('result').value = originalRequest.responseText;
}
</script>
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>
你注意到传入 Ajax.Request 构造方法的第二个对象了吗?参数 {method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get' 的属性,另一个属性名为 parameters 包含 HTTP 请求的查询字符串,和一个 onComplete 属性/方法包含函数 showResponse。
还有一些其它的属性可以在这个对象里面定义和设置,如 asynchronous,可以为 true 或 false 来决定 AJAX 对服务器的调用是否是异步的(默认值是 true)。
这个参数定义 AJAX 调用的选项。在我们的例子中,在第一个参数通过 HTTP GET 命令请求那个 url,传入了变量 pars 包含的查询字符串,Ajax.Request 对象在它完成接收响应的时候将调用 showResponse 方法。
也许你知道,XMLHttpRequest 在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段:Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ,Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete。你传入的方法将会被用一个参数调用,这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP 结果代码的 status 属性。
还有另外两个有用的选项用来处理结果。我们可以在 onSuccess 选项处传入一个方法,当 AJAX 无误的执行完后调用,相反的,也可以在 onFailure 选项处传入一个方法,当服务器端出现错误时调用。正如 onXXXXX 选项传入的方法一样,这两个在被调用的时候也传入一个带有 AJAX 请求的 XMLHttpRequest 对象。
我们的例子没有用任何有趣的方式处理这个 XML 响应, 我们只是把这段 XML 放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息,然后更新页面中的某些元素, 或者甚至可能做某些 XSLT 转换而在页面中产生一些 HTML。
在 1.4.0 版本中,一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行,而不管是哪个 AJAX 调用引发它,那么你可以使用新的 Ajax.Responders 对象。
假设你想要在一个 AJAX 调用正在运行时,显示一些提示效果,像一个不断转动的图标之类的,你可以使用两个全局事件句柄来做到,其中一个在第一个调用开始时显示图标,另一个在最后一个调用完成时隐藏图标。看下面的例子。
<script>
var myGlobalHandlers = {
onCreate: function(){
Element.show('systemWorking');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('systemWorking');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
</script>
<div id='systemWorking'><img src='spinner.gif'>Loading...</div>
发表评论
-
对Mvvm模式的理解及框架介绍
2016-01-15 10:21 1630使用WPF+Mvvm ... -
三个好用的ajax函数实现动态载入页面,可做为局部刷新页面用
2012-11-12 13:56 931http://www.webshowme.com/04 ... -
JQuery上传插件Uploadify使用详解
2012-11-07 22:30 1016http://blog.csdn.net/longao ... -
jQuery常用方法
2012-11-07 22:26 875http://blog.csdn.net/longao ... -
jQuery省市县联动插件演示
2012-11-07 22:22 1501http://blog.csdn.net/longa ... -
Ajax跨子域之document.domain+iframe实现
2012-10-22 00:40 1623http://js8.in/443.html Ajax ... -
Ajax缓存解决办法
2012-09-25 20:40 919AJAX缓存的问题:解决办 ... -
服务器端可控情形的Javascript跨域访问解决方法
2012-09-17 00:45 930http://weidagang2046.blo ... -
Div里面载入另一个页面的实现(取代框架)(AJax)
2012-09-13 23:50 3925http://blog.csdn.net/franzh ... -
AJAX传值(精)
2012-09-13 22:57 1183http://www.360doc.com/conte ... -
掌握 Ajax 系列
2012-09-05 23:06 739http://www.ibm.com/develope ... -
Ajax 中跨域问题的结决办法
2012-08-23 12:36 904[转] ajax伴随的goole 的推动,越来越多的站点开始使 ... -
Ajax 中跨域问题的结决办法
2012-08-23 00:45 905ajax伴随的goole 的推动,越来越多的站点开始使用了,在 ...
相关推荐
除此之外,Prototype_1.7.3.js还提供了丰富的AJAX(异步JavaScript和XML)功能。它简化了与服务器的通信,使得动态更新页面内容变得轻而易举。`Ajax.Request`和`Ajax.Updater`是其中两个关键的类,它们分别用于发起...
1. **入门指南**:介绍如何引入Prototype.js到项目中,以及基本的使用方法。 2. **核心概念**:阐述Prototype.js的核心思想,如DOM操作、Ajax和事件处理。 3. **API参考**:详尽列举了所有提供的函数和方法,以及...
3. **Ajax** - prototype.js 改进了原始的XMLHttpRequest对象,提供了`Ajax`模块,包含`Ajax.Request`和`Ajax.Updater`等类,使异步数据交换更加简单和灵活。 4. **事件处理** - 库中的`Event.observe()`和`Event....
以上就是关于`prototype.js`文件的基本介绍和使用方法。通过这个库,你可以更高效地进行JavaScript编程,实现丰富的Web交互功能。记得结合`prototype.js`开发手册,深入学习并熟练掌握其各种用法,提升你的...
Prototype.js 提供了强大的Ajax功能,包括`Ajax.Request`和`Ajax.Updater`等,它们简化了异步请求和页面局部更新的代码。通过这些工具,开发者可以轻松构建富交互性的Web应用。 6. **动画效果** 库中还包含了一些...
通过阅读Prototype.js 1.6的中文和英文手册,开发者可以深入了解其用法和背后的原理,提高JavaScript编程效率,创建更具交互性和动态性的网页应用。"prototypeAPI"这个文件可能包含了Prototype.js的API参考文档,是...
2. **Ajax功能**:Prototype.js 强化了AJAX操作,通过`Ajax.Request` 和 `Ajax.Updater` 类,开发者可以轻松实现异步数据交换,无需关心浏览器兼容性问题。 3. **对象扩展**:Prototype.js 基于JavaScript原型链...
Prototype.js 是一个广泛使用的 JavaScript 库,它为浏览器环境提供了许多实用的功能,尤其是在对象操作和事件处理方面。1.6 版本是该库的一个重要里程碑,引入了许多改进和优化,使得开发人员能够更加高效地编写 ...
"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的基本功能,尤其在处理DOM(文档对象模型)操作、事件处理以及Ajax交互时提供了极大的便利。 ### 1. Prototype.js核心概念 - **原型链**:...
3. **Ajax支持**:Prototype.js提供了强大的Ajax功能,包括`Ajax.Request`和`Ajax.Updater`等,它们允许开发者轻松实现页面的异步更新,无需刷新整个页面,从而提高用户体验。 4. **事件处理**:库中包含了事件绑定...
下面是Prototype.js的开发笔记,涵盖了该库的使用指南、Ajax对象、JavaScript类的扩展、对象的扩展、事件处理等多个方面。 一、Programming Guide Prototype.js是一个强大的JavaScript库,提供了许多有用的函数和...
Prototype.js是一个广泛使用的JavaScript库,它为JavaScript语言增加了许多实用功能,尤其在处理DOM操作、Ajax交互以及类(class)系统等方面提供了强大的支持。这个库的名字“Prototype”来源于JavaScript中的一个...
1. **对象扩展**:Prototype.js对JavaScript的内置对象进行了扩展,如Array、String、Function等,提供了许多便利的方法。例如,Array的`each()`方法用于遍历数组,String的`camelize()`方法用于将字符串转换为驼峰...
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 对象的...
**标题:“prototype.js...综上所述,"Prototype.js开发者手册"是学习JavaScript和AJAX开发的宝贵资料,它涵盖了库的核心功能和用法,可以帮助开发者更好地理解和利用Prototype.js来构建高效、互动性强的Web应用。
在JavaScript的世界里,Prototype.js是一个非常流行的库,它为AJAX(异步JavaScript和XML)开发提供了强大的工具和功能。这个全面的手册是理解并掌握Prototype.js的关键,对于前端开发者来说尤其有价值。 **一、...
Prototype.js 提供了强大的Ajax支持,包括`Ajax.Request`和`Ajax.Updater`等,能够轻松实现异步数据交换,实现页面无刷新更新。 4. **事件处理**:通过`Event`模块,Prototype.js 改进了JavaScript的事件处理机制,...
Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了丰富的功能和便利,旨在简化和优化在浏览器环境中进行的脚本编写。1.6.0.3 版本是该库的一个稳定版本,它包含了对先前版本的改进和修复,以...