¿Cómo funciona AJAX?

¿Cuál es la esencia de AJAX? Por ejemplo, quiero tener un enlace en mi página de modo que cuando un usuario haga clic en este enlace, se envíe alguna información a mi servidor sin volver a cargar la página actual. ¿Eso es AJAX?

Pude obtener este comportamiento mediante el uso de isoframes. En más detalles pongo un enlace (digamos una imagen pequeña) en un pequeño isoframe. Cuando el usuario hace clic en este enlace, el navegador recarga solo la página en el isoframe.

Sin embargo, creo que no es una forma elegante de llegar a la meta. Creo que tengo que usar AJAX. ¿Como funciona? ¿Puede un uso de XHTML resolver el problema considerado de una manera elegante? ¿O necesito usar JavaScripts?

No necesito mucho. Solo quiero tener un pequeño enlace que (después de hacer clic) envió información al servidor. Digamos que tengo una "imagen de estrella" cerca de un mensaje. Si un usuario hace clic en la estrella (le gusta el mensaje), la estrella cambia de color y mi servidor actualiza la base de datos (para recordar que al usuario le gusta el mensaje).

Si es totalmente nuevo en AJAX (que significa Asynchronous Javascript And XML), la entrada AJAX en wikipedia es un buen punto de partida:

Como DHTML y LAMP, AJAX no es una tecnología en sí misma, sino un grupo de tecnologías. AJAX usa una combinación de:

• HTML y CSS para marcar y aplicar estilo a la información.
• Se accede al DOM con JavaScript para mostrar e interactuar dinámicamente con la información presentada.
• Un método para intercambiar datos de forma asincrónica entre el navegador y el servidor, evitando así la recarga de páginas. El objeto XMLHttpRequest (XHR) se usa generalmente, pero a veces se usa un objeto IFrame o una etiqueta agregada dinámicamente.
• Un formato para los datos enviados al navegador. Los formatos comunes incluyen XML, HTML preformateado, texto sin formato y notación de objetos JavaScript (JSON). Estos datos podrían crearse dinámicamente mediante alguna forma de secuencia de comandos del lado del servidor.

Como puede ver, desde un punto de vista puramente tecnológico, no hay nada realmente nuevo aquí. La mayoría de las piezas AJAX ya estaban allí en 1994 (1999 para el XMLHttpRequestobjeto). La verdadera novedad fue utilizar estas piezas juntas como lo hizo Google con GMail (2004) y Google Maps (2005). De hecho, ambos sitios contribuyeron en gran medida a la promoción de AJAX.

Una imagen que vale más que mil palabras, debajo de un diagrama que ilustra la comunicación entre el cliente y el servidor remoto, así como las diferencias entre las aplicaciones clásicas y las que funcionan con AJAX:

Para la parte naranja, puede hacer todo a mano (con el XMLHttpRequestobjeto) o puede usar bibliotecas JavaScript famosas como jQuery , Prototype , YUI , etc. para "AJAXify" el lado del cliente de su aplicación. Estas bibliotecas tienen como objetivo ocultar la complejidad del desarrollo de JavaScript (por ejemplo, la compatibilidad entre navegadores), pero pueden resultar excesivas para una función simple.

En el lado del servidor, algunos marcos también pueden ayudar (por ejemplo, DWR o RAJAX si está usando Java), pero todo lo que necesita hacer es básicamente exponer un servicio que devuelve solo la información requerida para actualizar parcialmente la página (inicialmente como XML / XHTML - la X en AJAX - pero JSON a menudo se prefiere hoy en día).

La esencia de AJAX es esta:

Sus páginas pueden navegar por la web y actualizar su propio contenido mientras el usuario hace otras cosas .

Es decir, su javascript puede enviar solicitudes GET y POST asincrónicas (generalmente a través de un XMLHttpRequestobjeto) y luego usar los resultados de esas solicitudes para modificar su página (a través de la manipulación del Modelo de objetos de documento ).

AJAX generalmente implica enviar solicitudes HTTP de cliente a servidor y procesar la respuesta del servidor, sin recargar toda la página. (Asincrónicamente).

Javascript generalmente realiza el envío y recibe la respuesta de datos del servidor (tradicionalmente XML, a menudo otros formatos menos detallados como JSON)

El Javascript luego puede actualizar el DOM de la página dinámicamente para actualizar la vista del usuario.

Por lo tanto, 'Asychronous Javascript And XML'.

Hay otras opciones para actualizar la vista del usuario sin recargar la página, cosas como Flash y Applets, pero no parecen buenas soluciones para su caso. Parece que Javascript es el camino a seguir. Hay un montón de buen soporte para bibliotecas, como jQuery, tal como se usa en este sitio, por lo que no necesita escribir mucho Javascript usted mismo.

Ajax es más que recargar solo una parte de la página. Ajax son las siglas de Asynchronous Javascript And Xml.

La única parte de Ajax que necesita es el objeto XMLHttpRequest de javascript. Tienes que usarlo para cargar y recargar una pequeña parte de tu html como div o cualquier otra etiqueta.

¡Lea ese ejemplo y será profesional antes de lo que piensa!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX son las siglas de Asynchronous Javascript y XML. AJAX admite actualizaciones parciales de las páginas sin tener que volver a publicar la página completa en el servidor.

Hay muchas opciones para AJAX. Los dos más notables (posiblemente) son ASP.NET AJAX de Microsoft (anteriormente Atlas) y jQuery.

ASP.NET AJAX es relativamente fácil de configurar si ya está familiarizado con ASP.NET. jQuery es bueno si ya conoce javascript y permite un control muy granular sobre la consulta y actualización de su página.

HTH

Si está interesado, IBM tiene una serie de 10 (posiblemente más) partes en Ajax: Dominar Ajax parte 1

Aunque ya tiene algunos años, es una buena introducción (¡incluso si acabas de leer la primera parte!)

Creo que toda la serie debería aparecer aquí , aunque el sitio está siendo un poco lento para mí en este momento ...

Resumen:

Ajax, que consta de tecnología HTML, JavaScript ™, DHTML y DOM, es un enfoque excepcional que le ayuda a transformar las interfaces web torpes en aplicaciones Ajax interactivas. El autor, un experto en Ajax, demuestra cómo estas tecnologías funcionan juntas, desde una descripción general hasta una vista detallada, para hacer que el desarrollo web extremadamente eficiente sea una realidad fácil. También revela los conceptos centrales de Ajax, incluido el objeto XMLHttpRequest.

eso es ajax. no puede usar ajax sin javascript. debería mirar jquery y ejemplos de prototipos para tener una idea del uso.

Lo que está intentando hacer es técnicamente ajax. Ajax crea transacciones de fragmentos xhtml para actualizar secciones de una página. Javascript hace que estas solicitudes de obtención sean agradables y ordenadas.