EstadoBeta

Este artículo fue publicado en 10/10/2006 a las 2:53 am y está archivado bajo Desarrollo, artículos, destacados, javascript. Puedes seguir esta discusión a través de su canal RSS 2.0. También puedes enviarlo a Digg para compartirlo con más lectores. Puedes dejar un comentario, o hacer un trackback desde tu propio sitio.

119 comentarios para “Prototype: Ajax”

1. wachunei Dice:
   10/10/2006 at 7:59 am

   ay me queda tanto por aprender…

2. Ismael Dice:
   10/10/2006 at 2:40 pm

   Wachunei, este artículo por tratar de ser completo puede parecer muy complejo. Baste con saber que si quieres cargar el contenido de una página o script dentro de un elemento mediante Ajax, puedes hacer esto:

   
   <a hfer="/contenido-externo.php" onClick="new Ajax.Updater( 'contenido', '/contenido-externo.php' );return false;">Link Ajax!</a>
   
   <div id="contenido"> ... </div>
   
   

3. meneame.net Dice:
   10/11/2006 at 8:16 pm

   Uso de Ajax con Prototype.js

   Completo artículo en español sobre la implementación de Ajax con la librería Javascript Prototype.js, con ejemplos y código.

4. defmay { Primeros Pasos con AJAX } Dice:
   10/11/2006 at 11:06 pm

   […] jQuery tiene un buen soporte para AJAX, pero el enfoque que le da Prototype me parece mucho mas sencillo y útil para quien está empezando y sobretodo para los que venimos de una sintaxis simple como la de PHP. Hoy me tope con un muy buen artículo de EstadoBeta que explica muy claramente como dar los primeros pasos en está tecnología. […]

5. vladimir prieto Dice:
   10/12/2006 at 8:52 am

   excelente! preciso y conciso. me gustó.

   un detalle/pregunta/duda.

   tengo entendido que el uso de get y post tienen otra gran diferencia además de las que mencionas. get no maeneja tanta informacion como post, de hecho me pasó en una oportunidad que al cambiar de get a post me funcionó el envío de un formulario gigante, cosa que con get no me funcionaba.

   favor corregir en caso que me equivoque.

6. Ismael Dice:
   10/12/2006 at 1:59 pm

   Vladimir: en teoría no hay límite para lo que puedes enviar por GET, pero eso puede depender tanto del browser como del servidor. Dicho esto, GET sólo debiera ser usado para obtener información del servidor (por eso el nombre “get”). Para eso usualmente no se necesita demasiada información en los parámetros (lo común es incluir un identificador del elemento que quieres obtener, por ejemplo “/index.php?id=234″).
   POST envía los datos en un header separado al servidor, y se usa para modificar datos en el servidor (actualizar, crear, eliminar). Recuerda que los parámetros enviados por GET quedan en el historial del browser y son accesibles por los robots de los buscadores. Nadie quiere una URL como “/index.php?accion=eliminar&id=234″ tan fácil de encontrar!

   En este (largo y en inglés) documento de la W3C puedes encontrar más información sobre el tema.

7. Hector Vergara R. Dice:
   10/13/2006 at 11:07 am

   Isma: en efecto, los datos por POST son enviados en el body del request, no en un header.

   Ej.
   
GET /index.php?var1=bla&var2=blo&var3=bli HTTP/1.0
Host: www.blablabla.com


   
POST /index.php HTTP/1.0
Host: www.blablabla.com
Content-Length: (largo del texto de abajo, incluidos los newlines)


var1=bla&var2=blo&var3=bli


8. Rodrigo Dice:
   10/20/2006 at 1:02 pm

   Excelente artículo! simplemente genial.

9. amor Dice:
   10/24/2006 at 11:54 am

   Estoy teniendo problemas para descargar la libreria prototype de http://prototype.conio.net/ ¿saben de algún otro sitio que esté actualizada?
   Un saludo a todos, gracias

10. farlopex Dice:
    10/25/2006 at 4:17 am

    Magnífico artículo!

    Yo añadiría a los callbacks el evento onLoading

    La diferencia entre onSuccess y onComplete, creo que es la siguiente:
- onSuccess, se lanza cuando la operación ha sido correcta.
- onComplete, se lanza cuando la oparación ha terminado.

    Podemos decir que el evento onSuccess es el contrario de onFailure.

    OTROS EVENTOS:

    - on404, claro ¿no?
- onLoading, similar a onCreate. ¿diferencias?

    ES MUY INTERESANTE…

    El objeto new Ajax.PeriodicalUpdater(’micapa’, ‘datos.php’, {asynchronous:true, frequency:2}); para actualizar contenidos cada cierto tiempo de forma muy sencilla. Naturalmente, pueden utilizarse los callbacks

11. Ismael Dice:
    10/25/2006 at 8:59 am

    Farlopex: excelente aporte, muchas gracias!
    Claro, onComplete se dispara una vez terminada la transferencia (con o sin error). De hecho se puede hacer:

    
    onComplete: {success:funcExito, failure:funcError}
    
    

12. carlos Dice:
    10/25/2006 at 10:55 am

    hola

13. Rodrigo Dice:
    11/1/2006 at 6:05 pm

    Ismael: y qué pasa con el callback ‘onLoading’?? He probado tu forma de hacerlo con ‘Ajax.Responders.register( globalCallbacks );’ y me funciona mejor. Creo que si usas onLoading, tienes que usar onCreate y onComplete también. O no?

