prototype.js 1.4 version of the developer manual (change)

See a very good thing in the country has not been a lot of people use them is really unhappy, so I spent a lot effort into this manual is translated into Chinese, as the article is very long, so the translation of the heavy workload and some of Local English does not make clear, though may view the source code, but fortunately not insist done, and everyone encouraged ah! ^ o ^
prototype.js is a very elegant javascript library based on the javascript to do a lot of expansion, but also a very good support for Ajax, there are several foreign-based bank to achieve the effect of such a library, but also did a great job.
prototype.js is not only a great practical value of the js libraries, but also has a high learning value, so I strongly recommend that B / S developers and interested in the development of the JS friends to visit some of its source code, which a lot of valuable, you will definitely find reading its source code is a kind of enjoyment, of course, read it to understand, He He.
It was also written web 1.3 version of the source code interpretation, we can be sent for a look. However, version 1.4 done a lot of expansion, so I hope there is a friend to write the source code for reading version 1.4.
Some explanations:

  • A friend said that prototye has been translated, and Oh, right, shows you've been concerned about it, but the original translation of the 1.3 version of the document, version 1.4, there are a number of important extensions, and pre_1.5 edition now out not to change much.
  • A friend of mine said that there was no interpreter to come to more than useful, and please, only a description of the parameters of each method does not turn, many of which are what type of these instructions, or get another empty bar, first on the look, sorry, turn to this procedure has been tired people, and after all that long.
  • CHM documentation made things can only Sorry, because I did not this time, it has not done CHM, I think the layout to see what Web pages and CHM are almost bar.

prototype.js What is this? In case you have not used the famous prototype.js, so let me tell you, prototype.js by Sam Stephenson wrote a javascript library. Wonderful idea, but is compatible with the standard library, can help you to easily create highly interactive rich client web2.0 features page.
If you have recently tried to use it, you probably understand that the document is not the author of a strength. And I had to use the library, like many developers, at the outset, I have to head around prototype.js to read the source code and its function in the experiment. I think I finished it, after learning to share what I learned we all pieces of a good thing.
Meanwhile, in this article, I will also provide a library available on the objects, classes, functions, extensions which Dongdong's unofficial reference
After reading this document, are familiar with Ruby developers will notice a number of built-in Ruby classes and the library is very similar between the expansion achieved.
Related Articles Advanced JavaScript guide.
Some useful functions in this library with a number of predefined objects and utility functions, these Dongdong clear that the purpose is to you from a number of repetitive typing freed.
Using the $ () method $ () method is used too frequently in the DOM of the document.getElementById () method a convenient shorthand, like the same way as the DOM, this method returns the id passed as an argument of the element.
Than the DOM of the method, this one goes. You can pass more than one id as a parameter and then $ () returns an element with all the requirements of an Array object.
<TITLE> Test Page </ TITLE>
<script src="prototype-1.3.1.js"> </ script>
function test1 ()
var d = $ ( 'myDiv');
alert (d.innerHTML);
function test2 ()
var divs = $ ( 'myDiv', 'myOtherDiv');
for (i = 0; i <divs.length; i + +)
alert (divs.innerHTML);
</ script>
</ HEAD>
<p> This is a paragraph </ p>
</ div>
<p> This is another paragraph </ p>
</ div>
<input type="button" value=Test1> <br>
<input type="button" value=Test2> <br>
</ BODY>
</ HTML>
Another advantage is that this function can be passed with the string that the object ID, you can pass the object itself, so that others can pass in the establishment of two types of parameters function very useful.
Using the $ F () function $ F () function is another big revenue welcome "shortcuts", it can be used to return the value of any form input controls, such as text box, drop-down list. This method can also use element id or the element itself as a parameter.
function test3 ()
alert ($ F ( 'userName'));
</ script>
<input type="text" value="Joe Doe"> <br>
<input type="button" value=Test3> <br>

