2009-10-02 9 views
74

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

Pude obtener este comportamiento utilizando isoframes. Más detalladamente puse un enlace (digamos una imagen pequeña) en un pequeño isoframe. Cuando el usuario hace clic en este enlace, el navegador vuelve a cargar solo la página en el isoframe.

Sin embargo, creo que no es una forma elegante de alcanzar el objetivo. 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 estelar" cerca de un mensaje. Si un usuario hace clic en la estrella (le gusta el mensaje), la estrella cambia el color y la base de datos de actualización de mi servidor (para recordar que al usuario le gusta el mensaje).

+8

enlace obligatorio a Wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming) –

+0

Para la respuesta por favor visite el enlace: http://www.w3schools.com/php/php_ajax_intro. asp –

Respuesta

1

que es ajax. no puedes usar ajax sin javascript. debería ver ejemplos de jquery y prototipos para tener una idea del uso.

+0

Puede hacer AJAX con VBScript, según algunas fuentes. Sin embargo, no hay una buena razón para hacerlo. :-) – Nosredna

+0

No, no puedes. Puede hacer AVAX con VBScript. –

+6

Heh. Escuché que AJAX es Asynchronous JavaScript and XML. Excepto que no tiene que ser asincrónico, no tiene que ser JavaScript, y no tiene que ser XML. – Nosredna

0

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

5

AJAX significa Javascript asíncrono y XML. AJAX admite actualizaciones parciales en páginas sin tener que publicar toda la página 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 la actualización de su página.

HTH

+1

XML, no XHTML, ¿verdad? – Nosredna

+0

@Nosredna: Sí. – Stardust

17

AJAX normalmente implica el envío de peticiones HTTP desde el cliente al servidor y procesar la respuesta del servidor, sin necesidad de recargar la página entera. (Asincrónicamente).

Javascript en general, hace la presentación y recibe la respuesta de datos desde el servidor (tradicionalmente XML, a menudo otros formatos menos prolijas como JSON)

El Javascript a continuación, puede actualizar el DOM página de forma dinámica para actualizar la vista del usuario.

Así 'Asychronous Javascript Y XML'.

Existen otras opciones para actualizar la vista del usuario sin tener que volver a cargar la página, como Flash y Applets, pero estas no parecen ser buenas soluciones para su caso. Parece que Javascript es el camino a seguir. Hay un montón de buen soporte de biblioteca, como jQuery como se usa en este sitio, por lo que no es necesario escribir mucho Javascript.

+0

Me gusta esta respuesta. @Verrtex todo lo que debes saber es sobre XMLHttpRequest. – enguerran

15

La esencia de AJAX es la siguiente:

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

Es decir, su javascript puede enviar solicitudes GET y POST asincrónicas (normalmente a través de un objeto XMLHttpRequest) y luego utiliza los resultados de esas solicitudes para modificar su página (mediante la manipulación Document Object Model).

+0

¿Algun ejemplo de lo que pueda imaginarse de manera informal en el que pueda ver esta "actualización por su cuenta" en acción? –

13

Ajax es más que volver a cargar solo una parte de la página. Ajax significa Javascript Asincrónico Y Xml.

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

¡Lea eso example y será más pronto como crea!

<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> 
+1

A pesar de que namen AJAX no requiere XML, pero X en la palabra/acrónimo AJAX significa XML porque históricamente es la forma de comunicarse entre el servidor y el cliente. – enguerran

109

Si usted es totalmente nuevo a AJAX (acrónimo de 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 utiliza una combinación de:

  • HTML y CSS para marcar y información de estilo.
  • El DOM accedido con JavaScript a muestra dinámicamente e interactúa con la información presentada.
  • Un método para intercambiar datos de forma asíncrona entre el navegador y el servidor, de ese modo evitando recargas de página. El objeto XMLHttpRequest (XHR) suele ser utilizado, pero a veces se utiliza un objeto IFrame o una etiqueta añadida dinámicamente en su lugar .
  • Un formato para los datos enviados al navegador. Los formatos comunes incluyen XML, HTML preformateado, texto simple y notación de objetos JavaScript (JSON). Esta información podría crearse dinámicamente mediante algún tipo de scripting del lado del servidor .

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

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

alt text

Para la parte naranja, puede hacer todo a mano (con el objeto XMLHttpRequest) o puede usar librerías JavaScript famosas como jQuery, Prototype, YUI, etc. para "AJAXify" en el lado del cliente de su aplicación.Dichas bibliotecas tienen como objetivo ocultar la complejidad del desarrollo de JavaScript (por ejemplo, la compatibilidad entre navegadores), pero podría ser excesivo para una función simple.

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

1

Si está interesado, IBM tiene una (posiblemente más) series 10 Participa en Ajax: (incluso si usted acaba de leer la primera parte) Mastering Ajax part 1

Aunque pocos años ahora es una buena introducción,

creo que toda la serie debe aparecer Here, aunque el sitio es ser un poco lento para mí en este momento ...

Resumen:

Ajax, que consiste en HTML, tecnología JavaScript ™, DHTML y DOM, es un enfoque sobresaliente que lo ayuda a transformar interfaces Web torpes en aplicaciones interactivas Ajax. El autor, un experto de Ajax, demuestra cómo estas tecnologías funcionan juntas, desde una perspectiva general hasta una perspectiva 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.

Cuestiones relacionadas