dojo,jquery,mootools三种框架实现的ajax效果

  经常在微BLOG上,或者象tudou,ku6等视频网站上，看到"查看评论"的按钮,点后
就显示列表，是AJAX效果的,找到老外的一篇文,讲这个实现:
http://davidwalsh.name/twitter-button

摘录如下:
先做好按钮
<FORM class=follow-form action=twitter-follow.php method=post>
<INPUT type=hidden value=123456 name=followID>
<BUTTON class="btn follow" title=123456 type=submit value="Actions">
    <I></I><SPAN>follow</SPAN>
  </BUTTON>
</FORM>
之后是样式
/* twitter button and its children */
2button.btn {
3  -moz-border-radius:4px;
4  -webkit-border-radius:4px;
5  background-attachment:scroll;
6  background-color:#ddd;
7  background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
8  background-position:0 0;
9  background-repeat:repeat-x;
10  border:1px solid #ddd;
11  border-bottom:1px solid #ccc;
12  color:#333;
13  cursor:pointer;
14  font-family:"Lucida Grande",sans-serif;
15  font-size:11px;
16  line-height:14px;
17  padding:4px 8px 5px 8px;
18  text-shadow:1px 1px 0 #fff;
19  vertical-align:top;
20}
21button.btn:hover {
22  border:1px solid #999;
23  border-bottom-color:#888;
24  color:#000;
25  background-color:#d5d5d5;
26  background-position:0 -6px;
27}
28button.btn:active {
29  background-image:none !important;
30  text-shadow:none !important;
31}
32     
33button.btn i {
34  background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
35  background-position:-176px -32px;
36  background-repeat:no-repeat;
37  display:inline-block;
38  height:13px;
39  margin-right:5px;
40  width:15px;
41}
42button.btn i.active  { background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }
43
44/* properties for the element that is generated *after* following */
45span.following  {  background:#ffd; padding:5px 10px; }
46span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; }

首先是mootools:
* with mootools */
2window.addEvent('domready',function() {
3  /* fetch elements */
4  $$('form.follow-form').each(function(form) {
5    /* stop form event */
6    form.addEvent('submit',function(e) {
7      /* stop event */
8      if(e) e.stop();
9      /* send ajax request */
10      var i = form.getElement('i');
11      new Request({
12        url: 'twitter-follow.php',
13        method: 'post',
14        data: {
15          followID: form.getElement('input').value
16        },
17        onRequest: function() {
18          i.addClass('active');
19        },
20        onSuccess: function() {
21          var button = form.getElement('button');
22          button.setStyle('display','none');
23          new Element('span',{
24            html: '<SPAN></SPAN>Following!',
25            'class': 'following'
26          }).inject(button,'after');
27        },
28        onComplete: function() {
29          i.removeClass('active');
30        }
31      }).send();
32    });
33  });
34});

jquery的:
// Idiomatic jQuery by Doug Neiner
2jQuery(function ($) {
3  /* fetch elements and stop form event */
4  $("form.follow-form").submit(function (e) {
5    /* stop event */
6    e.preventDefault();
7    /* "on request" */
8    $(this).find('i').addClass('active');
9    /* send ajax request */
10    $.post('twitter-follow.php', {
11      followID: $(this).find('input').val()
12    }, function () {
13      /* find and hide button, create element */
14      $(e.currentTarget)
15        .find('button').hide()
16        .after('<span class="following"><span></span>Following!</span>');
17    });
18  });
19});


dojo:
/* when the DOM is ready */
2dojo.ready(function() {
3  /* fetch elements */
4  dojo.query('form.follow-form').forEach(function(form) {
5    /* stop form event */
6    dojo.connect(form,'onsubmit',function(e) {
7      /* stop event */
8      dojo.stopEvent(e);
9      /* active class */
10      dojo.query('i',form).addClass('active');
11      /* get button */
12      var button = dojo.query('button',form)[0];
13      /* ajax request */
14      dojo.xhrPost({
15        form: form,
16        load: function() {
17          dojo.style(button,'display','none');
18          dojo.create('span',{
19            innerHTML: '<SPAN></SPAN>Following',
20            className: 'following'
21          },button,'after');
22        }
23      });
24    });
25  });
26});