Solicitar un proyecto de sala de chat .NET

Oh

No lo entiendes

Ajax consta de tecnología HTML, JavaScript, DHTML y DOM. Este excelente método puede transformar interfaces web torpes en Ajax interactivo. aplicaciones. El autor de este artículo, un experto en Ajax, demuestra cómo estas tecnologías funcionan juntas (desde una descripción general hasta una discusión detallada) para hacer realidad el desarrollo web eficiente. También desmitifica los conceptos básicos de Ajax, incluido el objeto XMLHttpRequest.

Hace cinco años, si no conocías XML, eras un patito feo al que nadie tomaba en serio. Hace dieciocho meses, Ruby se convirtió en el centro de atención y los programadores que no conocían Ruby tuvieron que sentarse en el banco. Hoy en día, si quieres estar al día con las últimas novedades tecnológicas, tu destino es Ajax.

Pero Ajax es más que una moda pasajera: es una forma poderosa de crear sitios web que no es tan difícil como aprender un idioma completamente nuevo.

Pero antes de entrar en detalles de qué es Ajax, tomemos unos minutos para entender qué hace Ajax. Actualmente existen dos opciones básicas a la hora de escribir aplicaciones:

·Aplicaciones de escritorio

·Aplicaciones web

Las dos son similares, aplicaciones de escritorio El programa suele aparecer CD (a veces descargable desde un sitio web) y está completamente instalado en su computadora. Las aplicaciones de escritorio pueden usar Internet para descargar actualizaciones, pero el código que ejecuta estas aplicaciones está en la computadora de escritorio. Una aplicación web se ejecuta en un servidor web en algún lugar; no es sorprendente que se acceda a dicha aplicación a través de un navegador web.

Sin embargo, más importante que dónde se coloca el código que ejecuta estas aplicaciones es cómo funcionan las aplicaciones y cómo interactúa con ellas. Las aplicaciones de escritorio son generalmente rápidas (se ejecutan directamente en su computadora sin esperar una conexión a Internet), tienen una hermosa interfaz de usuario (generalmente depende del sistema operativo) y son notablemente dinámicas. Puede hacer clic, seleccionar, escribir, abrir menús y submenús, navegar y básicamente no esperar nunca.

Por otro lado, las aplicaciones web son la última tendencia y ofrecen servicios que no son posibles en el escritorio (como Amazon.com y eBay). Sin embargo, con el poder de la Web surge la necesidad de esperar, esperar a que el servidor responda, esperar a que se actualice la pantalla, esperar a que regrese la solicitud y generar una nueva página.

Obviamente esto es demasiado simplista, pero el concepto básico es así. Como habrás adivinado, Ajax intenta unir la funcionalidad y la interactividad de las aplicaciones de escritorio con las aplicaciones web en constante evolución. Puede utilizar interfaces de usuario dinámicas y controles atractivos como los que se encuentran en las aplicaciones de escritorio, pero en una aplicación web.

¿A qué estás esperando? Echemos un vistazo a cómo Ajax transforma interfaces web torpes en aplicaciones Ajax responsivas.

Tecnología antigua, técnicas nuevas

