AJAX Tour (1): by entering javascript prototype_1.3.1 hall - the type of ajax decided on the title of crown, after all, many people will use this keyword search.    Although I think it is just speculation concept, but had to admit ajax called up to facilitate more.    Therefore, I do not mean ajax explained in detail. 
  Guide to the cause of this writing is very simple: after a period of time studying the ajax, some experience, and more understanding of the powerful to ajax technology, and decided to record, is the way to finishing their own ideas.    The follow-up on this course, please concerns http://www.x2design.net 
  A few years ago, javascript in the eyes of most people, very narrow function, or can do some simple form is verified, or the website is that many flashy effects.    With the emergence of flash, unlike before, we have been keen to js effects.    Js can do about it seems to be more less.    But this time, the concept of risk ajax out to gmail is a typical representative of the ajax application by the concern of many people, ajax suddenly become a very popular technology, and when javascript xml, and the dom model combine, it can do things often baffled, and even some functions of desktop and procedures can be considerable. 
  Well nonsense is not to say, from now on the development of a framework prototype_1.3.1 javascript (referred to as prototype below).    I did want to tell us about the javascript advanced applications, but not the level of fear, that no coherent, and so they combine prototype, incidentally mentioned js Syntax use. 
  Below are the two top of the framework code: 
  = (Var Prototype 
  Version:'1 .3.1 ' 
  EmptyFunction: function () () 
  ) 
  Var class = ( 
  Create: function () ( 
  Return function () ( 
  This.initialize.apply (this, arguments); 
  ) 
  ) 
  ) 
  First, let us look at the difference between the following two syntax: 
  Var o = (); 
  Var f = function (){}; 

  Behind a very easy to understand, it is equivalent to the function f (){}; definition of a function f.    But not a common front: This is in fact the creation of a target, () can be a member of the designated targets, such as the above Prototype is an object, there are two members, one version, and the second is a Air methods (functions).    Not like this type definition, we will be able to create a direct function of the object can be done only js.    In fact, the latter there is a grammatical function f is the definition of a class.    If you have been used in the function of this, then this latter category is a member of variables. 
  Not only members of this category can be defined, there is a script: 
  Function c () ( 
  Member1: value, 
  Member2: function () () 
  ) 

  This is equivalent to: 
  Function c () ( 
  This.member1 = value; 
  This.member2 = function (){}; 
  ) 

  It must be noted that with the former approach, a member of the final and not the final comma, I think this should be syntax and the array. 
  In js, function and the category is no difference, can be new, the new role is to function in the implementation of all the statements again, and then returned to an object.    If this function, there are, then this will be behind the variable targeted members; If not, then the new role of not only the return of any member of a space object.    So you typeof Show with the type of a so-called category, will still be returned to the function.    Js, also in the type of no Basic concept of all of the variables used var statements, even function, as well.    Function, but actually it is a variable. 
  That function is variable, many people may be puzzled.    But you try the following practices: 
  Function fTest () ( 
  Var a = 1; 
  Alert (a); 
  ) 
  Alert (fTest); 

  You may find fTest this is a function of body function, we may be considered, the so-called function, the engine can only js analytical section of the code string.    Variable function of the string is stored.    Say more accurately that the function name is a pointer variable, it is this code stored in memory string position.    This is not difficult to understand the function as a parameter transmission, can be used as the return value, and this is the future large-scale use of technology.    Function because the category is, so to understand the function, the understanding of it. 
  While js category, function and no difference, but the concept of categories we can facilitate the process design, prototype was very creative creation of a global object Class: 
  Var Class = ( 
  Create: function () ( 
  Return function () ( 
  This.initialize.apply (this, arguments); 
  ) 
  ) 
  ) 

  Class is a global object, it is the only way to create role to return to a function, as has already been mentioned as a function return value mechanism, no longer shift between reference here.    Back to the function, including a statement: 
  This.initialize.apply (this, arguments); 

  Said before, a new function, executive function, the code, finally returned to the object.    Therefore, when using Class.create () creates a function, then the return of this new function, the first will be the implementation of this statement.    Behind can see, this is actually a call to the constructor function. 
  That is the way the entire Class become a prototype to create the type of model, and can be very good function of the type in the code, and separate.    Class.create () only to return to an empty category, and it will be the default for this category is a initialize method, therefore, want to use this class, at least the need for a structural function, which requires the use of that type of succession.    Class is a function, then the function of how inheritance?    Seem inconceivable, javascript this can be achieved, in bringing about a more elegant prototype made, as how it is done, satisfied next time decomposition. 
  AJAX Tour (2): javascript in the category of in-depth study - the succession back and said the class definition, prototype through a global object from the Class of form and function will be to distinguish.    Since it is a category, it would be an abstract class, the specific categories, such as inheritance, at the same time, class members can be members and there are examples of static members.    Below is look at the prototype of how do these. 
  Look at the prototype in the following code: 

  Var Abstract = new Object (); 
  Object.extend = function (destination, source) ( 
  For (property in source) ( 
  Destination [property] = source [property]; 
  ) 
  Return destination; 
  ) 
  Object.prototype.extend = function (object) ( 
  Return Object.extend.apply (this, [this, the object]); 
  ) 
  The first statement of an object Abstract, Object is a function, he did not have any members, it is an empty category, so they do not have any Abstract members.    The moment that can be seen behind this is the basis of abstract classes.    The first explain the following syntax: 
  Function.member = function () () 
  In such circumstances, are generally defined function off, and the role of this statement is to add a static member function member, the member is equal behind.    If the above paragraph code Object.extend =……, Object is to increase this category extend a static method.    Ok, we know how to static definition of a class member, then you will want to know examples of how the definition is very simple, and members of the class who were among the prototype: 

  Function.prototype.member = function () () 

  It can be used not only prototype, can also: 
  Function.prototype = ( 
  Member1: function () ()……, 
  Member2: "abc" 
  Member3: function () ()…… 
  ) 
  This is an example of the realization of the definition.    But prototype represents what does that mean?    In the first, I said that the direct use () enclose that an object, such as Prototype, the definition of such Class is the global object.    Below and to see a usage, is a prototype behind the structure of () Is it also targets?    Yes, that's right, the prototype is also a target!    In javascript, an object we can arbitrarily increase its membership, with the following syntax: 
  Object.member = function () (……); 
  After as long as such a definition, an object can be a member of this method immediately!    Javascript is so wonderful! 
  Good, we now know that the prototype is an object, and function is a function or category, then we can be considered a prototype is any category (functions) have retained a static members.    It is the function of the memory of all members of this class indicators, but these are only members of the prototype, has not been initialized, this is in keeping with the original meaning of prototype.    You can at any time through the prototype of the expansion of this object.    In a new category, the members of the prototype After initialization, and then assign an example of the object. 
  The third paragraph above code Object.prototype.extend =…… is to increase the Object methods extend an example, examples of methods to invoke this pointer from the examples of this type of the object itself.    This, of course, object to a member extend. 
  Continued prior to understand two words: 
  For (var p in object) () 
  Method.apply (object, arguments); 
  The first sentence: a variable list of all members, if a function, then all static members; If it is targeted, and that is all examples of members of the p type is a string.    That member's name.    Not only can be used by a member of variabel.member also can be used variabel [ "member"].    Conversely, the assignment is no different.    This enumeration to the members of a variable has brought great convenience. 
  The second sentence: this method will be applied to object to the method of implementation, this parameter is an array of arguments.    NOTE: members of the method is not the object.    However, we can think of this statement is the meaning of the Executive: object.method (arguments).    This is a very important method used frequently behind, you will become familiar with it. 
  Below continue to extend, it is a very important way, we can see that it is the type Object static members, who are also examples of its members, that it has any effect?    Let us look at: It accepts two parameters, destination and source, if the source and destination are categories, then it is the function of the source of all the static copy to the members of destination, if the destination and source are objects, then Examples are all members of reproduction over.    Then if there is any destination in the members of the same name, then the members will be covered.    That is the source to the destination of all members, and function return to this destination.    Below can extend as Object examples: 
  Object.prototype.extend = function (object) ( 
  Return Object.extend.apply (this, [this, the object]); 
  ) 
  Started a bit dizzy, but Buyaoji, you can understand, and apply grammar has just said that it is a call, and Object.extend is a static method, it is applied to this above, which is Object examples of assumptions obj, and behind square brackets is an array, including two members of this and object.    This array is actually static Object members extend the arguments parameters.    Well, this statement would be equivalent to the implementation of the 
  Obj.extend (this, object); 
  This is not explained, that in itself.    What is the object?    Parameters, TU, came instance methods extend the parameters, not confuse.    Extend?    Obj and did not extend the definition of examples, but through apply, it could Object used to extend the use of static members, to extend again a function of: 
  Object.extend = function (destination, source) ( 
  For (property in source) ( 
  Destination [property] = source [property]; 
  ) 
  Return destination; 
  ) 
  Obj is because the target object is targeted, destination and source are objects, so that function is the role of the object obj with all members.    And will return to obj.    Sounds a little mouthful, but the logic is simple: Let obj "inheritance" object!    Well, we have seen inheritance, but you will certainly ask, object inheritance, first heard ah, we are talking about are talking about the succession of succession.    Yes, now is yet to see real class inheritance, but has been right before our eyes: there is a category prototype is not right, and the prototype object! 
  Well, think of this point, the succession of seemingly very simple syntax: 
  B.prototype.extend (a.prototype); 
  Let b inherit a. 
  However, the reality did not so simple: a prototype storage method prototype indicators extend no initialization method can not be used!    To use extend, it is necessary to instantiate an object.    Or look at the prototype is how to do it: 
  B.prototype = (new a ()). Extend (b.prototype); 
  High that solution!    Fully shown that the function is also a variable truth.    First example of a target, and then extend it on the basis of call, all members b.prototype coverage to a member of the object, and then again this assignment to a target b.prototype.    B completed from a succession of jobs.    In actual use, the general usage are: 
  B.prototype = (new a ()). Extend ({}); 
  Let because of a b inherited from the a, b usually are before an undefined category, behind the () actually can be defined category.    Of course, you can also define first and then inheritance, and only differ from the traditional concept. 

  AJAX Tour (3): javascript events in the design mode prototype1.3.1 today temporarily put aside, I would like to share the experience design javscript incident.    The technical foundation for the realization of its function is the essence of this in front of two described in detail (more please concern: http://www.x2design.net). 
  Javascript objects have a built-in function of the incident, for example, there onclick button, input will onchange event.    How can we in the category since the definition of achieving incident?    Is simple: 
  Var myClass = Class.create (); 
  MyClass.prototype = ( 
  Show: function () ( 
  / / Statement 
  Onshow (); 
  ) 
  Onshow: function () () 
  ) 
  This code is actually achieved onshow incident, myClass examples show when triggered, you can bind a function to onshow, which features the use of the incident.    In javascript, built-in objects are using this incident, which should be realized within is also based on this model.    However, the realization of this there are two outstanding issues: 
  1. Only bind a callback function.    If bundled to achieve more, we must write a lot of code to their packages to the callback function to a function. 
  2. Not transfer parameters.    Onshow only because assign function, or function of itself, and not passing a parameter into account, in order to transfer parameters, I have written one: "javascript shell packaging to trigger transmission parameters", we can see that, we also need to write Many code. 
  So, how to resolve these problems?    Javascript built-in object to the use of our events regardless temporarily, to consider how to achieve in their own category to avoid the above two questions.    Realize before the first to consider the following issues may help to understand the significance of achieving this function: 
  I need pages javascript some initialization, but in the pages printed in the initialization must be carried out after the completion.    Usually we put html code will document the bottom.    But this time, prior to the completion of the page printed in the page click on the button needs to be calling the initialization method, if we do not make a judgement, then it is easy mistakes in the script.    Because no initialization, a simple idea: a loaded bool variables to determine, for the initial false, after the completion of the initialization true, then click the button on the simple encountered false return.    This realization is simple, but it is likely that a user click invalid, and not know why they are so.    Therefore, the practice should be improved to catch this method will be bundled with its pages printed in the completion of the incident, when pages load automatically after the completion of calls. 
  Well, now it is the realization of the incident design code: 
  Var myClass = Class.create (); 
  MyClass.prototype = ( 
  Initialize: function () ( 
  This.initEvent = new Object (); 
  ) 
  Init: function () ( 
  / / Initialization statement to be implemented 

  / / Below are bundled callback function call 
  For (var p in this.initEvent) ( 
  / / Extend built-in method is not as a keyword pullback 
  If (p == "extend") continue; 
  This.initEvent [p]. Apply (_object ,[]); 
  ) 
  ) 
  AttachOnInit: function (_key, _object, _method, _arguments) ( 
  This.initEvent [_key] = createFunction (_object, _method, _arguments); 
  ) 
  ) 
  Function createFunction (_object, _method, _arguments) ( 
  Return function () ( 
  _method.apply (_object, _arguments); 
  ) 
  ) 
  This code on the realization of a class myClass with init method trigger oninit, when used in order to bind an event, can call attachOnInit methods, the mean parameters were: _ key, the only callback function marking the Senate, if repeat, the latter covering the former; _ object callback function of the object, if it is directly in the script of a function of this guide can transfer into that document object _ method to callback function, attention, this is a function name, not string; _ arguments, the callback function parameter array.    CreateFunction there is a function, the role of packaging is a function of its built-in parameters, which is shell packaging an article achieve universal.    If you read the ajax trip before the series of two articles, it should be easy to understand the above code, if any, and welcomes comments. 
  Examples of use: 
  Function myFunc (s) ( 
  Alert (s); 
  ) 
  Var myObj = new myClass (); 
  MyClass.attach ( "key1", and this, myFunc, [123]); 
  MyClass.init (); 

  This function will be bundled with myObj myFunc the init function, the dialog box will pop up after the implementation of 123. 

  Ajax:: prototype.js prototype of a source interpreted [reproduced] 
  / ** 
  * Definition of a global object, attribute the release of Version will be replaced by the current version of 
  * / 
  = (Var Prototype 
  Version: '@ @ @ @ VERSION' 
  ) 

  / ** 
  * Create a type of attention to its attributes create is a method to return a constructor function. 
  * Use the following general 
  * Var X = Class.create (); return to a type similar to a Class java examples. 
  * X type to be used, to continue to use the new X () to obtain an example, as the java Class.newInstance () method. 
*
  * Return to the implementation of the constructor function will be called initialize method initialize the Ruby object constructor method name. 
  * Initialize method at this time has not yet defined, the subsequent creation of new types of code will be set up corresponding methods of the same name. 
*
  * If we understood from the java.    You can understand and use Class.create () to create a succession of the type java.lang.Class.    Java course not because to do so is the final of the Class 
*
  * / 
  Var Class = ( 
  Create: function () ( 
  Return function () ( 
  This.initialize.apply (this, arguments); 
  ) 
  ) 
  ) 

  / ** 
  * Create an object from the variable name to consider, perhaps intended a definition of the abstract category, after creating a new object extend it. 
  * However, the subsequent application of the code, Abstract is more Clear in order to maintain namespace consideration. 
  * In other words, we can give examples of Abstract this object add a new definition of the object. 
*
  * Java to understand that dynamic to create an object within the category. 
  * / 
  Var Abstract = new Object (); 

  / ** 
  * Parameter object access all the attributes and methods, a bit like multiple inheritance.    But this is a dynamic access to the inheritance. 
  *: 
  * Var a = new ObjectA (), b = new ObjectB (); 
  A.extend var c = * (b); 
  * At the same time this has a target c and b object's properties and methods.    But with multiple Inheritance difference is that the c instanceof ObjectB will return false. 
  * / 
  Object.prototype.extend = function (object) ( 
  For (property in object) ( 
  This object [property] = [property]; 
  ) 
  Return this; 
  ) 

  / ** 
  * This method is very interesting, it Packaging, a javascript function objects, the function returns a new object, the new function of the subject and the object of the same object, but bind () method parameters will be used as the object of the present object. 
  * That is the new function of this change was cited as the target parameter. 
  * For example: 
  * <input Type="text" id="aaa" value="aaa"> 
  * <input Type="text" id="bbb" value="bbb"> 
  * ................. 
  * <script> 
  * Var aaa = document.getElementById ( "aaa"); 
  * Var bbb = document.getElementById ( "bbb"); 
  * Aaa.showValue = function () (alert (this.value);) 
  * Aaa.showValue2 = aaa.showValue.bind (bbb); 
  * </ Script> 
  * Then, call aaa.showValue will return to the "aaa", but will return to call aaa.showValue2 "bbb." 
*
  * Apply is ie5.5 after the emergence of a new method (Netscape seems to support a long time ago). 
  * The method more information reference MSDN http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp 
  * There is a call method, application together and apply similar.    Together under study. 
  * / 
  Function.prototype.bind = function (object) ( 
  Var method = this; 
  Return function () ( 
  Method.apply (object, arguments); 
  ) 
  ) 

  / ** 
  * And bind the same, but the methods generally used as a control object html incident.    So to convey the event targets 
  * At this time, the use of the Function.call.    It seems only Function.apply the different forms of the parameter definition. 
  * Java, as contained in the two methods. 
  * / 
  Function.prototype.bindAsEventListener = function (object) ( 
  Var method = this; 
  Return function (event) ( 
  Method.call (object, event | | window.event); 
  ) 
  ) 

  / ** 
  * Integer form RGB Color values into the form of HEX 
  * / 
  Number.prototype.toColorPart = function () ( 
  Var digits = this.toString (16); 
  If (this <16) return'0 '+ digits; 
  Return digits; 
  ) 

  / ** 
  * Ruby typical style of the function, the parameters of each method call, a return to the successful implementation of the return value 
  * / 
  = (Var Try 
  These: function () ( 
  Var returnValue; 

  For (var i = 0; i <arguments.length; i + +) ( 
  Var lambda = arguments [i]; 
  Try ( 
  ReturnValue = lambda (); 
  Break; 
  ) Catch (e) () 
  ) 

  Return returnValue; 
  ) 
  ) 

  /*------------------------------------------------ --------------------------*/ 

  / ** 
  * A compact design of the timing of the implementation of 
  * First, Class.create () to create a PeriodicalExecuter type, 
  * Then directly targeted set of grammatical form prototype. 
*
  * In need of special note is rgisterCallback method, which calls the above definition of the function prototype method bind, and to transfer their own parameters. 
  * Do so because, as setTimeout default to the total target for the current window object, that is to say, if the registerCallback methods are defined as follows: 
  * RegisterCallback: function () ( 
  * SetTimeout (this.onTimerEvent, this.frequency * 1000); 
  *) 
  * Then, this.onTimeoutEvent approaches to the implementation of the failure, because it can not be accessed this.currentlyExecuting attributes. 
  * The use of a bind future, the method can find this right, which is the current PeriodicalExecuter examples. 
  * / 
  Var PeriodicalExecuter = Class.create (); 
  PeriodicalExecuter.prototype = ( 
  Initialize: function (callback, frequency) ( 
  This.callback = callback; 
  This.frequency = frequency; 
  This.currentlyExecuting = false; 

  This.registerCallback (); 
  ) 

  RegisterCallback: function () ( 
  SetTimeout (this.onTimerEvent.bind (this), this.frequency * 1000); 
  ) 

  OnTimerEvent: function () ( 
  If (! This.currentlyExecuting) ( 
  Try ( 
  This.currentlyExecuting = true; 
  This.callback (); 
  Finally () 
  This.currentlyExecuting = false; 
  ) 
  ) 

  This.registerCallback (); 
  ) 
  ) 

  /*------------------------------------------------ --------------------------*/ 

  / ** 
  * This function on the Ruby.    I think it has two main role 
  * 1. Probably document.getElementById (id) of the most simplified call. 
  * For example: $ ( "aaa") will return to the object on aaa 
  * 2. Been targeted array 
  * For example: $ ( "aaa", "bbb"), including a return to id "aaa" and "bbb" two input controls an array of objects. 
  * / 
  $ Function () ( 
  Var elements = new Array (); 

  For (var i = 0; i <arguments.length; i + +) ( 
  Var Element [i] = arguments; 
  If (typeof element == 'string') 
  Element = document.getElementById (element); 

  If (arguments.length == 1) 
  Return element; 

  Elements.push (element); 
  ) 

  Return elements; 
  ) 

  Ajax:: prototype.js prototype source Explanation of the [reproduced] 
  / ** 
  * Ajax object definition, static method getTransport method returns an object XMLHttp 
  * / 
  = (Var Ajax 
  GetTransport: function () ( 
  Return Try.these ( 
  Function () (return new ActiveXObject ( 'Msxml2.XMLHTTP')), 
  Function () (return new ActiveXObject ( 'Microsoft.XMLHTTP')), 
  Function () (return new XMLHttpRequest ()) 
  ) | | False; 
  ) 

  EmptyFunction: function () () 
  ) 

  / ** 
  * I think that at this time the object Ajax played the role of namespace. 
  * Ajax.Base statement as a basis for the type of person 
  * Ajax.Base did not use Class.create () method to create, I think, that the author does not want to be Ajax.Base examples of the users. 
  * Author in other types of objects in a statement, it will be inherited from. 
  * Like java in the private abstract class 
  * / 
  Ajax.Base = function () (); 
  Ajax.Base.prototype = ( 
  / ** 
  * Extend (see the definition of prototype.js) is the use of refreshing people 
  * Options first set default attributes, and then extend parameter object, then the parameter object also has the properties of the same name, then override the default attribute values. 
  * If I think the realization of this writing, it should be similar to the following: 
  SetOptions: function (options) ( 
  This.options.methed = options.methed? Options.methed: 'post'; 
..........
  ) 
  I think many times, java limit js creativity. 
  * / 
  SetOptions: function (options) ( 
  This.options = ( 
  Method: 'post' 
  Asynchronous: true, 
  Parameters:'' 
  ). Extend (options | | ()); 
  ) 
  ) 

  / ** 
  * Ajax.Request Packaging XmlHttp 
  * / 
  Ajax.Request = Class.create (); 

  / ** 
  * Definition of the four events (state), the reference http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp 
  * / 
  Ajax.Request.Events = 
  [ 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; 

  / ** 
*
  * / 
  Ajax.Request.prototype = (new Ajax.Base ()). Extend (( 
  Initialize: function (url, options) ( 
  This.transport = Ajax.getTransport (); 
  This.setOptions (options); 

  Try ( 
  If (this.options.method == 'get') 
  url + = 'a' + +'&_='; this.options.parameters 

  / ** 
  * Here seem forced to use the asynchronous mode, and not in accordance with the value of this.options.asynchronous 
  * / 
  This.transport.open (this.options.method, url, true); 

  / ** 
  * Here's the XmlHttp each step in the process of transmission of the callback function 
  * / 
  If (this.options.asynchronous) ( 
  This.transport.onreadystatechange = this.onStateChange.bind (this); 
  SetTimeout ((function () (this.respondToReadyState (1))). Bind (this), 10); 
  ) 

  This.transport.setRequestHeader ( 'X-Requested-With', 'XMLHttpRequest'); 
  This.transport.setRequestHeader ( 'X-Prototype-Version', Prototype.Version); 

  If (this.options.method == 'post') ( 
  This.transport.setRequestHeader ( 'Connection', 'close'); 
  This.transport.setRequestHeader ( 'Content-type', 
  'Application / x-www-form-urlencoded'); 
  ) 

  This.transport.send (this.options.method == 'post'? 
  This.options.parameters +'&_=': null); 

  ) Catch (e) ( 
  ) 
  ) 

  OnStateChange: function () ( 
  Var readyState = this.transport.readyState; 
  / ** 
  * Loading state if not, call callback function 
  * / 
  If (readyState! = 1) 
  This.respondToReadyState (this.transport.readyState); 
  ) 

  / ** 
  * Callback function defined in the this.options attributes, such as: 
  Var option = ( 
  OnLoaded: function (req) {...}; 
......
  ) 
  New Ajax.Request (url, option); 
  * / 
  RespondToReadyState: function (readyState) ( 
  Var event = Ajax.Request.Events [readyState]; 
  (This.options [ 'on' + event] | | Ajax.emptyFunction) (this.transport); 
  ) 
  )); 

  / ** 
  * Ajax.Updater html for a binding element and the return value of XmlHttp call.    And the buffalo similar bind. 
  * If options in the insertion (from dom.js) object, the insertion can be inserted to provide more control. 
  * / 
  Ajax.Updater = Class.create (); 
  Ajax.Updater.prototype = (new Ajax.Base ()). Extend (( 
  Initialize: function (container, url, options) ( 
  This.container = $ (container); 
  This.setOptions (options); 

  If (this.options.asynchronous) ( 
  This.onComplete = this.options.onComplete; 
  This.options.onComplete = this.updateContent.bind (this); 
  ) 

  This.request = new Ajax.Request (url, this.options); 

  If (! This.options.asynchronous) 
  This.updateContent (); 
  ) 

  UpdateContent: function () ( 
  If (this.options.insertion) ( 
  New this.options.insertion (this.container, 
  This.request.transport.responseText); 
  Else () 
  This.container.innerHTML = this.request.transport.responseText; 
  ) 

  If (this.onComplete) ( 
  SetTimeout ((function () (this.onComplete (this.request))). Bind (this), 10); 
  ) 
  ) 
  )); 
  Ajax:: prototype.js prototype source Explanation of the three [reproduced] 
  / ** 
  * Targets for page elements of the tool to provide some simple static methods 
  * / 
  = (Var Field 
  / ** 
  * Removal of the object parameter values used 
  * / 
  Clear: function () ( 
  For (var i = 0; i <arguments.length; i + +) 
  ($ Arguments [i]). Value =''; 
  ) 

  / ** 
  * Parameters used to access object focus 
  * / 
  Focus: function (element) ( 
  $ (Element). Focus (); 
  ) 

  / ** 
  * Object invoke parameter value judgement whether the air, such as air, and returns false, contrary true 
  * / 
  Present: function () ( 
  For (var i = 0; i <arguments.length; i + +) 
  If (($ arguments [i]). Value =='') return false; 
  Return true; 
  ) 

  / ** 
  * Parameters used to select targets 
  * / 
  Select: function (element) ( 
  $ (Element). Select (); 
  ) 

  / ** 
  * The parameters used to edit the object in the state 
  * / 
  Activate: function (element) ( 
  $ (Element). Focus (); 
  $ (Element). Select (); 
  ) 
  ) 

  /*------------------------------------------------ --------------------------*/ 

  / ** 
  * Form Tools 
  * / 
  = (Var Form 
  / ** 
  * Will form elements of the sequence into QueryString value in the form of portfolio 
  * / 
  Serialize: function (form) ( 
  Var elements = Form.getElements ($ (form)); 
  Var queryComponents = new Array (); 

  For (var i = 0; i <elements.length; i + +) ( 
  Var queryComponent = Form.Element.serialize (elements [i]); 
  If (queryComponent) 
  QueryComponents.push (queryComponent); 
  ) 

  Return queryComponents.join ('&'); 
  ) 

  / ** 
  * Get all the elements of the form object 
  * / 
  GetElements: function (form) ( 
  Form = $ (form); 
  Var elements = new Array (); 

  For (tagName in Form.Element.Serializers) ( 
  Var tagElements = form.getElementsByTagName (tagName); 
  For (var j = 0; j <tagElements.length; j + +) 
  Elements.push (tagElements [j]); 
  ) 
  Return elements; 
  ) 

  / ** 
  * Form elements will be designated under the state can not be used 
  * / 
  Disable: function (form) ( 
  Var elements = Form.getElements (form); 
  For (var i = 0; i <elements.length; i + +) ( 
  Var element [i] = elements; 
  Element.blur (); 
  Element.disable = 'true'; 
  ) 
  ) 

  / ** 
  * To form of a non-hidden and types available in the state was the focus of the elements 
  * / 
  FocusFirstElement: function (form) ( 
  Form = $ (form); 
  Var elements = Form.getElements (form); 
  For (var i = 0; i <elements.length; i + +) ( 
  Var element [i] = elements; 
  If (element.type! = 'Hidden' & &! Element.disabled) ( 
  Field.activate (element); 
  Break; 
  ) 
  ) 
  ) 

  / * 
  * Reset Form 
  * / 
  Reset: function (form) ( 
  $ (Form). Reset (); 
  ) 
  ) 

  / ** 
  * Form elements Tools 
  * / 
  Form.Element = ( 
  / ** 
  * Return to form element to the value of the sequence encoded URL again the value of 
  * / 
  Serialize: function (element) ( 
  Element = $ (element); 
  Var method = element.tagName.toLowerCase (); 
  Var parameter = Form.Element.Serializers [method] (element); 

  If (parameter) 
  Return encodeURIComponent (parameter [0]) + '=' + 
  EncodeURIComponent (parameter [1]); 
  ) 

  / ** 
  * Return to form elements of the sequence of 
  * / 
  GetValue: function (element) ( 
  Element = $ (element); 
  Var method = element.tagName.toLowerCase (); 
  Var parameter = Form.Element.Serializers [method] (element); 

  If (parameter) 
  Return parameter [1]; 
  ) 
  ) 

  / ** 
  * Prototype of the so-called sequence of the form is actually the name and will be combined into an array of 
  * / 
  Form.Element.Serializers = ( 
  Input: function (element) ( 
  Switch (element.type.toLowerCase ()) ( 
  Case 'hidden': 
  Case 'password': 
  Case 'text': 
  Return Form.Element.Serializers.textarea (element); 
  Case 'checkbox': 
  Case 'radio': 
  Return Form.Element.Serializers.inputSelector (element); 
  ) 
  Return false; 
  ) 

  InputSelector: function (element) ( 
  If (element.checked) 
  Return [element.name, element.value]; 
  ) 

  Textarea: function (element) ( 
  Return [element.name, element.value]; 
  ) 

  / ** 
  * Evidently, does not support the check box (multiple-select) 
  * / 
  Select: function (element) ( 
  Var index = element.selectedIndex; 
  Var value = element.options [index]. Value | | element.options [index]. Text; 
  Return [element.name, (index> = 0)? Value:'']; 
  ) 
  ) 

  /*------------------------------------------------ --------------------------*/ 

  / ** 
  * Form.Element.getValue may be frequently used, so do a quick quote 
  * / 
  Var $ F = Form.Element.getValue; 

  /*------------------------------------------------ --------------------------*/ 

  / ** 
  * Abstract.TimedObserver is useless Class.create () to create, and the same should be the intention Ajax.Base 
  * Abstract.TimedObserver the name implies, is designed to use the Observer to track designation form elements, 
  When the form element * changes in the value of time, on the implementation of callback function 
*
  * I would like to register with the Observer onchange event similar to the differences in the elements onchange event when it lost focus excited. 
  * Onpropertychange with the same incident also similar, but it is only concerned about the value of the form elements change, but also provides timeout control. 
*
  * In addition, the Observer about the benefits and more in the object-oriented, and can dynamically change the callback function, which registered have to be flexible than some. 
  * Observer should be competent dynamic data validation, or more related drop-down list of options linked etc. 
*
  * / 
  Abstract.TimedObserver = function () () 

  / ** 
  * The design and PeriodicalExecuter, bind method is to achieve the core 
  * / 
  Abstract.TimedObserver.prototype = ( 
  Initialize: function (element, frequency, callback) ( 
  This.frequency = frequency; 
  This.element = $ (element); 
  This.callback = callback; 

  This.lastValue = this.getValue (); 
  This.registerCallback (); 
  ) 

  RegisterCallback: function () ( 
  SetTimeout (this.onTimerEvent.bind (this), this.frequency * 1000); 
  ) 

  OnTimerEvent: function () ( 
  Var value = this.getValue (); 
  If (this.lastValue! = Value) ( 
  This.callback (this.element, value); 
  This.lastValue = value; 
  ) 

  This.registerCallback (); 
  ) 
  ) 

  / ** 
  * Form.Element.Observer and Form.Observer fact is the same 
  * Form.Observer is not used to track the entire form, I would like to write about is to reduce (the Ruby This is a design principle) 
  * / 
  Form.Element.Observer = Class.create (); 
  Form.Element.Observer.prototype = (new Abstract.TimedObserver ()). Extend (( 
  GetValue: function () ( 
  Return Form.Element.getValue (this.element); 
  ) 
  )); 

  Form.Observer = Class.create (); 
  Form.Observer.prototype = (new Abstract.TimedObserver ()). Extend (( 
  GetValue: function () ( 
  Return Form.serialize (this.element); 
  ) 
  )); 
  Ajax:: prototype.js prototype source Explanation of the four [reproduced] 
  / ** 
  * Based on the class attribute of the object by name, the array support multiple class 
*
  * / 
  Document.getElementsByClassName = function (className) ( 
  Var children = document.getElementsByTagName ('*') | | document.all; 
  Var elements = new Array (); 

  For (var i = 0; i <children.length; i + +) ( 
  Var child [i] = children; 
  Var classNames = child.className.split ( ''); 
  For (var j = 0; j <classNames.length; j + +) ( 
  If (classNames [j] == className) ( 
  Elements.push (child); 
  Break; 
  ) 
  ) 
  ) 

  Return elements; 
  ) 

  /*------------------------------------------------ --------------------------*/ 

  / ** 
  * Element as a java tool category, mainly to hide / show / elimination of targets, as well as the simple object access attributes. 
*
  * / 
  = (Var Element 
  Toggle: function () ( 
  For (var i = 0; i <arguments.length; i + +) ( 
  Var element = ($ arguments [i]); 
  Element.style.display = 
  (Element.style.display == 'none'?'': 'None'); 
  ) 
  ) 

  Hide: function () ( 
  For (var i = 0; i <arguments.length; i + +) ( 
  Var element = ($ arguments [i]); 
  Element.style.display = 'none'; 
  ) 
  ) 

  Show: function () ( 
  For (var i = 0; i <arguments.length; i + +) ( 
  Var element = ($ arguments [i]); 
  Element.style.display =''; 
  ) 
  ) 

  Remove: function (element) ( 
  Element = $ (element); 
  Element.parentNode.removeChild (element); 
  ) 

  GetHeight: function (element) ( 
  Element = $ (element); 
  Return element.offsetHeight; 
  ) 
  ) 

  / ** 
  * Element.toggle make a symbolic link is probably consider compatibility 
  * / 
  Var Toggle = new Object (); 
  Toggle.display = Element.toggle; 

  /*------------------------------------------------ --------------------------*/ 

  / ** 
  * Dynamic content inserted the realization of the MS Jscript implementation of the object has a method insertAdjacentHTML (http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp) 
  * Here is an object forms of packaging. 
  * / 
  Abstract.Insertion = function (adjacency) ( 
  This.adjacency = adjacency; 
  ) 

  Abstract.Insertion.prototype = ( 
  Initialize: function (element, content) ( 
  This.element = $ (element); 
  This.content = content; 

  If (this.adjacency & this.element.insertAdjacentHTML) ( 
  This.element.insertAdjacentHTML (this.adjacency, this.content); 
  Else () 
  / ** 
  * Gecko does not support insertAdjacentHTML methods, but they can use the following code to replace 
  * / 
  This.range = this.element.ownerDocument.createRange (); 
  / ** 
  * If initializeRange definition of the method, implemented, and here is the definition of an abstract method initializeRange 
  * / 
  If (this.initializeRange) this.initializeRange (); 
  This.fragment = this.range.createContextualFragment (this.content); 

  / ** 
  * InsertContent is an abstract method, subclass must be achieved 
  * / 
  This.insertContent (); 
  ) 
  ) 
  ) 

  / ** 
  * Prototype has deepened my understanding, that is how to write js follow Don't Repeat Yourself (DRY) Principle 
  * Above Abstract.Insertion as an abstract category, called the definition of an abstract method initializeRange 
  * Var Insertion = new Object () to establish a namespace 
  * Insertion.Before | Top | Bottom | After four java is like static in the four internal category, and they were inherited from Abstract.Insertion, and realized initializeRange methods. 
  * / 
  Var Insertion = new Object (); 

  Insertion.Before = Class.create (); 
  Insertion.Before.prototype = (new Abstract.Insertion ( 'beforeBegin')). Extend (( 
  InitializeRange: function () ( 
  This.range.setStartBefore (this.element); 
  ) 

  / ** 
  * Will be inserted to the designated nodes in front of the designated peer nodes 
  * / 
  InsertContent: function () ( 
  This.element.parentNode.insertBefore (this.fragment, this.element); 
  ) 
  )); 

  Insertion.Top = Class.create (); 
  Insertion.Top.prototype = (new Abstract.Insertion ( 'afterBegin')). Extend (( 
  InitializeRange: function () ( 
  This.range.selectNodeContents (this.element); 
  This.range.collapse (true); 
  ) 

  / ** 
  * Will be inserted to the designated node before the first sub-node, the node was content into the first sub-node 
  * / 
  InsertContent: function () ( 
  This.element.insertBefore (this.fragment, this.element.firstChild); 
  ) 
  )); 

  Insertion.Bottom = Class.create (); 
  Insertion.Bottom.prototype = (new Abstract.Insertion ( 'beforeEnd')). Extend (( 
  InitializeRange: function () ( 
  This.range.selectNodeContents (this.element); 
  This.range.collapse (this.element); 
  ) 

  / ** 
  * Will be inserted to the designated final node, the node was content into the final of a node 
  * / 
  InsertContent: function () ( 
  This.element.appendChild (this.fragment); 
  ) 
  )); 

  Insertion.After = Class.create (); 
  Insertion.After.prototype = (new Abstract.Insertion ( 'afterEnd')). Extend (( 
  InitializeRange: function () ( 
  This.range.setStartAfter (this.element); 
  ) 

  / ** 
  * Will be inserted to the designated nodes behind at the same level with the designated nodes 
  * / 
  InsertContent: function () ( 
  This.element.parentNode.insertBefore (this.fragment, 
  This.element.nextSibling); 
  ) 
  )); 

  Ajax:: prototype.js prototype source Explanation of the five [reproduced] 
  There are also two prototype source document effects.js compat.js not paste out.    They are not commonly used, do Huasao example effects.js see the effect is not bad, but there are not too many fresh code things. 

  Needs to be pointed out is that 
  Compat.js Funcation.prototype.apply in the realization of two errors (spelling is wrong), I respectively paste out, we compare it to clear. 

  Other articles Links 

  Http://www.zeali.net/blog/entry.php?id=296