Ajax development skills

ArticleDirectory

• 1.1 favorites $ Series
• 1.2 traditional Ajax
• 1.3 form functions are also good
• 1.4 event series

1.1 favorites $ Series

My favorite is that $ {"bookdiv"} is equivalent to the generic document. getelementbyid ("bookdiv ")

It is worth noting that the same syntax as CSS for batch selection $ (),

1.2 traditional Ajax

The traditional URL-based Ajax functions are simple and practical.

New Ajax. Updater ('bookdiv ', "Foo . Jsp " );

In addition, periodicalupdater that can periodically execute Ajax.

1.3 form functions are also good

Form. serialize converts the values of all input objects in form into a URL string to convert form to URL get-based Ajax submission. The most typical example of submitting form using Ajax is as follows:

  < Form Action = " /Action/here " Method = " Post "  
Onsubmi = " New Ajax. Updater ('div _ to_be_updated ','/Action/here ', {parameters: form. serialize (this )});
Return false; " >  

In addition, functions such as form. focusfirstelement and form. getinputs are also very useful.

1.4 event series

In addition to the observe mode described later, there are also the following event functions that ensure compatibility with IE and FF:

1. event. element (event) to find the element that triggers the event.

2. event. findelement (event, tagname), search for the first element in the event response chain in the DOM tree that matches the tagname.

3. pointerx (event), pointery (event), etc.

Some standard keycode is also defined, see: http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event

1.5 Ruby Style

1. Cyclic Functions

Elements. Each ( Function (Element ){
Alert (element );
});

2. Indefinite Parameters

New Ajax. Updater ('mydiv ',' / Foo / Bar ', {asynchronous: True });
2. The observe mode reaches the search engine friendly

In the observe mode, the connection is still written in the form of <a href = "foo. jsp">, and the observe is used to listen for the onclick event. In this way, when a search engine accesses a traditional URL, the user will be converted to the Ajax Effect of The onclick event by observe when using IE.

See/home/index. jsp in springside for details-use selector to find the link to be processed (a), add an observer for each link in a loop, add a handle function for the click event.
 

$ ('Div # left_books * A [href] '). Each ( Function (Element ){
Event. Observe (element, 'click', handlercilckevent, False );
});

Function Handlercilckevent (event ){
VaR Element = Event. element (event );
New Ajax. Updater ('bookdiv ', element. href );
Event. Stop (event );
$ ('Bookdiv '). Show ();
}3. dombuilder of script. aculo. Us

Script. aculo. Us syntax is a concise builder. In contrast, W3C Dom builder syntax is a nightmare. When HTML fragments are not complex, if jstemplate is used to crack mosquitoes, script. aculo. Us builder is enough.
Builder has a ruby style. Please refer to the following sentence:

Foo = Builder. node ('A', {href: " Foo. jsp " }, Categorys [I]. Name)

1st parameters are of the element type, 2nd are optional attribbute, and 3rd are subnodes in the node.
If you want to replace it with W3C Dom function writing, it is good.

The following section is more obvious: generate objects directly based on the page order of the elements, rather than logically abstract objects like W3C Dom builder, and append them to the parent element.

Div = Builder. node ('div ', {classname: linkdiv },[
Builder. node ('A', {href: " Foo. jsp " }, Categorys [I]. Name)]
);

 

Of course, there is still no clear JS template, so builder is only used as HTML fragments for a very short time.