Cuando se habla de Ajax, en realidad se trata de una variedad de tecnologías. Para utilizarlo de forma flexible, se debe tener un conocimiento profundo de estas diferentes tecnologías (. (el jefe de esta serie (varios artículos analizarán cada una de estas técnicas). La buena noticia es que probablemente ya esté muy familiarizado con la mayoría de estas tecnologías, y lo mejor aún es que todas son fáciles de aprender y no tan difíciles como un lenguaje de programación completo como Java o Ruby.

Las siguientes son las tecnologías básicas utilizadas en las aplicaciones Ajax:

·HTML se utiliza para crear formularios web y determinar los campos utilizados por otras partes de la aplicación.

·El código JavaScript es el código central que ejecuta las aplicaciones Ajax y ayuda a mejorar la comunicación con las aplicaciones del servidor.

·DHTML o HTML dinámico para actualizar formularios dinámicamente. Marcaremos HTML usando divs, spans y otros elementos HTML dinámicos.

·El Modelo de Objetos de Documento DOM se utiliza para procesar (a través de código JavaScript) la estructura de HTML y (en algunos casos) el XML devuelto por el servidor.

Definición de Ajax

Por cierto, Ajax es la abreviatura de JavaScript asíncrono y XML (y DHTML, etc.). La frase fue acuñada por Jesse James Garrett de Adaptive Path (ver Temas relacionados) y, como explica Jesse, no es un acrónimo.

Analicemos más a fondo las responsabilidades de estas tecnologías. Hablaré de estas tecnologías en profundidad en artículos futuros, pero por ahora sólo familiarícese con los componentes y las tecnologías. Cuanto más familiarizado esté con el código, más fácil será pasar de una comprensión vaga de estas tecnologías a una comprensión real de ellas (y también abrir verdaderamente la puerta al desarrollo de aplicaciones web).

El objeto XMLHttpRequest

El único objeto que debe conocer también puede ser el más desconocido para usted: XMLHttpRequest. Este es un objeto JavaScript que es fácil de crear, como se muestra en el Listado 1.

Listado 1. Creando un nuevo objeto XMLHttpRequest

Discutiremos este objeto más a fondo en el próximo artículo, pero por ahora sepa que este es el objeto que maneja todas las comunicaciones del servidor. Antes de seguir leyendo, detente y piensa en esto: la tecnología JavaScript es la que se comunica con el servidor a través del objeto XMLHttpRequest. Este no es el flujo de aplicaciones promedio y de ahí proviene el poder de Ajax.

En una aplicación web típica, el usuario completa los campos del formulario y hace clic en el botón Enviar. Luego, el formulario completo se envía al servidor, que lo reenvía a un script que maneja el formulario (generalmente PHP o Java, tal vez un proceso CGI o algo similar), que completa su ejecución antes de enviar una página nueva. La página puede ser HTML con un nuevo formulario ya completado con algunos datos, puede ser una página de confirmación o puede ser una página con algunas opciones seleccionadas según los datos ingresados ​​en el formulario original. Por supuesto, el usuario debe esperar mientras el script o programa en el servidor procesa y devuelve el nuevo formulario. La pantalla se queda en blanco y espera hasta que el servidor devuelva los datos antes de volver a dibujarlos. Esta es la razón por la cual la interactividad es pobre, el usuario no recibe retroalimentación inmediata, por lo que se siente diferente a una aplicación de escritorio.

Ajax básicamente coloca la tecnología JavaScript y el objeto XMLHttpRequest entre el formulario web y el servidor. Cuando el usuario completa el formulario, los datos se envían a algún código JavaScript en lugar de directamente al servidor. En cambio, el código JavaScript captura los datos del formulario y envía una solicitud al servidor. Al mismo tiempo, el formulario en la pantalla del usuario no parpadeará, desaparecerá ni se retrasará. En otras palabras, el código JavaScript envía la solicitud entre bastidores sin que el usuario sepa siquiera que se está realizando la solicitud. Aún mejor, la solicitud se envía de forma asincrónica, lo que significa que el código JavaScript (y el usuario) no tienen que esperar una respuesta del servidor. Para que el usuario pueda continuar ingresando datos, desplazarse y usar la aplicación.

Luego, el servidor devuelve los datos al código JavaScript (aún en el formulario web), que decide qué hacer con los datos. Actualiza los datos del formulario rápidamente, dando la impresión de que la solicitud se completa instantáneamente, sin que el formulario se envíe o actualice y el usuario obtenga nuevos datos. El código JavaScript puede incluso realizar algunos cálculos sobre los datos recibidos y enviar otra solicitud, ¡todo sin la intervención del usuario! Este es el poder de XMLHttpRequest. Puede interactuar con el servidor por sí solo según sea necesario, y el usuario puede incluso ignorar por completo lo que sucede detrás de escena.

El resultado es una experiencia dinámica, receptiva y altamente interactiva similar a una aplicación de escritorio, pero con todo el poder de Internet detrás.

Agregue algo de JavaScript

Después de dominar XMLHttpRequest, el resto del código JavaScript es muy simple. De hecho, usaremos código JavaScript para realizar tareas muy básicas:

·Obtener datos de formulario: el código JavaScript facilita la extracción de datos de un formulario HTML y su envío al servidor.

·Modificar los datos del formulario: Actualizar el formulario también es muy sencillo, desde establecer valores de campos hasta reemplazar rápidamente imágenes.

·Análisis de HTML y XML: utilice código JavaScript para manipular el DOM (consulte la siguiente sección) y procesar la estructura de los datos XML devueltos por el servidor de formularios HTML.

Para los dos primeros puntos, es necesario estar muy familiarizado con el método getElementById(), como se muestra en el Listado 2.

Listado 2. Capturar y configurar valores de campo con código JavaScript

// Obtener el valor del campo "teléfono" y rellenarlo en una variable llamada teléfono

var phone = document.getElementById("phone").value;

// Establece algunos valores en un formulario usando una matriz llamada respuesta

document.getElementById( "order") .value = respuesta[0];

document.getElementById("address").value = respuesta[1];

No hay nada especial que destacar aquí, ¡es genial! Debes darte cuenta de que aquí no hay nada terriblemente complicado. Una vez que domine XMLHttpRequest, el resto de su aplicación Ajax es un código JavaScript simple, como se muestra en el Listado 2, mezclado con una pequeña cantidad de HTML. Además, usando un poco de DOM, echemos un vistazo.

Termina con DOM

Finalmente está DOM, el Modelo de Objetos de Documento. El DOM puede resultar un poco intimidante para algunos lectores. Los diseñadores de HTML rara vez lo utilizan, e incluso los programadores de JavaScript rara vez lo utilizan a menos que quieran completar una tarea de programación de alto nivel. Los programas complejos de Java y C/C++ hacen un uso intensivo del DOM, lo que puede explicar por qué se considera que el DOM es difícil de aprender.

Afortunadamente, trabajar con el DOM en tecnología JavaScript es fácil y muy intuitivo. Ahora bien, convencionalmente probablemente deberías explicar cómo usar el DOM, o al menos dar algún código de ejemplo, pero hacerlo también podría inducirte a error. Aún puedes profundizar en Ajax sin preocuparte por el DOM, y ese es el enfoque que voy a adoptar. Revisaremos el DOM en un artículo futuro, pero por ahora basta con saber que es posible que lo necesites. Profundizamos en el DOM cuando se trata de pasar XML y cambiar formularios HTML entre el código JavaScript y el servidor. Puedes hacer algún trabajo interesante sin él, así que deja el DOM a un lado por ahora.

Obtener el objeto Solicitud

Con los conocimientos básicos anteriores, echemos un vistazo a algunos ejemplos específicos. XMLHttpRequest está en el corazón de las aplicaciones Ajax y puede resultar desconocido para muchos lectores, así que comencemos por ahí. Como puede ver en el Listado 1, crear y usar este objeto es bastante simple, ¿no es así? Esperar.

¿Recuerdas aquellas desagradables guerras de navegadores de hace unos años? Nada da los mismos resultados en diferentes navegadores. Lo creas o no, estas guerras todavía continúan, aunque en menor escala. Pero, curiosamente, XMLHttpRequest se convirtió en una de las víctimas de esta guerra. Por lo tanto, obtener un objeto XMLHttpRequest puede requerir un enfoque diferente. Lo explicaré en detalle a continuación.

Uso del navegador Microsoft

El navegador Microsoft Internet Explorer utiliza un analizador MSXML para procesar XML (puede obtener más información sobre MSXML en Temas relacionados). Por lo tanto, si escribe una aplicación Ajax para interactuar con Internet Explorer, debe crear objetos de una manera especial.

Pero no es tan sencillo. En realidad, existen dos versiones diferentes de MSXML dependiendo de la versión de la tecnología JavaScript instalada en Internet Explorer, por lo que debes codificar por separado para cada caso. Consulte el Listado 3, que contiene código que crea una XMLHttpRequest en un navegador de Microsoft.

Listado 3. Creación de un objeto XMLHttpRequest en navegadores Microsoft

var xmlHttp = false;

pruebe {

xmlHttp = new ActiveXObject ( "Msxml2.XMLHTTP");

} captura (e) {

prueba {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

xmlHttp = false;

}

}

¿Qué opinas de ¿Estos códigos? Puede que no los entiendas del todo, pero está bien. Al final de esta serie, tendrá una comprensión más profunda de la programación JavaScript, el manejo de errores, la compilación condicional y más. Ahora sólo recuerde estas dos líneas de código:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

y

xmlHttp = new ActiveXObject ("Microsoft .XMLHTTP");.

Estas dos líneas de código básicamente intentan crear un objeto usando una versión de MSXML y, si eso falla, crean el objeto usando otra versión. No está mal, ¿verdad? Si ninguno de los dos tiene éxito, la variable xmlHttp se establece en falso, lo que indica al código que algo anda mal. Si esto ocurre, puede deberse a que tiene instalado un navegador que no es de Microsoft y requiere un código diferente.

Manejo de navegadores Mozilla y que no son de Microsoft

Si elige un navegador que no sea Internet Explorer, o si escribe código para un navegador que no es de Microsoft, necesitará usar un código diferente. . En realidad, es la línea simple de código que se muestra en el Listado 1:

var xmlHttp = nuevo objeto XMLHttpRequest;.

Esta línea de código mucho más simple crea un objeto XMLHttpRequest en Mozilla, Firefox, Safari, Opera y básicamente en todos los navegadores que no sean de Microsoft que admitan Ajax en cualquier forma.

Combinados

La clave es admitir todos los navegadores.

¿Quién quiere escribir una aplicación que sólo funcione con Internet Explorer o con navegadores que no sean de Microsoft? ¿O peor aún, escribir una solicitud dos veces? ¡Por supuesto que no! Por lo tanto, el código debe ser compatible tanto con Internet Explorer como con navegadores que no sean de Microsoft. El Listado 4 muestra dicho código.

Listado 4. Cree un objeto XMLHttpRequest de manera que admita múltiples navegadores

/* Cree un nuevo objeto XMLHttpRequest para comunicarse con el servidor web */

var xmlHttp = false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

prueba {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

prueba {

xmlHttp = new ActiveXObject(" Microsoft.XMLHTTP");

} captura (e2) {

xmlHttp = false;

}

}

@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'indefinido') {

xmlHttp = new XMLHttpRequest();

}

Por ahora, ignore los símbolos extraños comentados, como @cc_on. Este es un comando especial del compilador de JavaScript que se analizará en detalle en el próximo artículo sobre XMLHttpRequest. El núcleo de este código se divide en tres pasos:

1. Cree una variable xmlHttp para hacer referencia al objeto XMLHttpRequest que se creará.

2. Intente crear el objeto en el navegador de Microsoft:

1) Intente crearlo utilizando el objeto Msxml2.XMLHTTP.

