Mensajes cuando se hace una llamada usando Ajax

--- tomado de http://pastie.org/818221 visto en la lista de correo de [Proto-Scripty]

Ajax.Responders.register({
  onCreate: function() {
    new Effect.Appear('ajax_loader', { duration: 0.3, to: 0.5 });
    },
  onComplete: function(request, transport, json) {
    if (0 == Ajax.activeRequestCount) {
      new Effect.Fade('ajax_loader', { duration: 0.3, from: 0.5 });
    }
    if(!request.success()) {
      var errorMapping = $H({
        400: ['Bad Request', 'The request contains bad syntax or cannot be fulfilled.'],
        401: ['Authorization Required', 'You need to authenticate to access this page.'],
        403: ['Forbidden', 'The request was a legal request, but the server is refusing to respond to it.'],
        404: ['Page Not Found', 'The requested resource could not be found.'],
        405: ['Method Not Allowed', 'A request was made of a resource using a request method not supported by that resource; for example, using GET on a form which requires data to be presented via POST, or using PUT on a read-only resource.'],
        406: ['Not Acceptable', 'The action you tried to perform on this resource was considered unacceptable.'],
        415: ['Unsupported Media Type', 'The media type you are requesting is unsupported.'],
        422: ['Unprocessable Entity', 'The request was well-formed but was unable to be followed due to semantic errors.'],
        500: ['Application Error', 'An error occurred in the application code. Report sent.'],
        503: ['Service not available', 'The webserver did not respond to the request.'],
        505: ['HTTP Version Not Supported', 'The requested version is not available on this server.']
      });

      var errorMessage = errorMapping.get(transport.status) || ['Unknown Error', 'An error occurred, but could not be determined correctly.'];

      if (transport.responseJSON && transport.responseJSON.error)
         errorMessage = [transport.responseJSON.error.title, transport.responseJSON.error.message]

      var notifyUser = new GrowlNotifier({
        title: errorMessage[0],
        message: errorMessage[1],
        image: "/images/elements/growl_warning.png",
        type: 'error'
      });
    }
  }
});

Errores comunes con Prototype

-- Todamo de este blog: http://www.pablasso.com/

Errores comunes con Prototype

1.

Modo Incorrecto

document.getElementById('foo')

Modo Correcto

$('foo')

El operador $ es lo mas esencial de Prototype, de ahí viene toda su magia, utilizalo!

2.

Modo Incorrecto

var woot = document.getElementById('bar').value
var woot = $('bar').value

Modo Correcto

var woot = $F('bar')

El operador $F es un gran atajo para obtener valores de elementos.

3.

Modo Incorrecto

$('footer').style.height = '100px';
$('footer').style.background = '#ffc';

Modo Correcto

ver como texto plano

JAVASCRIPT:

1. $('footer').setStyle(
2. {
3. height: '100px',
4. background: '#ffc'
5. }
6. )

Olvidate de problemas de bugs sobre diferentes navegadores si utilizas el metodo setStyle()

4.

Modo Incorrecto

$('tusuperelemento').innerHTML = 'algun contenido'

Modo Correcto

$('tusuperelemento').update('algun contenido')

Podras decir que es casi la misma, pero no opinaras lo mismo cuando necesites concatenar funciones.

5.

Modo Incorrecto

new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

Modo Correcto

ver como texto plano

JAVASCRIPT:

1. new Ajax.Request('ninja.php',
2. {
3. parameters:
4. {
5. weapon1: 'foo',
6. weapon2: 'bar'
7. }
8. }
9. )

Escribe código limpio, tu cerebro te lo agradecerá.

6.

Modo Incorrecto

ver como texto plano

JAVASCRIPT:

1. new Ajax.Request('blah.php',
2. {
3. method: 'POST',
4. asynchronous: true,
5. contentType: 'application/x-www-form-urlencoded',
6. encoding: 'UTF-8',
7. }
8. )

Modo Correcto

new Ajax.Request('blah.php')

Todos esos parámetros ya son defaults, ¿Para que repetirlos?.

7.

Modo Incorrecto

Event.observe('myContainer', 'click', doSomeMagic)

Modo Correcto

$('myContainer').observe('click', doSomeMagic)

Es mas fácil concatenar si escoges el segundo, pero aquí es cuestión de gustos, escoge el sabor que mas te guste.

8.

Modo Incorrecto

ver como texto plano

JAVASCRIPT:

1. $('div.hidden').each(function(el)
2. {
3. el.show();
4. }
5. )

Modo Correcto

$$('div.hidden').invoke('show')

Invoke es muy útil, piensa en el como en un atajo cuando necesitas asignar valores iguales a todos tus elementos sin necesidad de iterar sobre ellos.

9.

Modo Incorrecto

ver como texto plano

JAVASCRIPT:

1. $('div.collapsed').each(function(el)
2. {
3. el.observe('click', expand);
4. }
5. )

Modo Correcto

$$('div.collapsed').invoke('observe', 'click', expand)

Y también puede ser usado para manejo de eventos, muy practico!

10.

Modo Incorrecto

$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);

Modo Correcto

ver como texto plano

JAVASCRIPT:

1. $('input.date')
2. .invoke('observe', 'focus', onFocus)
3. .invoke('observe', 'blur', onBlur)

¿Para que abusar del operador $$ dos veces si podemos concatenar?

11.

Modo Incorrecto

ver como texto plano

JAVASCRIPT:

1. $('productTable').innerHTML =
2. $('productTable').innerHTML +
3. '' + productId + ' '
4. + productName + ''
5. + productId + ' ' + productPrice +
6. ''

Modo Correcto

ver como texto plano

JAVASCRIPT:

1. var rowTemplate = new Template('#{id} #{name}#{id} #{price}');
2. $('productTable').insert(
3. rowTemplate.evaluate(
4. {
5. id: productId,
6. name: productName,
7. price: productPrice
8. }
9. )
10. )
11. )

Este tip en especial es una joya, con Prototype podemos hacer templates, evitando de esta manera enormes plastas de código. Me confieso culpable de no haber utilizado esto antes.

Enlace | How well do you know prototype