14. Godskyller Dice:
    11/10/2006 at 9:35 pm

    Ismael, muy buen articulo, te permite entrar rápidamente a AJAX sin mucho lio. Desafortunadamente lo encuentro despues de haber batallado un poco ….:(

    Aprovecho para preguntarte si conoces alguna forma que no sea tan talachera para llenar una tabla a partir de un Ajax.request… Por ejemplo.
    
function ajax_validaRegistro()
{
var url = '../ajaxProcesor';
var pars = "ID=REGISTRO";
pars += "&IDREG=" + $F('hidRegistro');
var myAjax = new Ajax.Request( url, { method: 'post', parameters: pars, onComplete: ajax_procesaRespuesta });
}


function ajax_procesaRespuesta(originalRequest)
{
//Recupera respuesta
var lsRegreso = originalRequest.responseText;
// En mi caso el resultado de la respuesta
//son varios campos separados por "|"
try
{
var laRegreso = lsRegreso.split("|");
//Generar DHTML Tabla Dinamica
}
catch(e){};

    }


15. giovanny Dice:
    11/16/2006 at 2:30 pm

    hola, estoy empezando a implementar AJAX, y pues no tengo muchos conocimientos en esto, pero tengo una pregunta/inquietud/duda/problema (de antemano disculpas si es muy tonto). La situacion es la siguiente: Tengo un formulario y tiene varios campos, pero tengo uno que es una identificacion de una persona(cedula), y necesito que al digitar en este campo un valor y perder el foco(onblur), me consulte en la BD para ver si existe registro de esta persona, en caso afirmativo mostrar los datos, pero en caso negativo, mostrar los campos vacios para que sean llenados. Al finalizar esto debe ser enviado la totalidad de los campos del formulario, y si esa persona no esta registrada en la BD entonces crearle el registro.

    espero que me alla echo entender. ¿puedo cambiar los campos dentro de un formulario con AJAX(agregar y quitar campos), y al enviarlos recibire la totalidad de los campos mostrados en pantalla?. si me entendieron y tienen una mejor forma de hacerlo, por favor diganmela, se los agradecere en el alma.

    gracias de antemano

16. Ezequiel Dice:
    11/17/2006 at 8:21 am

    Que me dicen de usar HTML_AJAX de pear conoces algo sobre el tema, o podrias guiarme sobre algun tutorial en español.

    ¿Cuales son las ventajas de prototype vs HTML_AJAX?

    Espero tus respuestas

17. david Dice:
    11/17/2006 at 11:07 am

    Excelente articulo sobre ajax, estoy estudiando utilizarlo para una aplicacion tipo juego multijugador. El juego seria el tipico de los barcos, y lo que quiero es que cuando un jugador señale en su tablero una casilla, esta se marque al instante en el tablero de su contrario. Alguien sabe si esto se puede hacer con AJAX?

    Gracias por vuestra ayuda.

18. Ismael Dice:
    11/17/2006 at 4:15 pm

    Godskyller:si lo que necesitas es sólo actualizar una tabla, es más sencillo y eficiente que el script que genera la respuesta Ajax simplemente genere el html para la tabla completa, y en tu página usas Ajax.Updater() para reemplazar la tabla completa por la que viene desde ajax, así:

    
/* EN HTML: */
<div id="contenidos“>
..Aquí va la tabla
</div>
/* EN javascript */
function actualiza(){
new Ajax.Updater(”contenidos“,”/genera-tabla.php”);
}


    Ajax.Updater se encarga de hacer el request al servidor y de inyectar en el div “contenidos” cualquier cosa que venga en la respuesta, en este caso la tabla completa.

    Relee este artículo para entender cómo enviar parámetros al servidor usando Ajax.Updater.

19. Ismael Dice:
    11/17/2006 at 4:17 pm

    PS: disculpen si no puedo responder las dudas de todos, estoy algo corto de tiempo. trataré de ir respondiendo de a poco. Por supuesto, si alguien tiene una solución para las inquietudes de otros comentaristas, por favor no duden en dejar su aporte aquí mismo!

20. giovanny Dice:
    11/19/2006 at 5:19 pm

    bueno, les pido disculpas por la pregunta que hice, ya resolvi ese problema, pero no utilizando prototype, de todas formas gracias por el interes, ahora el problema que tengo es que cuando llamo una pagina con AJAX, cosas como el calendario(utilizo la libreria calendar) producen eventos inesperados, en mozilla envia el formulario que contiene, y en ie no hace nada. si alguien ah tenido el mismo problema, por favor ayudeme o digame donde puedo conseguir ayuda o donde puedo buscar…. de nuevo gracias

21. Gonzalo Dice:
    11/22/2006 at 1:37 pm

    Antes que nada, muy buen articulo me ha ayudado un monton. Tengo una consulta que hacerles, puedo mediante ajax traer funciones javascript y que funcionen en la pagina “llamadora”.
    He probado de varias maneras y hasta ahora no pude hacerlo.
    Basicamente lo que quiero hacer es que una pagina llamadora, traiga mediante ajax, una lista de imagenes y unas funciones javascript para poder verlas.
    Espero se haya entendido. Gracias de antemano.

22. Ismael Dice:
    11/22/2006 at 1:53 pm

    Gonzalo: le puedes hacer un eval() al texto retornado por el servidor para que el browser lo interprete como javascript. De esa forma puedes disponer de las variables y funciones que vengan en ese texto.

    Por ejemplo, imaginemos que el servidor retorna lo siguiente:

    
    // un array de imágenes
    var imgs = [”img1.jpg”, “img2.jpg”, “img3.jpg”];
    
    // una función que retorna una img. del array
    function getImage(id){
        return imgs[id] ? imgs[id] : false;
    }
    
    
    

    Si usas Prototype para Ajax, puedes hacer lo siguiente:

    
    /*------- Procesa respuesta del servidor --------*/
    function procesa(request){
      // evalua la respuesta como JS
      eval(request.responseText);
      // …Ahora puedes usar el código generado por el server
      var img = getImage(0);
    }
    /*——- Llamada Ajax ———*/
    var a = new Ajax.Request(”generador.php”,{onComplete:procesa});
    
    
    

23. Ismael Dice:
    11/22/2006 at 2:04 pm

    Ezequiel: HTML_AJAX es una librería PHP. Ese tipo de librerías están pensadas para escribir procedimientos en el servidor (php) y “exportar” una interfaz para ese código como javascript (en el browser). Aunque no he usado HTML_AJAX, si conozco Sajax y, en mi opinión, esas librerías son más de lo que uno necesita para hacer la mayoría de las funcionalidades Ajax. Librerías de cliente como Prototype, Mootols o jQuery simplifican tanto el javascript necesario en el cliente (browser), que automáticamente la lógica necesaria en el servidor (php, asp, ruby, etc) se hace mucho más simple también.

24. jordi Dice:
    12/6/2006 at 6:29 am

    Pues nada.. a ver si me modernizo un poco..

25. Andrès Fuenzalida Dice:
    12/14/2006 at 12:30 pm

    Excelente!. con esto ya logre usar ajax en mis apps:D

26. Alexis Dice:
    12/28/2006 at 5:31 pm

    Alguien con experticia en Apache y Ajax me puede indicar por qué al momento de hacer una llamada ajax el status que me retorna es 500 (server error)?.
    Hay algo que es impreseindible que deba estar en las variables de ambiente del web server, necesito algún permiso especial en la carpeta de donde esté alojada la página (unix / cgi). El log de errores de apache no me dice nada que indique cómo o por qué se genera este error

27. Ismael Dice:
    12/28/2006 at 9:22 pm

    Alexis, probaste haciendo esa llamada normalmente a traves del browser? (poniendo la url en la barra de dirección del browser). Puede ser algo obvio, pero lo primero en ver si el problema es AJAX o el script en el servidor.

28. Alexis Dice:
    12/31/2006 at 7:22 pm

    Bueno, la verdad el problema me estaba dando con una implementación propia de AJAX sacado de otros tutoriales (desde cero) y hace un par de días lo implementé con la librería prototype y debo decir wuau , es lo más trivial del mundo.he quedado maravillado con la simpleza de su uso. De todas maneras gracias por darte el tiempo de responderme y debo decir que este sitio fue todo un descubrimiento a otros temas muy interesantes como el CSS y la diagramación de sitios web para desarrollo. con todo esto podré mejorar un 100% mis creaciones web. gracias y que tengas un Feliz Año (y a todos los lectores ).

29. alejandro Dice:
    1/4/2007 at 8:29 pm

    Hola, tengo un gran problema con Prototype que no he podido resolver, les comento:

    Tengo un formulario con textareas y checkboxes que envio atravez de ajax hacia guardar.php. El problema biene cuando guardo esos datos en una base, ya que me guarda los datos con caracteres extraños en donde hay acentos y eñes.
    Por ejemplo: “á é í ó ú” lo guarda como “á é í ó ú”

    El formulario es simple, onsubmit=”guardar(’abm/guardar.php’,'form1′); return false ”

    y el codigo en ajax que hace de transferencia:

    function guardar(url, formid){

    new Ajax.Request(url, {

    parameters : //parametros del formulario
    Form.serialize($(formid)),

    method : //metodo
    “post”,

    });

    }

    Si por ejemplo en el form escribo: caño y hago un alert de la serialización caño lo traduce a ca%C3%B1o… entonces lo envia a guardar que lo recibe y lo guarda en la base con el texto: caño

    Ya no se que mas probar, intente agregando:
    contentType: ‘application/x-www-form-urlencoded; charset=ISO-8859-1′,
    pero igualmente los datos se graban mal en la BD.

    Desde ya estaría muy agradecido por cualquier ayuda que me puedan dar…

30. Roberto Dice:
    1/10/2007 at 2:55 pm

    Hola como estan,

    Giovanny me gustaria saber como resolviste el problema que planteaste, al igual que tu yo estoy empezando a utilizar Ajax, si porfavor me puedes enviar la solucion al correo robertojavierpinto@hotmail.com o orientarme un poco te lo agradeceria mucho; de igual manera si otra persona posee la solucion. gracias de antemano……

31. ismael Dice:
    1/10/2007 at 9:25 pm

    Roberto, Giovanny: Con el evento onblur pueden gatillar la llamada Ajax que envía el valor del campo al servidor. Si el servidor valida con éxito, envía de vuelta el html con los nuevos campos, que son insertados en el formulario.

    HTML:

    
<fieldset>
<p>
<label for="ID">Identificación:</label>
<input type="text" id="ID" value="" onblur="new Ajax.Updater('nuevos-campos‘,’/consulta.php’,{parameters:’valor=’+this.value})” />
</p>
<div id=”nuevos-campos“>

    </div>
</fieldset>


    Por supuesto, no te olvides de incluír Prototype para que esto funcione!

32. Benjamin Dice:
    1/15/2007 at 12:21 pm

    Hola:
    Si alguien me pudiera ayudar se lo agradeceria de antemano. Primeramente estoy aprendiendo a utilizar ajax para ver si puedo mejorar mis paginas hechas con php, la pregunta que tengo es ¿Como ayuda ajax a agilizar una consulta a una base de datos y si podrian darme un ejemplo?

    La forma en que normal como hago esta consulta es mediante una sentencia sql y el resultado lo muestre en una tabla, el tiempo que se tarda en mostrar una lista de 3160 registros es de 10 min.Por favor ayudenme, Gracias…

33. Ismael Dice:
    1/17/2007 at 3:16 pm

    Benjamin: Ajax es Javascript, se ejecuta en el navegador y no tiene nada que ver con bases de datos o PHP. Ajax puede optimizar ligeramente el tiempo de carga si lo usas para cargar fragmentos pequeños de html dentro de una página ya cargada en el navegador (por ejemplo una tabla de resultados), pero sigue dependiendo del servidor la optimización de consultas a base de datos y generación de resultados en HTML.
    Dicho esto, por lo que cuentas te puedo sugerir (vehementemente!) que no hagas consultas taaaan grandes! Nadie puede digerir una tabla de 3160 registros. Lo que debieras hacer es dividir esos registros en varias páginas de pocos resultados cada uno (usando las sentencia LIMIT de SQL en tus consultas) o implementar un buscador que te permita ver menos resultados pero más relevantes.

34. Ismael Dice:
    1/17/2007 at 3:23 pm

    Ajejandro: muy probablemente tienes un problema de codificación entre tus páginas y tu base de datos. Revisa con paciencia este artículo y sus secuelas.

35. iMacniatic Dice:
    1/18/2007 at 2:11 am

    Excelente artículo. Lo mejor de prototype y de script.aculo.us es que estan integradas en cakephp, mi framework de moda de momento :), antes de sumergirme en RoR.

36. Benjamin Dice:
    1/18/2007 at 12:16 pm

    Ismael: Muchas gracias!!! Sabes logre investigar lo que me dices, sabes estoy queriendo mostrar los datos de 100 en 100, uilizando links de “anterior” y “Siguientes”, pero la direccion que utilizo en los link es la misma pagina, ejemplo &id3=”, pero al hacer esto recarga la pagina,lo que me gustaria es como puedo utilizar ajax para que muestre los siguientes 100 datos, por cierto necesito enviar las dos variables para que continue con los siguientes datos. Espero darme a entender. Gracias

37. Benjamin Dice:
    1/18/2007 at 12:20 pm

    ismael: upss no mando el ejemplo solo lo ultimo //href=”status_order2.php?ano=?=$ano;?&id3=?=$rowe;?>”

38. Ismael Dice:
    1/18/2007 at 1:05 pm

    Benjamin: es simple. Como te decía, Ajax puede cargar fragmentos enteros de HTML dentro de una página. Simplemente haz que tu script php genere la sólo tabla de resultados Y los links de navegación entre las páginas. Nada más.
    Luego, en la página “madre” (la que el usuario ve en el browser, usas Ajax para cargar esa tabla en algun lugar. Los links de paginación deben llamar a la misma función Ajax pero cambiando los parámetros de acuerdo a la página correspondiente. De esa forma sólo se actualiza el fragmento correspondiente a los resultados, no la página completa. Para entender cómo enviarle parámetros a Ajax, relee este artículo, la información está ahí (Ajax.Request y el objeto parameters). También revisa el comentario 18.
    En todo caso, es conveniente que los resultados se carguen por ajax? A lo mejor es mejor para los usuarios que se actualice la página, así pueden guardar la URL en los favoritos para la página que quieren (eso, por supuesto, es decisión tuya como diseñador).

39. Benjamin Dice:
    1/19/2007 at 4:06 pm

    Ismael:Gracias asi quiero hacerle, y me gustaria saber si me podrias mandar un ejemplo sobre esto, sabes estoy aprendiendo a hacer todo este tipo de cosas y la verdad es que estoy interesado en esta tecnica (ajax), te agradeceria muchisimo. mi mail es: le_back_nigga@yahoo.com.mx

40. Ismael Dice:
    1/19/2007 at 4:59 pm

    Benjamin, el ejemplo en el comentario numero 18 de este artículo es lo básico que necesitas en lo referente a Ajax. Lo único que faltaría es el script php que busca los datos en la base de datos y genera la tabla de resultados html, que entiendo tu ya la tienes hecha. Disculpa que no te pueda confeccionar un ejemplo más detallado (por falta de tiempo), pero creo que aquí está toda la información necesaria. Si no te queda claro, creo que necesitas más información sobre PHP, pero por suerte hay mucho de eso en la web.

41. Benjamin Dice:
    1/24/2007 at 11:03 am

    Ismael:muchas gracias, me puse a leer y a buscar en la web y encontre un ejemplo un poco parecido a lo que estaba buscando. Te agradezco mucho, ya que con articulo logre complementar el ejemplo.

42. Beto Dice:
    1/31/2007 at 8:54 pm

    Ismael, excelente articulo, sin duda me ayudo a entender este tema de la librerias javascript. Ocupe las funciones ajax de jquery y mi codigo cambio de:

    function objetoAjax(){
    var xmlhttp=false;

    try {
    xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) {
    xmlhttp = new XMLHttpRequest();
    }

    return xmlhttp;
    }

    function cambiarSelect(value) {
    var doc = null;
    destination = document.getElementById(’div_ciudad’);
    doc = objetoAjax();
    if (doc)
    {
    doc.open(”GET”, “ajax.php?region=”+value, false);
    doc.send(null);
    destination.innerHTML = doc.responseText;
    } else {
    destination.innerHTML = ‘Browser unable to create XMLHttp Object’;
    }
    }

    a esta funcion:
    function cambiarSelect(value) {
    $(’#div_ciudad’).load( “ajax.php”, { region : value } );
    }
    que al parecer hace lo mismo que ajax.updater de prototype.
    Te agradezco nuevamente ya que sin este articulo de introduccion no habría ocupado nunca este tipo de librerías.

43. Danny Dice:
    2/28/2007 at 8:46 pm

    Ismael: de antemano las felicitaciones del caso pues haz explicado el tema de ajax de una manera bastante digerible y amena, sin embargo, como usuario de php tengo un problema y es que antes de usar ajax; en mis paginas de php utilizaba la funcion header(Location:….) pues tenia paginas PHP intermedias que hacian el trabajo de insertar, modificar etc. los datos en la base de datos y con la funcion header(…) redirigia el navegador a las pagina inicial que hizo el llamado, sin embargo ahora en ajax no tengo claro la idea de como hacer esto;

    Espero que me hayas entendido, ¿como sustituyo la funcion header() en ajax?

    gracias de antemano por la ayuda prestada y si deseas puedes contactarme en mi correo: danny.benique@msn.com

    Saludos y gracias nuevamente.

44. acuario Dice:
    3/27/2007 at 6:23 pm

    consulta … despues de enviar por ejemplo un formulario a un div (inicialmente vacio) como puedo establecer el foco a un elemento de dicho formulario …. cuando coloco el script para colocar el foco me dice que no existe sin embargo cuando coloco un alert previo y despues el focus al elemento (ejemplo una caja de texto) si lo hace … lo que no quiero es colocar el alert … pero si lo saco me dice denuevo que el elemento no existe …

45. Karo Dice:
    4/3/2007 at 9:19 pm

    Hola diculpen la pregunta yo soy nuevo en el mundo de la web y programo en php y quiero incorporar un poco de ajax mi pregunta es hay lguna forma de reflejar los cambios sin el # del hash. y otra consulta estadobeta para cambiar de seccion usa ajax o actualizar muy rapido? desde ya muchas gracias

46. Max Dice:
    4/11/2007 at 1:10 am

    No concuerdo con que Jquery no sea extendible y solo para desarrollos simples, ejemplos de ello, Drupal, unos de los mejores CMS’s lo usa como libreria javascript por defecto y YUI-EXT de yahoo ha unido fuerzas con Jquery

47. dimbmmkelt Dice:
    5/24/2007 at 12:55 pm

    myeptztrz

48. racbfpedmr Dice:
    5/25/2007 at 1:48 am

    mroydgnu

49. Mercedes Dice:
    6/22/2007 at 11:28 am

    Buenas tardes.
    Soy nueva en esto de Prototype y no consigo que me funcione :).
    Estoy utilizando Ajax.Request para poder cargar datos en un textarea pero no hay manera de que me funcione. ¿Podríais echarme una mano? Gracias desde ya mismo.

    — Javascript —

    function cargarContenido(){
    var params = “par1″;
    var myAjax = new Ajax.Request(’/cargarContenido.do’, {
    method:’get’,parameters: params,
    onSuccess: function(peticion){
    var response = peticion.responseText || “No se han recibido datos”;
    $(’empresas’).value = response;},
    onFailure: function(){ alert(”Error”) }
    });
    }

    — Html —
    body onload=”cargarContenido();”

    textarea name=”empresas” id=”empresas” readonly

    Tengo que cargar la funcion JS en el onload del body, porque no consigo que me funcione:

    Event.observe(window, ‘load’, cargarContenido );

    Respecto a Ajax.Request, quisiera en la url poner una accion de Struts, pero no sé cómo he de configurar esta..

    Un saludo

50. ricardo Dice:
    6/29/2007 at 12:05 pm

    muy bueno el tutorial, es preciso y conciso para saber lo basico y de alli volar con la mente vamos a ver q tan alto puedo llegar y sigue asi y espero q publiques otro pronto con otros tips chauuuuu

51. x100pre Dice:
    7/5/2007 at 10:47 pm

    holas a todos haber si me pueden ayudar ojala que si pues, bueno soy nueva px pero tengo la siguiente necesidad.
    QUIERO QUE CUANDO LE DOY CLIK E UN VINCULO EN ESTE CASO LINK1 EN EL DIV SALGA EL CONTENIDO DE LINK1. haber si me ayudan lo mas pronto posible px bye gracias
    function processReqChange(){
    var detalles = document.getElementById(”detalles”);
    if(req.readyState == 4){
    detalles.innerHTML = req.responseText;
    } else {
    detalles.innerHTML = ‘ Loading…’;
    }
    }
    link1

52. Ismael Dice:
    7/6/2007 at 5:48 pm

    Danny: con Ajax no necesitas header("location...")
    porque justamente la idea de Ajax es que no es necesario refrescar o redirigir la página. Tu PHP que hace las transacciones en la base de datos simplemente escribe el HTML de respuesta que quieres inyectar en la página que hace la llamada, o usas header("status...") para enviar de vuelta a Ajax un status 200 para indicar que todo salió bien (o un status 500 si hubo errores).

    Acuario: tienes que establecer el foco después de que Ajax ha actualizado la página. Si lo haces antes o mientras, el input en cuestión todavía no existirá (el alert le da tiempo a Ajax de actualizar la página, y por eso funciona). Para eso dale el foco al input en un callback “onComplete” de la clase Ajax.Request o Ajax.Updater. Relee esa parte del artículo para saber cómo.

    Mercedes: los textarea no tienen un atributo value, sino que les inyectas contenido como a un DIV o similar. En lugar de $(’empresas’).value = response debes usar $(’empresas’).innerHTML = response, aunque es más sencillo si usas Ajax.Updater.
    var a = new Ajax.Updater('empresas','/cargarContenido.do')

    x100pre: por lo que veo estás usando funciones Ajax que no incluyes en tu ejemplo (y no estas usando Prototype, el tema de este artículo). Relee este artículo para usar Ajax con Prototype y verás que es fácil.

53. Ismael Dice:
    7/19/2007 at 2:47 am

    Max: jQuery es Javascript, por lo tanto es extendible (basta con extender el prototipo de cualquier cosa o copiar sus atributos y listo). Pero comparando con la API de Prototype o MooTools, me quedo con estos últimos. Mejor enfoque del modelo de clases y herencia, creo yo. Además el código es más fácil de entender.

54. Carlos Dice:
    7/25/2007 at 1:32 pm

    Hola, trate de hacer el tutorial pero me sale un error en el firebug de mozilla que dice lo siguiente:

    “Element has no properties
    var method= element.tagname.toLowerCase();”

    Alguien sabe como soluciono esto?

55. Ismael Dice:
    8/12/2007 at 9:19 pm

    Carlos, puedes mostrar más código para saber qué estas haciendo?
    En cualquier caso, no es “tagname” sino “tagName”, con “N” mayúscula. ¿Será ese el problema?

56. Julio Andres Dice:
    8/14/2007 at 6:54 pm

    Cree una consulta Ajax con prototype. Cuando activo la consulta en la pagina me carga todo bien el la pagina en el div correspondiente, pero ahora cuando activo nuevamente la misma consulta me carga nuevamente la pagina de la coneccion anterior.
    La pagina que cargo esta siempre en constante renovacion, por eso no me sirve cargar nuevamente la pagina de la primera coneccion que ejecuta ajax, alguien sabe como se hace esto en prototype…

    Muchas gracias…

57. Webmaster Mexico Dice:
    8/15/2007 at 4:51 am

    Gracias por el manualito, me ha sido muy util.

58. Karo Dice:
    8/15/2007 at 5:25 pm

    Hola Ismael por ahi mi pregunta no tiene sentido pero e visto paginas similares al tuyo “estado beta” que al cambiar de seccion parece que carga toda la pagina y una vez cargado lo muestra lo que no se si usan ajax o alguna tecnica o simplemente carga rapido y me da esa censacion..

59. Ismael Dice:
    8/15/2007 at 5:32 pm

    @Julio: no me queda muy claro. Si haces haces varios requests Ajax, debiera cargar el contenido nuevo cada vez. Pero necesitaría más detalle para confirmar.

    @Webmaster: de nada.

    @Karo: EstadoBeta no usa nada de Ajax (por ahora). Qué navegador usas?

60. Karo Dice:
    8/16/2007 at 8:48 am

    Ismael uso IE y firefox lo que noto es lo siguiente en otras paginas al cambiarme de seccion por ej de la home a archivos en otras paginas se pone en blanco el archivo y va cargando pero en el tuyo hago click sobre archivos por ej y en la barra del estado me muestras que esta cargando una vez cargado se cambia de pagina y el parpadeo es minimo por ahi es mi imaginacion o la pagina carga muy rapido y me da la sensacion.

61. Julio Andres Dice:
    8/16/2007 at 11:13 am

    No hace eso. Por ejemplo tienes:
    url= “cargadatos.php”;
    params: “palabra=prototype”;

    Luego creas la el objeto ajax con esas variables, la respuesta va a ser lo que devuelve “cargadatos.php”, pero ahora si por segunda ves creamos la misma pregunta con los mismos datos prototype verifica si ya se hizo esa pregunta y en ese caso devuelve lo que “cargadatos.php” le mando en la coneccion anterior.
    Pero si despues creas otro objeto ajax con el parametro:
    params: “palabra=prototype1″;
    Ya no te devuelve la coneccion anterior.-
    Lo que hise yo por el momento fue como solucion parche:

    min=new date();
    params: “palabra=prototype&q=”+min.millisecons(0);

    Con eso siempre el parametro va a ser diferente pero no lo encuentro como codigo limpio, quiero encontrar una solucion eficaz, no efectiva.

62. Carolina Dice:
    8/20/2007 at 6:22 pm

    la instale y todo pero igual hace un reload de la página que puede ser?

63. Ismael Dice:
    8/20/2007 at 6:43 pm

    @Carolina: cómo estás usando Ajax? Necesito más detalle para poder ayudar.

64. Julio Andres Dice:
    8/21/2007 at 8:51 am

    mmmm, y mi pregunta nadie sabe nada, si la mayoria usa este framework.-
    

65. Ismael Dice:
    8/21/2007 at 12:03 pm

    Julio, no recuerdo que eso me haya pasado, pero la única solición que se me ocurre es la que ya econtraste. Si quieres que tu código sea más limpio, puedes encapsular la creación de llamadas Ajax en una función sencilla.

    var callAjax(url){
    opts = Object.extend(
    {
    method:”post”,
    parameters: “”
    },arguments[1] || {}
    );
    random = new Date().millisecons(0);
    opts.parameters = [opts.parameters,random].join(”&”);
    new Ajax.Request(url,opts);
    }

    …o algo así.

66. Julio Andres Dice:
    8/21/2007 at 7:23 pm

    Ok, gracias…:(

67. Aldo Dice:
    8/28/2007 at 9:13 pm

    Muy buen articulo …. humm… aunque es algo tarde el a ver encontrado jajajja.. tengo un problemilla.. vera.. deceo que mi pagina muestre cargando antes de mostrar toda la pagina completa… bueno…. la mayoria de los objetos a mostrar… y puse el ejemplo que pusiste al ultimo con tu variable “globalCallbacks”
    .. bueno lo modifique a mi pagina.. pero no da… resulta que no crea la variable o bueno no realiza ” Ajax.Responders.register( globalCallbacks ); “… espero q me puedas ayudar.. pues

68. TestName Dice:
    9/22/2007 at 4:08 am

    Test myfunction comment

69. Esteban Dice:
    10/5/2007 at 2:01 pm

    Hola, esta muy bueno el tema, yo recien me inicio en Ajax, son senior en php, ahora toy buscando información para integrar Ajax con Erlang, el servidor es Yaws, mi pregunta es, se puede Adaptar Ajax a cualquier servidor?

    Muchas Gracias

70. Ismael Dice:
    10/5/2007 at 2:22 pm

    @Esteban: Ajax es JavaScript, o sea todo sucede en el cliente (browser). El servidor recibe POSTs o GETs HTTP como cualquier otro request.

71. Esteban Dice:
    10/5/2007 at 2:40 pm

    Mira te cuento, para las paguinas yaws, se usa erlnag, y la lógica del progrma se hace en modulos q se compilan con .beam, o sea llamo a una pagina controlador.yaws q llama al modulo erlnag, ej. retornarDatos:funcion(Arg), esto se redirije al modulo quien procesa la información y retorna una tupla q contiene una lista de parámetros, la pregunta es como lo integraría, ya q esos parametros en la pagina se obtiene con una api yaws:api_binding -> q tiene todos los parametros pasados por el módulo, no importa esto?, como sería la pagina html, javascript y erlang en la misma pagina, o haria el html por un lado y llamo a una pagina .yaws como si fuerna en php? si me podes orientar te lo agradecería, pa es muy bueno tener una respuesta tan rápida! Sal2!

72. Marcelo Dice:
    10/11/2007 at 3:53 pm

    todo muy lindo pero no mme anda en internet explorer.
    hice esto: si alguien me puede ayudar le agradesco

    me funciona solo en firefox

73. Marcelo Dice:
    10/11/2007 at 3:54 pm

    pegue el codigo pero no aparece no se si tendran q aprobarlo

74. Ismael Dice:
    10/11/2007 at 7:05 pm

    @Marcelo, no se que paso con tu codigo. Era solo Javascript? El uso de etiquetas HTML esta limitado. Por favor intenta de nuevo.

75. Ismael Dice:
    10/11/2007 at 7:09 pm

    @Esteban: nunca en mi vida he usado yaws. Si sabes como recibir parametros de un request http (desde un browser) y generar texto o html de vuelta al browser, entonces tienes todo lo necesario para usar Ajax. Si no sabes como hacer lo anterior, no te puedo ayudar. Pero si te sugeriria que, una vez que domines la materia, escribas un post con lo aprendido y nos avises en estos comentarios.

76. Esteban Marcelo Dice:
    10/12/2007 at 9:52 am

    En cuento lo resuelva prometo poner un post sobre el tema
    otra ves se me trunco el codigo q quise poner

77. Esteban Marcelo Dice:
    10/12/2007 at 10:01 am

    function agregarMarca()
    {
    alert(”message”);
    var dir = “/ePIN/controller.yaws”;
    var params = “acc=addBrand”;
    var ajx = new Ajax.Updater(
    $(”addMarca”),
    dir,
    {
    method:”post”,
    parameters:params
    }
    );
    }

    eldiv conid addMarca name esigual addMarca
    la imagen q hago clic Add.gif onClick=agregarMarca()

78. Esteban Marcelo Dice:
    10/12/2007 at 10:03 am

    bueno ahi subio, si alguien me puede ayudar con esto es q ese codigo me anda bien en Firefox pero no en I.E y supuestamente prototype soluciona ese problema en la fucion hay un alert para ver si llama bien y lo veo desde los dos exploradores, como no se puede codigo h tml abajo dice eldiv en vez de la etiqueta error en sintaxis creo q no hay si me pueden ayudar se los agradesco

    Atte: Esteban Marcelo

79. Ismael Dice:
    10/12/2007 at 10:15 am

    No se si sea la causa, pero 2 cosas:

    “onclick” es todo con minusculas en xhtml, y el valor va entre comillas, o sea:

    onclick="agregarMarca()"

    Ademas, el 1er parametro de Ajax.Updater puede ser la id sola:

    
new Ajax.Updater("addMarca", ...)


80. Esteban Marcelo Dice:
    10/12/2007 at 11:04 am

    si las comillas se las quite por las dudas q no me dejara enviar, y el onclick lo puse en minusculas pero funcionaba ya q mostraba el alert, lo del primer parametro lo puse como me decis pero sigue sin andar en I.E, puse
    var ajx = new Ajax.Updater( “addMarca”,
    dir,
    {
    method:”post”,
    parameters:params
    }
    );
    lo raro es q me sigue sin funcionar, el servidor yaws me da una respuesta html y eso lo se hacer aparte funciona correctamente en Firefox, lo probe en unas cuantas versiones de I.E y en otras maquinas tambien y es lo mismo, en verdad no me doy cuenta q es, un amigo q usa esta librería me dice q tiene q andar si o si pero no me anda y el servidor me da la respuesta en verdad no se q hacer,

    Capture el post y esta bien tengo esto: acc=addBrand

    en el header una de las cosas q tiene es: lo otro no lo pude subir aca

    x- prototype-version 1.5.1.1
    x- requested-with XM L Ht tp Req uest

    bueno talves con esto me puedas ayudar, mira me parece q el problema con el server q el I.E no le esta pasando algo, pues en url de la funcion agregarMarca() le puse google y me lo lebanta no tenes idea q podria cambiar

81. Esteban Marcelo Dice:
    10/12/2007 at 11:17 am

    Otro problema mas, supuestamente no deberia dejarme cargar datos de un dominio externo, cosa q si puedo en este caso con I.E pero no asi con Firefox, me estoy enloqueciendo!
    Tiene q haber una forma de corregir todo esto no!

82. Ismael Dice:
    10/12/2007 at 12:14 pm

    Aislaste tu codigo? Estas seguro de que no hay alguna otra cosa que esta produciendo el error en IE?

83. Esteban Marcelo Dice:
    10/12/2007 at 12:36 pm

    como si lo aisle, no tengo errores javascript y el mismo codigo anda si le pongo una url externa y con url externa no anda en mozilla pero si con la q necesito

84. Edy Dice:
    10/15/2007 at 2:38 pm

    Estoy probando con la versión de Backbase Comunity Edition y es espectacular. Les paso el link:
    http://bdn.backbase.com/
    La documentación es excelente, los ejemplos están muy buenos. Creo que es el mejor framework que he visto hasta el momento.
    saludos. Edy

85. Fred Dice:
    10/30/2007 at 9:41 am

    Hola, como estas todos?
    Bien, algum de usted sabien como jo crio el parametro para llamar 2 functions?
    Por exemplo:
    …
    onComplete: function1 y function2
    …

    algun sabe como hacer isto?

    thx!

86. vladimir prieto Dice:
    11/4/2007 at 7:53 pm

    @Fred:

    tal vez te sirva algo así:

    onComplete: function(){
    miFunction1();
    miFunction2();
    }

    function miFunction1(){
    …
    }

    function miFunction2(){
    …
    }

    saludos!

87. jaime Dice:
    11/26/2007 at 12:42 am

    hola a todos, alguien podria apoyarme a resolver la siguiente duda o problema?, por medio de ajax leo mi base de datos al hacer click en un boton es una lista de cliente el detalle q tengo es q intento meter los datos en una tabla pero no me la genera es decir no me respeta las etiquetas. estoy haciendo lo siguiente:

    while($reg=mysql_fetch_array($result))
    {
    echo (”$nom$fecha”);
    }

    y en el archivo de funciones.js lo recibo asi:

    resultados.innerHTML=conexion1.responseText;

    el detalle q si me muestra los datos pero no me los pone en una tabla.

    alguin podri decir me como hacerle gracias soy nuevo en esto del ajax.

88. Ismael Dice:
    11/26/2007 at 4:57 am

    Jaime, tu problema no es de Ajax sino de PHP. La tabla no se hace sola, tienes que generarla tu en tu archivo PHP. Ajax simplemente inyecta el resultado en tu pagina, sea lo que sea.

    while($reg=mysql_fetch_array($result))
    {
    // Aqui haces un loop en los resultados
    // y generas una tabla HTML.
    }

89. Dario Dice:
    12/21/2007 at 11:36 am

    Hola a todos, muy buen articulo. Me aclaro muchas dudas, pero hay una que no puedo aclara y pasa que todos habaln de como manejar la respuesta que da ajax pero si yo tengo un ajax que guarda en la base de datos y luuego muestra la pagina actualizada como el ejemplo del comentario. Como hago en el Action de JAVA para mandar la respuesta es decir como genero la ‘url’ que deberia ir en Ajax.request(url,…
    Porque obtengo los datos en la funcion y de ahi que retorno a ajax y como lo retorno. Gracias de antemano y espero haberme explicado. SALUDOS y feliz Navidad

90. Tavares Dice:
    1/3/2008 at 8:35 pm

    hola a todos, les deseo un buen año 2008, en una pagina tengo una lista de noticias del lado derecho y en el centro de la pagina tengo un donde se carga la noticia que selecciono de la lista, el “problema” que tengo es que si selecciono una noticia de abajo de la lista y esta (la noticia) es muy corta no se ve (por que quedo en la parte de arriba de la pagina), y tengo que manualmente desplazarme hacia arriba para poder leerla, mi pregunta entonces es si se puede de alguna forma desplazarse automaticamente al inicio de la noticia seleccionada en la parte de arriba??

    de antemano muchas gracias!!!

91. Maderic_m Dice:
    1/12/2008 at 9:32 pm

    hola todos, alguien encontro la solucion para que anden los ejemplos en en IE, ya que estoy dedsarrollando unas cosas y no me funciona en IE pero si en Firefox, debo poder actualizar cierto contenido cada x segundos pero no funciona en IE, aca dejo el codigo:

    
function recargar(){
var url = "ajax.php";
var pars = "op=recargar";
$('div_scroll').innerHTML = '';
var myAjax = new Ajax.PeriodicalUpdater( "div_scroll", url, { method: "get",
parameters:pars,
frequency:'10'
}
);

    }

    function alta_mensaje(){
    var mensaje = $F('comentario_inicio');
    var usuario = $F('usuario_inicio');
    var url = "ajax.php";
    var pars = "op=recargar&,mensaje="+mensaje+"&usuario="+usuario;
    var ajaxRequest = new Ajax.Request(
    url,
    {
    method: "post",
    parameters: pars,
    onComplete: function(resp){
    recargar();

    }

    });
}


    si alguien tiene una solucion se lo agradesco, un saludo

92. marcel Dice:
    1/30/2008 at 10:41 pm

    la consulta es la siguiente, como es que por ejemplo realizo lo siguiente, envío la petición al servidor, con x campos por post, por ejemplo, pero quiero procesar la respuesta y devolverla en distintos divs.
    o sea, php me deuelve un array , y quiero insertar en distintos divs distintos items de ese array, que es la respuesta del servidor.

93. vladimir Dice:
    1/31/2008 at 9:59 pm

    @marcel:
    yo no utilizo prototype, envez ocupo mootools, pero son muy parecidos. para lo que logré entender de tu pregunta veo dos soluciones:

    1º utilizar el procesaRespuesta de ajax.request del artículo. es decir, literalmente “navegando” por el árbol dom de código html que devuelve php. aquí nextSibling firstChild y demases podrían llegar a ser mareadores para encontrar la info que quieres.

    2º utilizar ajax en conjunto con json y/o xml de manera que en la función que recibe la respuesta sea más fácil su uso. es decir algo así (en mootools):

    
procesaRespuesta( resp ){
var arrayResp = Json.evaluate(req);
$('div0').setText(arrayResp['valor0']);
$('div1').setText(arrayResp['valor1']);
}

    así json -en el ejemplo- te hace más fácil la recuperación de la información “devuelta” a través de arrays que son bien conocidos por todos.

    espero que por lo menos te de alguna idea o guía.

    saludos!

94. Ismael Dice:
    2/1/2008 at 6:19 am

    Marcel, como dice Vladimir, puedes retornar jSon desde el servidor (un array, o un objeto). Luego en tu javascript simplemente sacas lo que quieras de esa estructura y lo inyectas en distintas partes de tu pagina.

    Otra cosa que puedes hacer es escribir todo el Javascript, incluyendo la logica, en el servidor. En el cliente simplemente evaluas el codigo. Para eso basta con que, en PHP, incluyas un header application/javascript:

    
<?php
// En PHP
header('Content-type: application/javascript');
// Genera Javascript dinamicamente
?>
$('primer_div').innerHTML = "<?php echo $contenido_dinamico ?>";
$('segundo_div').innerHTML = "<?php echo $mas_contenido_dinamico ?>";


    Las funciones Ajax de Prototype detectaran que la respuesta es Javascript y la evaluaran automaticamente. El resultado es ejecutar todo ese JS como si estuviera en tu browser, y con eso puedes modificar las paginas como quieras desde el servidor. La unica precaucion es escapar todo el texto que inyectes con PHP, para no romper el Javascript resultante.

95. Leo Dice:
    2/13/2008 at 2:56 pm

    Hola gente. Excelente esta pagina realmente.
    Queria consultar si a la funcion en la definición de onfailure se le pasa o no el xmlhttprequest?

    O sea, quiero en la funcion que defina del onfailure dar una detalle del error.
    Saludos

96. Ismael Dice:
    2/16/2008 at 1:22 pm

    Leo: si, todos los “callbacks” reciben como argumento la respuesta del servidor en un objeto xmlhttprequest. En todo cao lo mejor que puedes hacer es comprobarlo tu mismo:

    new Ajax.Request(’una/url’,{
    onfailure:function(e){
    alert(e); //veamos si esta funcion recibe argumentos
    }
    });

97. Carlos Rojas Dice:
    2/21/2008 at 11:53 am

    Aun no entiendo mucho de Prototype, pero hay dos problemas, si es que no estoy metiendo la pata, si coloco un boton del tipo image, envia los datos pero, me muestra el php que procesa la data en este caso segun el primer ejemplo “procesa-ajax.php” lo mismo ocurre cuando coloco un boton del tipo submit. No he podido encontrar la manera de evitar este tema, pues funciona perfectamente con el boton tipo button. Tambien prove con el evento onSubmit() del formulario y naaaa AYUDA!!!

98. Ismael Dice:
    2/21/2008 at 12:02 pm

    No se si entendi tu problema, pero si te esta mostrando el PHP en vez de los datos procesados, eso no tiene nada que ver con Ajax. Esta PHP instalado y funcionando en tu servidor? Tu servidor tiene que ser capaz de procesar y servir archivos PHP.

99. Carlos Rojas Dice:
    2/27/2008 at 1:05 am

    Gracias Ismael, pero no me explique, osea que cargaba en la URL el PHP que procesaaba en este caso “procesa-ajax.php” como si fuera un vinculo, pero ya lo solucione, muchas gracias!!!

100. yogixs Dice:
     3/1/2008 at 1:15 pm
     
101. Reych Dice:
     3/4/2008 at 1:20 pm

     Hola Ismael!!!
     Intento hacer una aplicación en html y javascript y que obtengan datos de servidor con funciones php. Despues de estar investigando un poco… como puedo decirle a prototype que tiene que acceder a la funcion “getDatos” que esta en el archivo “generico.php”??? (es decir, dentro de la pagina generico.php, esta function getDatos(){} y quiero que me devuelva los datos obtenidos del servidor). Es posible?Sino hay otra manera u otra libreria????
     Gracias

102. Elmer Pérez Dice:
     3/22/2008 at 11:49 am

     Saludos cordiales yo recomendaria el uso JQuery que es mas compacto, y mas flexible en el uso de xpath

     Elmer
     MCAD

103. Greco Dice:
     3/24/2008 at 2:09 am

     Hola, muy bueno el tutorial, me animó bastante para utilizarlo, he aprendido gracias a este articulo, felicitaciones.
     Tengo una duda…

     como lo hago para poder mostrar el famoso gif que aparece cuando se esta cargando el contenido?? intenté hacerlo como se indica en el articulo pero no me resulta, no logra aparecer, si lo hago de forma separada, agregando onCreate:mostrargif,onComplete:ocultargif en Ajax.Updater me funciona bien per no es la idea.

     (mostrargif y ocultargif son funciones:
     function muestraGif(){
$("cargando").hide();
}
function ocultaGif(){
$("cargando").hide();
}

     lo que deseo es realizarlo tal cual se indica en el articulo, mediante globalcallbacks per no me resulta, talvez por mi ignorancia no funciona, seguramente estoy metiendo mal el codigo, si porfavor me logran dar una idea de como realizarlo estará agradecido.

     Saludos

104. Ismael Dice:
     3/24/2008 at 1:25 pm

     Greco, este articulo es del 2006 y puede que este algo desactualizado con respecto a la version mas reciente de Protoype.

     Viste la documentacion oficial?

     http://www.prototypejs.org/api/ajax/responders

105. Greco Dice:
     3/24/2008 at 6:59 pm

     perdon… no me había fijado en las fechas

     Estuvemiando la documentacion que gentilmente posteaste y no lgro entender bien, bueno, me queda mucho por estudra y aprender.

     Gracias por la prnta respuesta y espero ver mas publicaciones tan importantes como esta en el blog, es muy educativo.

     Saludos.

106. julio Dice:
     4/5/2008 at 10:12 pm

     estimados estoy realizando una actualizacion y me tira este error :element.tagName.toLowerCase();…lo cual creo que hay algo mal en las varialbes que le paso para que me haga la actulizacion, aca el codigo {

     var edicion = $(”edicion_status”);
     var url_update = “edicion_update.php”;
     var pars = “”;
     var titulo = $F(”rq_titulo_str”);
     var operacion = $F(”operacion”);
     var tip_vivienda = $F(”tip_vivienda”);
     var departamento = $F(”departamento”);
     var barrio = $F(”barrio”);
     var dormitorios = $F(”dormitorios”);
     var banos = $F(”banos”);
     var fotos = $F(”fotos”);
     var precio = $F(”rq_precio_int”);
     var caracteristicas = $F(”rq_caracterisiticas_txt”);
     var destacado = $F(”destacado”);
     var opciones = $F(”opciones”);
     var pars = “titulo=”+titulo+”&operacion=”+operacion+”&tip_vivienda=”+tip_vivienda+”&departamento=”+departemento+”&barrio=”+barrio+”&dormitorios=”+dormitorios+”&banos=”+banos+”&fotos=”+fotos+”&precio=”+precio+”&caracteristicas=”+caracteristicas+”&destacado=”+destacado+”&opciones=”+opciones+”&edit=”+id;
     }
     gracias por su tiempo

107. jose roberto (vevni) Dice:
     4/17/2008 at 11:18 am

     muy buen post, interesante para los que no conocen prototype.
     yo uso mucho jquery pero = eh usado prototype, muy bueno!

108. bruno Dice:
     5/22/2008 at 10:14 am

     ayuda por favor
     tengo un problema al intentar cargar datos por medio de ayax….
     teng un formulario q pide datos al cliente y los deberia ingresar en una tabla….pongo el codigo

     function comentarioAjax(){
     var idmata = $F(”idmata”);
     var fcarga = $F(”fcarga”);
     var frcarga = $F(”frcarga”);
     var tipo = $F(”tipo”);
     var ph = $F(”ph”);
     var phv = $F(”phv”);
     var carga = $F(”carga”);
     var interno = $F(”interno”);
     var zona = $F(”zona”);
     var users = $F(”users”);
     var url = “enviadatos.php”;
     var params = “idmata=”+idmata+”&email=”+fcarga+”&frcarga=”+frcarga;
     var ajx = new Ajax.Updater(”nuevo-comentario”,
     url,
     {method:”post”,
     parameters:params}
     );
     }

     [….]

     CARGAR NUEVO MATAFUEGO AL CLIENTE:

     ID MATAFUEGO
     F DE CARGA
     F VENCIMIENTO

     <input name=”fcarga” type=”text” id=”fcarga” value=”" size=”10″>

     <input name=”users” value=”"type=”hidden” id=”users” size=”10″>

     TIPO
     FECHA PH
     VENCIMIENTO H

     <input name=”ph” type=”text” id=”ph” value=”" size=”10″>

     CAPACIDAD
     N° INTERNO
     ZONA

     <input name=”users” value=”"type=”hidden” id=”users” size=”10″>

     <input name=”users” value=”"type=”hidden” id=”users” size=”10″>

     el asunto es q al darle al boton no carga los datos y me envia a otra web… debria enviar a /enviadatos.php pero envia a index_sub.php….

     help me!!!!!!!!!!

109. vladimir Dice:
     5/22/2008 at 9:45 pm

     @bruno:

     creo que falta información en el codigo que pones, y ademas tiene algunos errocillos. más allá de eso, te recomiendo que veas el código al que hace mención Ismael en la actualización.

     Este hace referencia al método request del form, haciendo mucho más fácil la tarea. Sólo debes hacer un form html normal (llenando sus propiedades como corresponde) y luego bastará un $(’miformulario’).request() para enviar los datos. muy simple.

     héchale un ojo al ejemplo oficial.

110. esteban_22 Dice:
     5/26/2008 at 9:59 am

     hola a todos, felicitaciones por el articulo, es claro y preciso.
     el motivo de este mensaje es por un problema que tengo.
     desde un html llamo al metodo update pasandole como parametros {evalScripts:true}, la version de prototype 1.6
     este me inyecta en el div la pagina generada, lo que me pasa es que no ejecuta las funciones que tiene incorporadas en esa iyeccion, por ejemplo en la pagina generada e inyectada en el div tuviera

     alert(”hola”);

     eso lo ejecuta, o este

     $(”tabla1″).setStyle({ fontSize: “8pt”});
     $(”tabla1″).setStyle({ font: “arial”});
     $(”tabla1″).setStyle({ color: “navy”});

     pero no hace esto, suponiendo que en la pagina generada
     tenga un input con una llamada onclick=”ver(this)” y en la misma pagina generada esta esta funcion

     function ver(valor){
     alert(valor);
     }

     algun consejo para este tipo de situaciones.
     ha otra cosa
     si la funcion ver esta en la pagina que tiene el div a intectar si funciona. pero lo que quisiera hacer es que a cada proceso que llamo y que ya tienen sus funciones js incluidas estan disponibles para ejecutarse
     eso es todo
     saludos Esteban

111. marcos cabrera Dice:
     5/27/2008 at 2:40 am

     soy nuevo en prototype , desde hace algunos dias he estado haciendo pruebas y familiarizandome con todo , pero al llegar a la parte de ajax, me he encontrado con un error , no se si alguien le ha pasado , podrian ayudarme?

     “Ajax.Request is not a constructor” de igual manera con
     “Ajax.Updater is not a constructor” cabe mencionar que he cuidado la sintaxis y nada , que podria estar mal

112. marcos cabrera Dice:
     5/27/2008 at 2:42 am

     este es el codigo de las funciones

     function comprobar_email()
     {
     var empID = $F(’Email’);
     var url = ‘http://localhost:3000/desarrollo/comprobar_correo.php’;
     var pars = ‘empID=’ + empID ;

     var myAjax = new Ajax.Request( url, { method: ‘get’, parameters: pars , onComplete:showResponse});

     }
     function showResponse(originalRequest)
     {
     $(”result”).innerHTML = originalRequest.responseText;
     }

113. Omar Dice:
     9/2/2008 at 11:50 am

     Tambien tengo el problema de la ñ y acentos con prototypejs e probado codificacion pero solo lo tengo con la vercion 1.6 no con las anteriores me iria para atras pero utilizo muchas funciones de la 1.6 alguno de ustedes le a pasado ese problema ?

114. Satrum Dice:
     10/3/2008 at 1:49 am

     Necesito saber como vincular Ajax con Erlang??? por favor es urgente quien sepa se lo agradecere Salu2.

115. JOSE LUIS C Dice:
     1/21/2009 at 1:48 am

     Hey amigos..am no me funciona esto…….
     estoy tratando pero me llevo una guantera muy fuerte….
     que puedo hace?…..HELP…..AYUDA…

116. jose luis p Dice:
     6/16/2009 at 12:54 pm

     lo que quiero es pasar un combo llenado desde una base de datos que esta en una pagina php con el nombre combo.php a otra pagina llamada llenado.php y mediante el id de una celda quiero que se llene la celda con el combo usando el prototype y el ajax

117. Horacio Dice:
     9/22/2009 at 6:52 pm

     Excelente tutorial en español, calidad en la explicación, (comentario aparte -Hace tiempo pregunte a alguien si me podía explicar más o menos como utilizar ajax, no lo hizo-), verdaderamente te quiero felicitar por este gran aporte, lo acabo de grabar un delicious, en mis favoritos, todos los dias lo voy a leer por la mañana, e intentar hacer ejercicios con lo que pones y con lo que han puesto los demás amigos.

     Sinceramente es muy bueno bro.

118. Horacio ayuda Dice:
     9/23/2009 at 1:12 pm

     Soy nuevo en esto Segui el ejemplo paso a paso y no me funciona adecuadamente ayuda por favor alguien

119. juarmas Dice:
     12/4/2009 at 9:43 am

     buenas gente…. estoy teniendo el problema que tenia alejandro y omar con las ñ y acentos, al guardarlo en la base de datos me guarda en lugar de ñ ..ñ ,
     la codificacion de la pagina esta perfecta, ingreso datos en el input, lo muestro en un alert, y todo bien… el problema esta al mandarlo al servidor..

     url = ‘
     ‘;
     blockControl($(’#aMCaja’));
     jQuery.get(
     url,
     {cajaId: $(’#cajaId’).val(), nombre:$(’#aNombre’).val()},
     function (data){”aca va el codigo del callback”});

     tambien intente concatenarlo los parametros a la url, pero no hay caso. cuando meto ñ lle geroglifica.
     agradeceria si alguien sabe como resolverlo.
     un abrazo.

Deja un comentario

Categorías

• (X)HTML (6)
• apps (6)
• artículos (89)
• Chile (1)
• Comportamiento (2)
• CSS (21)
• Desarrollo (35)
• destacados (6)
• Documentación (5)
• educación (7)
• estadoBeta (9)
• Estándares (9)
• Eventos (2)
• Herramientas (1)
• javascript (30)
• jquery (1)
• Marketing (2)
• notas (93)
• Patrones de diseño (13)
• PHP (3)
• presentación (6)
• Proyectos (7)
• RIAs (2)
• Ruby & Rails (27)
• SEO (5)
• tendencias web (37)
• tips (31)

Subscripción (?)

• Artículos (RSS)
• Comentarios (RSS)

Deja tu email y los nuevos artículos de EstadoBeta llegarán cómodamente a tu escritorio.

Esta obra está bajo una
licencia de Creative Commons.