2) Si falla, intente nuevamente con el objeto Microsoft.XMLHTTP.

2. Si aún no se crea xmlHttp, cree el objeto de una forma que no sea de Microsoft.

Finalmente, xmlHttp debe hacer referencia a un objeto XMLHttpRequest válido, sin importar qué navegador esté ejecutando.

Algunas notas sobre seguridad

¿Qué tal la seguridad? Los navegadores ahora permiten a los usuarios aumentar su nivel de seguridad, desactivar la tecnología JavaScript y desactivar cualquier opción en el navegador. En este caso, el código no funcionará de todos modos. En este punto, es necesario abordar el problema de manera adecuada, lo que requiere un artículo aparte para más adelante (esta serie es bastante larga, ¿verdad? No te preocupes, es posible que la domines antes de terminar de leer). Ahora es el momento de escribir un código que sea robusto pero no perfecto, que sea bueno para dominar Ajax. Discutiremos esto con más detalle más adelante.

Solicitud/Respuesta en el mundo Ajax

Ahora que tenemos una introducción a Ajax, tenemos una comprensión básica del objeto XMLHttpRequest y cómo crearlo. Si ha leído con atención, probablemente ya sepa que es la tecnología JavaScript la que se ocupa de una aplicación web en el servidor, no un formulario HTML que se envía directamente a esa aplicación.