The use of $ A () function $ A () function is that it can be received into a single parameter Array object.
This method, combined with expanded by this library's Array class can easily enumerate a list of any that can be converted into or copy to an Array object. Recommended usage is to a DOM Node Lists converted into a normal Array object, and thus more efficient to traverse, see the following example.
function showOptions () (
var someNodeList = $ ( 'lstEmployees'). getElementsByTagName ( 'option');
var nodes = $ A (someNodeList);
nodes.each (function (node) (
alert (node.nodeName + ':' + node.innerHTML);
</ script>
<select size="10">
<option value="5"> Buchanan, Steven </ option>
<option value="8"> Callahan, Laura </ option>
<option value="1"> Davolio, Nancy </ option>
</ select>
<input type="button" value="Show the options">

The use of $ H () function $ H () function to convert a number of objects and associative array enumerable Hash objects similar.
function testHash ()
/ / let's create the object
var a = (
first: 10,
second: 20,
third: 30
/ / now transform it into a hash
var h = $ H (a);
alert (h.toQueryString ()); / / displays: first = 10 & second = 20 & third = 30
</ script>

Using the $ R () function $ R () is a new ObjectRange (lowBound, upperBound, excludeBounds) acronym.
Skip to ObjectRange class documentation can be seen on such a complete description. At this point, we first look at an example to demonstrate what this acronym means can replace the bar. Some other related knowledge can Enumerable object documentation.
function demoDollar_R () (
var range = $ R (10, 20, false);
range.each (function (value, index) (
alert (value);
</ script>
<input type="button" value="Sample Count">

Use Try.these () function Try.these () method allows to achieve when you want to call the different methods until one of the success of this demand has become normal very easy, he has a number of ways as a parameter and in accordance with the order of a an implementation of these methods until one of the successful implementation of the successful implementation of that method to return the return value.
In the following example, xmlNode.text easy to use in some browsers, but xmlNode.textContent in other browsers work correctly. Use Try.these () method we can get to work in that method return value.
function getXmlNodeValue (xmlNode) (
return Try.these (
function () (return xmlNode.text;),
function () (return xmlNode.textContent;)
</ script>

Ajax objects mentioned above, the common method is very good, but let's face it, they are not the most advanced type of thing. They is not it? You might even have written these in your script inside a similar feature. However, these methods only a tip of the iceberg.
I am sure the reason for your interest in prototype.js is probably due to its AJAX capabilities. So let's explain when you need to complete the AJAX logic, when the package how to make it easier.
Ajax object is a predefined object created by this package, in order to package and simplify the preparation of AJAX functionality involves cunning code. This object contains a series of encapsulated AJAX logic. Let's take a look at a few classes.
Using the Ajax.Request class If you are not using any helper library, you are probably writing a whole lot of code to create the XMLHttpRequest object and track its progress asynchronously, then extract the response and process it. When you do not need to support more than one type of browser, you will feel very lucky.
In order to support AJAX functionality. This package defines the Ajax.Request class.
If you have an application program can communicate with the server through the url http://yoursever/app/get_sales?empID=1234&year=1998. It returns to the following XML response.
<? xml version = "1.0" encoding = "utf-8"?>
<response type="object">
<employee-id> 1234 </ employee-id>
<year-month> 1998-01 </ year-month>
<sales> $ 8,115.36 </ 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 object and the server communicate with and get this XML is very simple. The following example shows how it is done.
function searchSales ()
var empID = $ F ( 'lstEmployees');
var y = $ F ( 'lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID =' + empID + '& year =' + y;
var myAjax = new Ajax.Request (url, (method: 'get', parameters: pars, onComplete: showResponse));
) function showResponse (originalRequest) (/ / put returned XML in the textarea $ ( 'result'). value = originalRequest.responseText;) </ script> <select size="10" onchange="searchSales()"> <option value = "5"> Buchanan, Steven </ option> <option value="8"> Callahan, Laura </ option> <option value="1"> Davolio, Nancy </ option> </ select> <select size = "3" onchange = "searchSales ()">< option selected =" selected "value =" 1996 "> 1996 </ option> <option value="1997"> 1997 </ option> <option value =" 1998 " > 1998 </ option> </ select> <br> <textarea pass Ajax.Request constructor you noticed the second object? Parameter (method: 'get', parameters: pars, onComplete: showResponse) said that the real writing an anonymous object. He said that you are passing an object has a method called value of 'get' the property, another property named parameters that contains HTTP request query string, and an onComplete property / method containing the function showResponse.
There are some other properties can be defined in this object and settings, such as asynchronous, can be true or false to determine whether the AJAX call to the server is asynchronous (the default value is true).
This parameter defines the AJAX call option. In our example, in the first argument via a HTTP GET command requests that url, was introduced to the query string variable pars contains, Ajax.Request object when it finishes retrieving the response will be called showResponse method.
Perhaps you know, XMLHttpRequest in the HTTP request will be reported during the progress. This schedule has been described as four different stages: Loading, Loaded, Interactive, or Complete. You can make the Ajax.Request object call a custom at any stage, Complete is the most common one. Would like to call a custom method requires only a simple option in the request parameter named onXXXXX properties / methods to provide a custom approach the object. As our example in the onComplete. You pass in will be used as an argument, this parameter is the XMLHttpRequest object itself. You will use this object to get the returned data and maybe check this call contains the HTTP result code of the status attribute.
There are two other useful options for handling the results. We can pass in the onSuccess option as a method, when the AJAX call executes without errors and exhausted, the opposite can also be passed in the onFailure option as a method, when the error when the server is called. As the same way as incoming onXXXXX options, these two are also being called when the AJAX request passed with a XMLHttpRequest object.
Our sample did not in any interesting way to deal with this XML response, we just put this XML into a text field inside. A typical response of this application would probably find the information you want them, and then update some page elements, or maybe even some XSLT transformation to generate some page HTML.
In the 1.4.0 version, a new event outside the reasonable return was introduced. If you have a block of code is always a special event for the implementation of the AJAX call regardless of which lead to it, then you can use the new Ajax.Responders object.
Suppose you want an AJAX call is running, show some tips for effect, like a constantly rotating icon of the class, you can use the two global event Handler to do, one of the first call to the start of display icons, Another call is completed in the last one hidden icon. See the following example.
var myGlobalHandlers = (
onCreate: function () ( ( 'systemWorking');
onComplete: function () (
if (Ajax.activeRequestCount == 0) (
Element.hide ( 'systemWorking');
Ajax.Responders.register (myGlobalHandlers); </ script> <div> <img src='spinner.gif'> Loading ...</ div>
More complete explanation, please refer to Ajax.Request reference and the Ajax options reference.

Using the Ajax.Updater class, if your server to return information on the other side is HTML, then use this package Ajax.Updater class will make your life even easier. Use it you just inform which element should be an AJAX request returns the HTML can be filled, and examples than what I wrote explained more clearly.
function getHTML ()
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter = ABC';
var myAjax = new Ajax.Updater ( 'placeholder', url, (method: 'get', parameters: pars));
) </ script> <input type=button value=GetHtml> <div> </ div> you can see, this code is more concise than the previous example, excluding the onComplete method, but in the constructor method was introduced to a element id. Let's look at slightly modify the code to describe how the client to handle server errors possible.
We will add more options to specify a method of handling errors. This is accomplished with the onFailure option. We will also specify a placeholder only gets populated after a successful request. To accomplish this we will change the first parameter from a simple element id to an object with two properties, success (to be used when all OK) and failure (a place to go wrong when they were used) in the The following example does not use failure attributes, but only in the onFailure Department reportError method used.
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> <div> </ div> If your server logic, together with the HTML tag Back to JavaScript code, Ajax.Updater object can execute JavaScript code in that period. To make this object to treat the response as JavaScript, you are just in the last argument of the object constructor method simply by adding evalScripts: true attribute. But it is worth reminding that, as this option is the name evalScripts implies, these scripts will be executed, but they will not be added to the Page's script. "What's the difference?", Perhaps you may ask. We assume that the request addresses the return of Dongdong like this:
<script language="javascript" type="text/javascript">
function sayHi () (
alert ( 'Hi');
</ script>
<input type=button value="Click Me">

If you've tried this, do you know if these scripts do not work as you expect, because this script will be implemented, but like the above, the implementation of such a script does not create a function called sayHi, what is it do nothing. If you want to create a function, we should change the code like following:
<script language="javascript" type="text/javascript">
sayHi = function () (
alert ( 'Hi');
</ script> <input type=button value="Click Me"> why we are in the above code does not use var keyword to declare the variable then (referring to sayHi), because doing so will only create a function out of the current script block of a local variable (at least in IE is the case). Do not write var keyword to create an object out of scope of what we expect window.
More relevant knowledge, please see the Ajax.Updater reference and the Options reference.
Enumeration ... Oh! Oh! You know, we are like this for a loop, and to build an Array, with elements of their organization, and then build a loop structure (for example, for, foreach, while) to access through the index numbers for each element , and then do some action in this element.
When you think of this time, you will find in almost every cycle of the code to write sooner or later you will use an Array. So, if the Array object can provide more functionality to their use of iterators do not feel so cool? Is true, in fact, a lot of programming languages in their Array, or other similar structure (such as Collections, Lists) to provide some of these functions.
Well now, prototype.js gives us an Enumerable object, which implements a lot of data and iterative interaction tips. And the original prototype.js a higher level compared to JS object, it Array class s extends the use of all enumerated functions.
Cycle, Ruby style in the standard javascript, if you want an array of all elements are displayed, you can do this very well written the following code:
function showList () (
var simpsons = [ 'Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
for (i = 0; i <simpsons.length; i + +) (
alert (simpsons);
) </ script> <input type="button" value="Show List"> to use our new best friend, prototype.js, we can write it like Health
function showList () (
var simpsons = [ 'Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
simpsons.each (function (familyMember) (
alert (familyMember);
) You might want to "very strange way ... is relatively old, this syntax is too weird of." Oh, in the above example, do nothing, to death in this simple example, has not changed much ah, though, please read on.
Before continuing to the content below, you notice that was used for a parameter passed to each function, the function? We understood it as iterator functions.
Your arrays on steroids as we mentioned above, your Array in the same type as the elements using the same attributes and functions are very common (Common, I do not know the translation into the common or vulgar) in. Let us see how kind to use the horsepower of our new iteration features a strong Arrays bar.
In accordance with the standard to find an element.

function findEmployeeById (emp_id) (
var listBox = $ ( 'lstEmployees')
var options = listBox.getElementsByTagName ( 'option');
options = $ A (options);
var opt = options.find (function (employee) (
return (employee.value == emp_id);
alert (opt.innerHTML); / / displays the employee name
</ script>
<select size="10">
<option value="5"> Buchanan, Steven </ option>
<option value="8"> Callahan, Laura </ option>
<option value="1"> Davolio, Nancy </ option>
</ select>
<input type="button" value="Find Laura">

Now we gain another victory to see how we filter an Array of the elements, from each element in getting what we want members.

function showLocalLinks (paragraph) (
paragraph = $ (paragraph);
var links = $ A (paragraph.getElementsByTagName ( 'a'));
/ / find links that do not start with 'http'
var localLinks = links.findAll (function (link) (
var start = link.href.substring (0,4);
return start! = 'http';
/ / now the link texts
var texts = localLinks.pluck ( 'innerHTML');
/ / get them in a single string
var result = texts.inspect ();
alert (result);
</ script>
This <a href=""> text </ a> has
a <a href="#localAnchor"> lot </ a> of
<a href="#otherAnchor"> links </ a>. Some are
<a href=""> external </ a>
and some are <a href="#someAnchor"> local </ a>
</ p>
<input type=button value="Find Local Links"> <! - v :3.2 ->

分类:Web 时间:2008-10-15 人气:407
blog comments powered by Disqus


  • Rights management system open source organizations (including the AJAX application framework to achieve EOS) (updated 071016) 2010-03-12

    Rights management system open source organizations (including the AJAX application framework to achieve EOS) (updated 071016) Published :2007-10-16 00:00:00 author: goCom Source: goComDevCenter Language: English Reading Views: 28186 times ===========

  • prototype Ajax + Servlet (attached Demo) 2009-03-05

    Test WEB project set up prototype.js location WebContent / js / prototype.js Create test2.jsp location WebContent/test/test2.jsp <%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> <!DO

  • jQuery + Ajax + Struts2. js javascript 2010-04-08

    (1) jQuery's basic usage: WEB2.0 and ideas with ajax the rapid development of Internet communication, one after another there are some excellent Js framework, some of the more famous are Prototype, YUI, jQuery, mootools, Bindows and domestic JSVM fra

  • String.prototype实现的一些javascript函数介绍 2014-11-18

    这篇文章主要是对String.prototype实现的一些javascript函数进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 //String.prototype使用 //批量替换,比如:str.ReplaceAll([/a/g,/b/g,/c/g],["aaa","bbb","ccc"]) String.prototype.ReplaceAll=function (A,B) { var C=this; for(var i=0

  • prototype Ajax.Updater 2008-12-26

    var url = "/ edit / find_topic"; var myajax = new Ajax.Updater ( (success: 'ul'), / / ul for a control's ID url, ( parameters: 'keyword ='+$(" keyword "). value, asynchronous: true, method: 'get', evalScripts: true ) ); The Ajax.Update

  • prototype ajax applications 2008-10-27

    1. Client <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' st

  • prototype ajax external javascript 2010-03-26

    Updated with new Ajax.updater a file, this file has <script src="/files/inc/tests.js" type="text/javascript"> </ script> <script type="text/javascript"> alert (11); </ Script> Data returned by ajax, fo

  • Tell you what is elegant code (11 )---- a thorough understanding of javascript 2010-11-30

    With the insertion of HTML5 RIA G-point touch, b / s will further liberate the productive forces, will further increase production efficiency, which will lead to changes in production relations, namely, from the c / s structure of the conservatism, l

  • How to Obtain Android Application's Version Code 2010-03-29

    Use PackageManager to get information about the Application. Put the following code in your Activity: private int getCurrentVersionCode () ( PackageManager manager = getPackageManager (); String packageName = getPackageName (); / / Log.d (CLASSTAG, "

  • javascript modify IMG SRC tag to achieve the verification code, IE normal, Firefox and google the situation 2010-08-06

    1. When the click of a button, the picture in the domain of the image to change what <img src="/servlet/CreateValidateNum" width="60" height="20" /> <span> not see </ span> <script> function reflush ()

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 闽ICP备15018612号

processed in 0.181 (s). 12 q(s)