prototype js 开发笔记

prototype.js开发笔记覆盖版本1.3.11.Prototype是什么?或许你还没有用过它，prototype.js是一个由SamStephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端，高交互性WEB应用程序的重担。轻松加入Web2.0特性。如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。我想当我学习他的时候记写笔记然后分享给其他人将会很不错。我也一起提供了这个包的对象，类，方法和扩展的非官方参考。2.通用性方法这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。2.1.使用$()方法$()方法是在DOM中使用过于频繁的document.getElementById()方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后$()返回一个带有所有要求的元素的一个Array对象。下面的例子会向你描述这些。HTMLHEADTITLETestPage/TITLEscriptsrc=prototype-1.3.1.js/scriptscriptfunctiontest1(){vard=$('myDiv');alert(d.innerHTML);}functiontest2(){vardivs=$('myDiv','myOtherDiv');for(i=0;idivs.length;i++){alert(divs[i].innerHTML);}}/script/HEADBODYdivid=myDivpThisisaparagraph/p/divdivid=myOtherDivpThisisanotherparagraph/p/divinputtype=buttonvalue=Test1onclick=test1();brinputtype=buttonvalue=Test2onclick=test2();br/BODY/HTML这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候，它变得非常有用。2.2.使用$F()方法$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。这个方法可以传入元素的id或者元素自己。scriptfunctiontest3(){alert($F('userName'));}/scriptinputtype=textid=userNamevalue=JoeDoebrinputtype=buttonvalue=Test3onclick=test3();br2.3.使用Try.these()方法Try.these()方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易，他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。在下面的例子中，xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。使用Try.these()方法我们可以得到正常工作的那个方法的返回值。scriptfunctiongetXmlNodeValue(xmlNode){returnTry.these(function(){returnxmlNode.text;},function(){returnxmlNode.textContent;));}/script3.Ajax对象上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。Ajax对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX功能涉及的狡猾的代码。这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。3.1.使用Ajax.Request类如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。为了支持AJAX功能。这个包定义了Ajax.Request类。假如你有一个应用程序可以通过url=1234&year=1998与服务器通信。它返回下面这样的XML响应。?xmlversion=1.0encoding=utf-8?ajax-responseresponsetype=objectid=productDetailsmonthly-salesemployee-salesemployee-id1234/employee-idyear-month1998-01/year-monthsales$8,115.36/sales/employee-salesemployee-salesemployee-id1234/employee-idyear-month1998-02/year-monthsales$11,147.51/sales/employee-sales/monthly-sales/response/ajax-response用Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。scriptfunctionsearchSales(){varempID=$F('lstEmployees');vary=$F('lstYears');varurl='='empID='+empID+'&year='+y;varmyAjax=newAjax.Request(url,{method:'get',parameters:pars,onComplete:showResponse});}functionshowResponse(originalRequest){//putreturnedXMLinthetextarea$('result').value=originalRequest.responseText;}/scriptselectid=lstEmployeessize=10onchange=searchSales()optionvalue=5Buchanan,Steven/optionoptionvalue=8Callahan,Laura/optionoptionvalue=1Davolio,Nancy/option/selectselectid=lstYearssize=3onchange=searchSales()optionselected=selectedvalue=19961996/optionoptionvalue=19971997/optionoptionvalue=19981998/option/selectbrtextareaid=resultcols=60rows=10/textarea你看到传入Ajax.Request构造方法的第二个对象了吗？参数{method:'get',parameters:pars,onComplete:showResponse}表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为method值为'get'的属性，另一个属性名为parameters包含HTTP请求的查询字符串，和一个onComplete属性/方法包含函数showResponse。还有一些其它的属性可以在这个对象里面定义和设置，如asynchronous，可以为true或false来决定AJAX对服务器的调用是否是异步的（默认值是true）。这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTPGET命令请求那个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。更完全的解释，请参照Ajax.Request参考和Ajax选项参考。3.2.使用Ajax.Updater类如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中Ajax.Updater类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。scriptfunctiongetHTML(){varurl='='someParameter=ABC';varmyAjax=newAjax.Updater('placeholder',url,{method:'get',parameters:pars});}/scriptinputtype=buttonvalue=GetHtmlonclick=getHTML()divid=placeholder/div你可以看到，这段代码比前面的例子更加简洁，不包括onComplete方法，但是在构造方法中传入了一个元素id。我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。我们将加入更多的选项，指定处理错误的一个方法。这个是用onFailure选项来完成的。我们也指定了一个placeholder只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象，success(一切OK的时候被用到)和failure(有地方出问题的时候被用到)在下面的例子中没有用到failure属性，而仅仅在onFailure处使用了reportError方法。scriptfunct