¿Qué falta? Exactamente cómo utilizar XMLHttpRequest.

Debido a que este código es tan importante que cada aplicación Ajax que escriba lo usará de alguna forma, comencemos viendo cómo se ve el modelo básico de solicitud/respuesta de Ajax.

Realizar una solicitud

Tienes un objeto XMLHttpRequest nuevo, ahora déjalo trabajar. Primero, necesita un método JavaScript al que la página web pueda llamar (como cuando el usuario ingresa texto o selecciona un elemento de un menú). El siguiente es un proceso que es básicamente el mismo en todas las aplicaciones Ajax:

1. Obtener los datos requeridos del formulario web.

2. Crea la URL a conectar.

3. Abrir la conexión al servidor.

4. Configure la función que ejecutará el servidor una vez finalizada.

5. Enviar una solicitud.

Los métodos Ajax de muestra en el Listado 5 están organizados en este orden:

Listado 5. Realizar una solicitud Ajax

función callServer() {

// Obtener la ciudad y el estado desde el formulario web

var city = document.getElementById("city").value;

var state = document.getElementById(" state").value;

// Solo continúa si hay valores para ambos campos

if ((city == null) || (city == "" )) return;

if ((state == null) || (state == "")) return;

// Crea la URL para conectarte

var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

// Abrir una conexión al servidor

xmlHttp.open("GET", url, true);

// Configura una función para que el servidor se ejecute cuando esté listo

xmlHttp.onreadystatechange = updatePage ;

// Enviar la solicitud

xmlHttp.send(null);

}

