- 浏览: 103629 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
u013246812:
谢谢博主帮我解决了问题,就是那个process.exitVal ...
Java执行Shell脚本超时控制 -
fireinjava:
fireinjava 写道配置好多哦 =.=
刚看了下,原来是 ...
Java Spring2.5 Remote Invoke HTTP Invoker -
fireinjava:
配置好多哦 =.=
Java Spring2.5 Remote Invoke HTTP Invoker -
lee79:
呵呵,讲的很对
Java执行Shell脚本超时控制 -
fangwei:
非常感谢!!!btw 你虽然用到了slf4j,却没有用到它的强 ...
Java执行Shell脚本超时控制
什么是Prototype
Prototype 是由 Sam Stephenson 开发的一个 Javascript
类库,也是其他框架的鼻祖。其对现有的部分 Javascript 对象比如 Object 、 Function 、 Dom 、 String
等进行扩展,并且对 Ajax 应用进行封装,借此提供了兼容标准的更加易于使用的类库,极大的方便开发人员快速创建具备高度交互性的 Web2.0
胖客户端应用程序。
(相关站点:http://www.prototypejs.org/
)
Prototype 最初的目标是应用于 Ruby 领域的,不过由于优秀的表现和完美的封装以及服务器语言无关性,现在已经被应用到各个领域,包括
Java 、 .NET 、 PHP 等。不过在 Prototype 的源码中,还是可以找到 Ruby 的影子,比如 Ruby 样式的 Array
对象枚举。
正如之前提到的, Prototype 是一个底层的远程调用包,虽然其仅仅是一个千余行的 Javascript
文件,但是它为其他框架提供了最底层的 Javascript 扩展和 Ajax 封装。其他 Javascript
程序库在其基础上构建了更加高级的功能和 UI 效果,比如 Script.aculo.us 。
Prototype 目前的最新版本是1.5 ,其官方网站提供了最新版本的下载,包括 zip 包、 js 文件和 Subvision
源码。不过和其他版本一样, Prototype
官方网站并未提供完整的参考文档,开发者只能通过阅读源码掌握其功能。可喜的是,网上已经流传着不少关于 Prototype
源码解读和使用的文档,这在一定程度上弥补了 Prototype 官方文档不足的遗憾。
2.2 软件组织架构以及应用
Prototype 主要包括三个内容:
一是提供了一些全局性的函数,替代原先烦琐重复的代码;二是对现有 Javascript 、 DOM 对象的扩展,提供访问公共函数的捷径;三是对 Ajax 应用的封装,使得开发 Ajax 应用更加容易和快速。
全局性的函数,比较有代表性的 $ 系列函数和 Try.these() 函数。
$() 函数是用于替代在 DOM 中频繁使用的 document.getElementById() 方法的,其返回参数传入的 id 所指向的元素。不过,其允许传入多个 id 作为参数,然后返回一个其 id 指向的元素的 Array 对象。
$F() 函数则用于返回任何表单输入控件的值,比如文本框、文本区域、下拉列表,其也是以元素的 id 或者元素本身作为参数。不过,必须注意的是,
id 所指向的元素必须支持 value 属性,比如文本框。如果 id 指向一个按钮,那自然就得不到所要的 value 值。
$A() 函数能够将其接受到的任何可枚举列表转化成为一个 Array 对象,比如将 string 字符串转化成 Array 数组。 $H()
函数则将传入的对象转换成一个可枚举的和联合数组类似的 Hash 对象。 $R() 函数是 new ObjectRange(lowBound,
upperBound, excludeBounds) 的缩写和替代。
Try.thiese()
方法以一系列的函数作为参数,按照顺序一个一个的执行,返回第一个成功执行的函数的返回值。这使得想调用不同的方法直到其中一个成功执行的需求变得容易和
直观。否则我们就得变通的用 if else 去判断了。典型的比如在保证浏览器兼容的情况下实例化 XHR 对象。
Prototype 对 Javascript 的 Object 、 Number 、 Function 、 String 、 Array 、
Event 等对象进行了扩展,创建了一些新的对象和类,并在此基础上提供了很多有用的公共函数,比如 each() 、 any() 、
collect() 等。
Prototype 另外一个值得称道的是对 Ajax 的封装和简化,这也是 Prototype 吸引我们的另外一个重要之处。 Prototype 的 Ajax 功能主要由 Ajax.Request 和 Ajax.Updater 两个类完成。
在没有使用 Prototype 之前,我们需要创建 XHR 对象实例并且异步的跟踪其进程,在回调函数中使用 DOM
解析其返回的响应数据并且处理后更新页面。而 Ajax.Request 类提供了完成这一系列步骤的捷径。我们只需要将目标 URL 、 URL
参数、 http 请求方法类型、回调函数名称等一股脑的传递给 Ajax.Request 类即可。
Ajax.Request 类是针对需要解析服务器返回的响应数据的情况。而如果服务器返回的信息已经是 HTML 格式,只需要填充到某个 HTML
控件中,则可以使用 Ajax.Updater 类。其调用 innerHTML 直接将 HTML 代码填充到指定的 HTML 控件内部。
难得可贵的是,以往我们需要判断 XHR 的 readyState 和 status 值来获取 http
请求的状态并且作出相应的处理,以便应付请求失败的情况;而 AjaxRequest 和 Ajax.Updater 类提供了 onComplete
来替代这些烦琐的判断,其只需要简单的在请求的选项参数中的名为 onXXXX 属性 / 方法中提供自定义的方法对象即可。
接下来,我们使用 Prototype1.4 ,列举一二,体验一下 Prototype 的主要功能及其所带来的便捷。
2.3 循序渐近
从 Prototype 官方网站 http://prototype.conio.net/ 下载最新的开发包 prototype-1.4.0.js ,放到应用程序目录中,通过 <script> 代码引入 Prototype 程序库:
- < script language = "javascript" type = "text/javascript" src = "prototype-1.4.0.js" > </ script >
2.3.1 $ 系列函数体验
在 Prototype 出现之前,我们使用这种方式定位页面上的某个 HTML 元素及其值:
- var myElement = document.getElementById(“your element 's id”);
- var myValue = document.getElementById(“your element' s id”).value;
现在,可以分别使用 $() 函数和 $F() 函数来代替,例程 1 展示 $() 和 $F() 函数的用法:
- var myElement = $(“your element 's id”);
- var myValue = $F(“your element' s id”);
例程 1 : $() 和 $F() 函数的用法
- < p > Username: < input type = "text" name = "txtUsername" value = "Jimmy" > </ p >
- < p >
- < input type = "button" name = "$Test" value = " $ " onClick = "window.alert($('txtUsername'))" >
- < input type = "button" name = "$FTest" value = " $F " onClick = "window.alert($F('txtUsername'))" >
- </ p >
$A() 函数则将其接收到的可枚举的任何参数转化成为一个 Array 对象。结合 Prototype 对 Array 的扩展, $A()
能够提供更加强大的功能。例程 2 使用 $A() 函数获取页面中的全部 input 类型的控件,并使用扩展后的 each()
函数遍历全部的控件。
例程 2 : $A() 函数的用法
- < script language = "javascript" type = "text/javascript" >
- /*$A 函数体验 */
- function do$ATest() {
- var nodeList = document .getElementsByTagName("input");
- var nodeArray = $A(nodeList);
- var message = " 全部 input 控件: " ;
- nodeArray.each(
- function(node) {
- message += node.type + "|" + node.name + "|" + node.value + "";
- }
- );
- window.alert(message);
- }
- </ script >
- < input type = "button" name = "$ATest" value = " $A " onClick = "do$ATest()" >
2.3.2 Try.these() 函数的妙用
我们知道, XHR 是 Ajax 的核心之一。但是各个浏览器对 XHR 的实现不同, IE 浏览器的各个版本对 XHR
的支持也有所差异。为了保证 Ajax 的浏览器兼容性,在实例化 XHR 对象的时候,通常要使用 try/catch 对兼容性进行判断。比如例程 3
所示。
例程 3 :使用 try/catch 块实例化 XHR
- var xhr = null ;
- if (window.XMLHttpRequest) {
- xhr = new XMLHttpRequest();
- if (xhr.overrideMimeType)
- xhr.overrideMimeType(“text/xml”);
- } else if (window.ActiveXObject) {
- try {
- xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
- } catch (e) {
- try {
- xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
- } catch (e) {}
- }
- }
而现在,使用 Try.these() 函数,这些烦琐的过程变得异常简单。
例程 4 :使用 Try.these() 函数实例化 XHR
- function doInitialXHR() {
- return Try.these(
- function () { return new ActiveXObject( 'Msxml2.XMLHTTP' )},
- function () { return new ActiveXObject( 'Microsoft.XMLHTTP' )},
- function () { return new XMLHttpRequest()}
- ) || false ;
- }
2.3.3 对集合类的遍历
之前提过, Prototype 最初的应用领域是 Ruby 。 Ruby
为遍历集合中的元素提供了一系列快捷的方法,使得执行维护、查找、收集、删除其中的元素更加快速。 Prototype 新建了一个
Enumerable 对象,为 Javascript 提供类似 Ruby 的功能。
在 Ruby 、 .NET 语言中,都支持使用 each 关键词对集合中的元素进行遍历。在 Enumberable 对象中,还有很多方法比如
all() 、 any() 、 collect() 等都是基于 each() 方法实现的。所以, each() 方法是操作集合元素的基础。
each() 方法使用 iterator 依次获取集合中的每个元素,并将其作为匿名函数的参数;也可以在该匿名函数中加上可选参数 index ,获取当前元素的索引值。其实在例程 2 中,我们已经使用了 each() 方法。
例程 5 使用 each() 方法,对一个保存货物价格的数组进行遍历,显示价格及其索引值。
例程 5 :使用 each() 方法遍历集合
- function doEachTest() {
- var prices = [100.2, 445, 552.3, 56.0];
- prices.each(
- function (price, index) {
- window.alert( "Value:" + price + "| Index:" + index);
- }
- );
- }
2.3.4 Prototype 的Ajax体验
Prototype 将 Ajax 应用封装为 Ajax.Request 和 Ajax.Update 类。使用这两个类,可以应付大部分的 Ajax 应用,而且不需要烦琐的实例化 XHR 、监控请求状态的过程。
假设我们将书籍的信息保存在一个 XML 文档中,如例程 6 所示。
例程 6 :保存书籍信息的 XML 文档
- <? xml version = "1.0" encoding = "gb2312" ?>
- < books >
- < book >
- < title > Ajax bible </ title >
- < pages > 500 </ pages >
- </ book >
- < book >
- < title > Build with Ant </ title >
- < pages > 632 </ pages >
- </ book >
- < book >
- < title > Google </ title >
- < pages > 934 </ pages >
- </ book >
- </ books >
现在,我们使用 Ajax.Request 类去获取这个 XML 文档的内容,并将其显示出来。例程 7 展示了这一过程。
例程 7 :使用 Ajax.Request 获取 XML 文档内容
- < script language =”javascript” type =”text/javascript” >
- /*Ajax.Request 类体验 */
- function doAjaxRequest() {
- var url = "books.xml" ;
- var myAjax = new Ajax.Request(url, {
- method:"get",
- onComplete:showResponse
- }
- );
- }
- /*Ajax.Request 类回调函数 */
- function showResponse(request) {
- window.alert(request.responseText);
- }
- </ script >
- < input type = "button" name = "ajaxRequest" value = "ajaxRequest" onClick = "doAjaxRequest()" >
图 1 展示了使用 Ajax.Request 后所获取的 books.xml 文档内容。
图 1 使用 Ajax.Request 后所获取的 books.xml 文档内容
例程 7 中, onComplete 指定的 showResponse 函数其实是 Ajax
的回调函数,通常在这个回调函数中完成对响应数据的解析和显示。而如果服务器端返回的是已经格式化后的 HTML 代码(这点在 Ruby
中很流行),则可以使用 Ajax.Updater 。例程 8 使用 Ajax.Updater 将服务器的响应数据填充到指定的 div 中。图 2
展示了使用 Ajax.Updater 的执行效果。
例程 8 :使用 Ajax.Updater 获取服务器的响应数据
- < script language =”javascript” type =”text/javascript” >
- /*Ajax.Update 类体验 */
- function doAjaxUpdate() {
- var url = "response.php" ;
- var pars = "field=all&show=true" ;
- var myAjax = new Ajax.Updater("divContent", url,
- {
- method:"get",
- parameters:pars
- }
- );
- }
- </ script >
- < input type = "button" name = "ajaxUpdate" value = "ajaxUpdate" onClick = "doAjaxUpdate()" >
- < p > < div id = "divContent" > </ div > </ p >
图 2 使用 Ajax.Updater 的执行效果
例程 9 是例程 8 所请求的 PHP 文件,其简单的打印出加粗后的“ Ajax.Update ”字样。
- <?php
- echo '<strong>Ajax.Update</strong>' ;
-
?>
发表评论
-
Spring声明式事务管理与配置详解
2015-08-18 09:00 01、Spring声明式事务配置的五种方式 前段时间对 ... -
Log4j的配置与使用详解
2015-08-18 08:44 7321、介绍 Log4j是Apache的一个开放源代码项目 ... -
Web.xml
2015-08-18 08:35 397web.xml文件详解 前言:一般的 ... -
Spring Filter
2015-08-18 08:23 4811、简介 Filter也称 ... -
springSecurity源码分析——DelegatingFilterProxy类的作用
2014-12-16 13:56 673http://www.cnblogs.com/hzhu ... -
spring data jpa 中的OpenEntityManagerInViewFilter 取代OpenSessionInViewFilter
2014-12-05 13:52 0http://blog.csdn.net/lzwglory/ ... -
servlet tomcat web.xml配备信息说明
2014-12-05 13:50 0servlet tomcat web.xml配置信息说明 ... -
Spring IntrospectorCleanupListener
2014-12-05 12:40 632spring中提供了一个名为 org.springfr ... -
Spring IOC容器实例化Bean的方式与RequestContextListener应用
2014-12-05 12:35 1037spring IOC容器实例化Be ... -
SpringBean的5种作用域
2014-12-05 12:33 762org.springframework.web.contex ... -
Lobback日志文件
2014-12-05 12:29 1145Logback是由log4j创始人Ceki Gülcü设计的 ... -
HTML Element
2012-08-05 17:16 9281. select 1) Clear Select O ... -
Prototype Element
2012-08-05 16:46 9031. select <select name=&q ... -
IE Firefox 一些组件的特殊处理
2012-07-29 09:04 8471、html alt 在IE下控件的alt属性使用赋值后,当 ... -
log4j 自动生成 appender
2011-05-04 21:55 1636一般log4j的配置是通过log4j.properties或x ... -
Java ASP Post
2011-03-06 20:32 1156用Java编写的模拟ASP Post请求写的一个上海的违章查询 ... -
Java Spring2.5 Remote Invoke HTTP Invoker
2011-03-06 20:16 2640近日,一个项目涉及到 ... -
Java Spring1.2 Remote Invoke HTTP Invoker
2011-02-25 09:12 1264近日,一个项目涉及到系统间接口调用,考虑到系统间用的都是jav ... -
File Encoding Converter
2009-11-13 16:52 1646在Java应用开发中,经常会遇到不同的开发人员的IDE设置的文 ... -
When Runtime.exec() won't
2009-07-02 12:31 1024As part of the Java language, t ...
相关推荐
如上图所示,我创建了两个对象person1 与 person2,这两个对象都要调用study 这个函数,这样就会在内存开辟两个study空间,但函数实现的功能都是一样的,所以这样太浪费内存空间了,所以原型的出现就是为了解决了这...
新型机器人原型与人类操作员在Q开关NdYag激光皮肤再生中的裂面研究准确性、有效性和安全性_A Split-face Study of Novel Robotic Prototype vs Human Operator in Skin Rejuvenation Using Q-switched NdYag Laser ...
In order to realize the target emittance of the PAL-XFEL injector we carried out an optimization study of various parameters, such as the laser beam transverse profile, the laser pulse length, the ...
– /* 给原型 prototype 添加属性的两种方式 */ //方式一 var myObj = function(){ this.study = “JavaScript”; } myObj.prototype.hobby = function() { this.hobby = “See girl”; } var newObj = new myObj();...
A Case Study for Blockchain in Healthcare:“MedRec” prototype for electronic heal
Survivor_curve_privacy_prototype 用于原型化隐私保护生存曲线的代码库surv_test 用于保护隐私的生存曲线原型的脚本expand_nomissing_study1.csv SURVIVAL综合数据中的数据(取自DataSHIELD VM)
On the other hand, the novice AWK programmer can study a wealth of practical pro- rams that emphasize the power of AWK’s basic idioms: data driven control-fow, pattern matching with regular ...
Purpose: To evaluate the potential clinical usability of a new prototype ... A pro-spective, observational case series study was performed to test it. Five patients who had un-dergone cataract surgery wi
Multi-processor system on chip (MPSoC) has been ... Examples and a JPEG case study demonstrate that our model can largely ease the burden of programmers as well as uncover the task level parallelism.
to implement any logical function for faster prototype development, it is necessary to implement the existing design of LFSR on FPGA to test and verify the simulated & synthesis result between ...
Chapter 2: A Case Study: Designing an App Chapter 3: Prototype Chapter 4: Factory Method Chapter 5: Abstract Factory Chapter 6: Builder Chapter 7: Singleton Chapter 8: Adapter Chapter 9: Bridge ...
were obtained using a bare-bones prototype that was developed just to demonstrate the potential of such a system. We have since set out to design a more complete execution platform, and to implement ...
##prototype原型链 ##JQuery ##语法高亮 ##ES6 ##正则 ##MD5 ##跨域 ##Md5 ##AMD ##emoji ##设计模式 ##HTTPS ##JS全栈 ##Underscore.js ##文件上传 ##SWFUpload ##柯里化 ##jqGrid ##localStorage/sessionStorage #...
A Case Study: Designing a Document Editor • Design Problems • Document Structure • Formatting • Embellishing the User Interface • Supporting Multiple Look-and-Feel Standards • Supporting ...
A prototype of symmetrical optical waveguide (SOW)-based surface plasmon resonance (SPR) sensing system is developed. Based on a polydopamine and matrix metalloproteinase-9 (MMP-9) antibody sensing ...
This project is aimed to help the user further study Javascript with a test-driven approach. Each unit contains an annotated tutorial and a platform where you can test your understanding of the topic....
The measurement of the second-order degree of coherence [g(2)(τ)] is one of the important methods used to study the dynamical evolution of photon-matter interaction systems. Here, we use a nitrogen-...
Connection Manager, Prototype, and jQuery Request Management with Priority Queues and the RequestManager Object Comet push-based web systems and HTTP streaming Maps and Mashups with Geocoding, ...
Prototype and test code in a Playground Understand the basics of Swift, including operators, collections, control flows, and functions Create and use Classes, Structures, and Enums, including object-...
The Programming Process Setting Up Your Work Area The Specification Code Design The Prototype The Makefile Testing Debugging Maintenance Revisions Electronic Archaeology Mark Up the Program Use the ...