La mayoría de los códigos son muy claros. El código al principio utiliza código JavaScript básico para obtener los valores de algunos campos del formulario. Luego configure un script PHP como destino del enlace. Observe cómo se especifica la URL del script, la ciudad y el estado (del formulario) se agregan a la URL mediante parámetros GET simples.

Luego se abre una conexión, que es la primera vez que ve que se utiliza XMLHttpRequest. Se especifican el método de conexión (GET) y la URL a la que conectarse. El último parámetro, si se establece en verdadero, solicitará una conexión asincrónica (de aquí proviene Ajax). Si se usa falso, el código esperará una respuesta del servidor después de realizar la solicitud. Si se establece en verdadero, los usuarios aún pueden usar el formulario (e incluso llamar a otros métodos de JavaScript) mientras el servidor maneja las solicitudes en segundo plano.

El atributo onreadystatechange de xmlHttp (recuerde, esta es una instancia de objeto XMLHttpRequest) le dice al servidor qué hacer después de que haya terminado de ejecutarse (lo que puede tardar cinco minutos o cinco horas). Debido a que el código no está esperando al servidor, debe informarle qué hacer para que usted pueda responder. En este ejemplo, si el servidor ha terminado de procesar la solicitud, se activará un método especial llamado updatePage().

Finalmente, se llama a send() con el valor nulo. Debido a que los datos que se enviarán al servidor (ciudad y estado) se agregaron a la URL de la solicitud, no es necesario enviar datos en la solicitud. De esta manera se realiza la solicitud y el servidor funciona según su solicitud.

Si no encuentra nada nuevo, ¡debería apreciar lo sencillo que es! Aparte de tener en cuenta la naturaleza asincrónica de Ajax, todo esto es bastante simple. Agradezca que Ajax le permita concentrarse en escribir hermosas aplicaciones e interfaces en lugar de preocuparse por códigos complejos de solicitud/respuesta HTTP.

El código del Listado 5 ilustra la facilidad de uso de Ajax. Los datos son texto simple que se puede utilizar como parte de la URL de solicitud. Envíe solicitudes utilizando GET en lugar del POST más complejo. No hay XML ni encabezados de contenido para agregar, ni datos para enviar en el cuerpo de la solicitud; en otras palabras, esto es la utopía de Ajax;

No te preocupes, las cosas se volverán más complicadas a medida que se desarrolle esta serie de artículos. Verá cómo enviar una solicitud POST, cómo configurar encabezados de solicitud y tipos de contenido, cómo codificar XML en mensajes, cómo aumentar la seguridad de sus solicitudes y ¡mucho más que puede hacer! No se preocupe por esas dificultades por ahora, simplemente domine los aspectos básicos y pronto crearemos un conjunto completo de bibliotecas de herramientas Ajax.

Procesando la respuesta

Ahora te toca afrontar la respuesta del servidor. Sólo dos cosas que debes saber por ahora:

· No hacer nada hasta que el valor de la propiedad xmlHttp.readyState sea igual a 4.

·El servidor completará la propiedad xmlHttp.responseText con la respuesta.

El primero de ellos, el estado listo, se analizará en detalle en el próximo artículo y aprenderá más sobre las etapas de una solicitud HTTP de lo que probablemente pensaba. Por ahora basta con comprobar un valor específico (4) (habrá más valores que cubrir en el próximo artículo). Segundo punto, use la propiedad xmlHttp.responseText para obtener la respuesta del servidor, es fácil. El servidor puede llamar al método de ejemplo del Listado 6 en función de los datos enviados en el Listado 5.

Listado 6. Procesamiento de la respuesta del servidor

función updatePage() {

if (xmlHttp.readyState == 4) {

var respuesta = xmlHttp.responseText;

document.getElementById("zipCode").value = respuesta;

}

}

Estos El código tampoco es difícil ni complejo. Espera la llamada del servidor y, si está listo, establece el valor de otro campo del formulario utilizando el valor devuelto por el servidor (aquí la codificación ZIP de la ciudad y el estado ingresados ​​por el usuario). ¡De repente aparece el campo zipCode que contiene la codificación ZIP sin que el usuario presione ningún botón! Así es como se siente la aplicación de escritorio mencionada anteriormente. Respuesta rápida, sensación dinámica, etc., todo gracias a un pequeño fragmento de código Ajax.

Los lectores atentos pueden notar que zipCode es un campo de texto normal. Una vez que el servidor devuelve la codificación ZIP, el método updatePage() establece el valor de ese campo con la codificación ZIP de ciudad/estado, que el usuario puede anular.

Hay dos razones para hacer esto: mantener el ejemplo simple y para ilustrar que a veces es posible que desee que el usuario pueda modificar los datos devueltos por el servidor. Tenga en cuenta estas dos cosas, son importantes para un buen diseño de interfaz de usuario.

Conectando formularios web

¿Qué más? En realidad no queda mucho. Un método de JavaScript captura la información que el usuario ingresa en el formulario y la envía al servidor, y el otro método de JavaScript escucha y procesa la respuesta y establece el valor del campo cuando llega la respuesta. En realidad, todo esto se basa en llamar al primer método de JavaScript, que inicia todo el proceso. La solución más obvia es agregar un botón al formulario HTML, pero eso es 2001, ¿no crees? Usemos tecnología JavaScript como el Listado 7.

Listado 7. Iniciando un proceso Ajax

Si esto te parece bastante ordinario código, así es, ¡exactamente así! Cuando el usuario ingresa un nuevo valor en el campo ciudad o estado, se activa el método callServer() y Ajax comienza a ejecutarse. ¿Entiendes un poco lo que está pasando? Bueno, ¡eso es todo!

Conclusión

Ahora que probablemente esté listo para comenzar a escribir su primera aplicación Ajax, al menos querrá leer los artículos en Recursos, ¿verdad? Pero puede comenzar con una idea básica de cómo funcionan estas aplicaciones y una comprensión básica del objeto XMLHttpRequest. En la próxima entrega, dominará este objeto y aprenderá cómo manejar la comunicación JavaScript con el servidor, cómo usar formularios HTML y cómo obtener un identificador DOM.

Tómate un momento para considerar cuán poderosas pueden ser las aplicaciones Ajax. Imagine un formulario web que respondiera instantáneamente cuando hiciera clic en un botón, ingresara un campo, seleccionara una opción de un cuadro combinado o arrastrara el mouse por la pantalla. Piense en lo que realmente significa async, piense en el código JavaScript ejecutándose y no esperando a que el servidor responda a su solicitud. ¿Qué tipo de problemas encontrarás? ¿En qué tipo de campo entrará? Dado este nuevo enfoque, ¿cómo deberíamos cambiar el diseño del formulario al programar?

Si dedicas un poco de tiempo a estos temas, obtendrás algo más que simplemente cortar/pegar código en una aplicación que no entiendes en absoluto. En la próxima entrega, pondremos estos conceptos en práctica y detallaremos el código necesario para que la aplicación funcione de esta manera. Por ahora, disfrute de las posibilidades que Ajax tiene para ofrecer.