Primeros pasos con el ajax

Esta guía proporciona algo de información básica sobre el Ajax, y luego salta a la derecha y le ayudará a comenzar con ejemplos.

javascript ha sido el principal uso de objetos XMLHttpRequest para un buen número de años, pero sólo recientemente se hizo comenzar a ganar un poco de “fama”. Una gran parte del alboroto tiene que ver con las muchas aplicaciones web avanzadas que tienen los desarrolladores web que lo ven, babear y quieren su propio sitio disponer de esas mismas exactas aplicaciones / funciones avanzadas. Pero algunos de que también tiene que ver con el grupo de personas en AdaptivePath que han llamado esta aplicación Ajax

Ajax principiantes: Lo que en el mundo es Ajax?

Vídeo: Primeros pasos en Ajax con Visual Basic 2005 - 1ª Parte

¿En una palabra? Así Ajax es una solución para interfaces web.

Comúnmente, el usuario introduce algunos datos o hace una elección sencilla, y hace clic en un botón de finalizar esa elección o la entrada de datos y envía los datos al servidor. El servidor apresuradamente observa los datos y los envía de vuelta a toda una nueva página web. Tener que recargar una página cada vez que quiera hacer algo es muy molesto, disyuntivas y consume mucho tiempo para el usuario. XMLHttpRequest resurge la interacción del navegador-servidor para detrás de la escena, por lo que el usuario puede simplemente seguir jugando con la misma página, incluso cuando elementos de la página están hablando con el servidor!

Con javascript siempre hemos sido capaces de script del lado del servidor sin que pase nada en el navegador mediante el uso de algunos trucos clásicos bajo la manga.

El almacenamiento en caché los datos del formulario a un archivo con javascript en el servidor es bueno, pero esto generalmente no devuelve ninguna información útil para el código javascript que se llama, por lo que su eficacia es muy limitada. Ajax, sin embargo, se puede conseguir un paquete completo de datos de vuelta de la secuencia de comandos que llama. De ahí que la parte “XML” del nombre - lo que realmente es sólo existe para las miradas de las clases, algo así como la parte “Java” de javascript, ya que los datos devueltos pueden ser texto sin formato o lo que quiera, si no es su XML opción preferida.

Esto por sí solo abre tantas posibilidades muy interesantes. Cada envío del formulario, todos los eventos de javascript, y cualquiera que sea la aplicación más, ahora pueden interactuar con bases de datos del lado del servidor y la potencia de procesamiento! recuperación de datos, autenticación de contraseña, la generación de imágenes - que acaba de nombrarlo, Ajax puede activarlo.

Poner en Práctica Ajax

La única cosa que limita la aplicación web mejorada en Ajax es su imaginación y por el apoyo navegador. navegadores basados ​​en Mozilla pueden hacerlo, Safari, y las nuevas versiones de Internet Explorer y Opera 8, pero no Opera 7. Es mejor a la ranura de una manera alternativa de hacer las cosas para los usuarios que no son tan ingenioso como que usted esperaría que sean. Además, Internet Explorer hace las cosas un poco diferente (definitivamente) de todos los otros navegadores, por lo que es bastante esencial para trabajar el código para dar cuenta de la fastidiosa 80% de la población que dependen de la Explorer.

Ahora, la parte emocionante! Vamos a generar una aplicación sencilla que puede aceptar la entrada del usuario, la pasa a algo de PHP en el servidor que lo comprueba contra una base de datos y devuelve el resultado al navegador en uso. Asimilamos en tres partes.

En primer lugar, necesitamos un formulario HTML. A medida que` puede ver a continuación:

Nota: Para usuarios sin el soporte adecuado para nuestro guión (llamado xhr.js), La forma será simplemente presentar a la página de reserva en fallbackpage.php. Ok, aquí es donde entra el código javascript en, vamos a tomar las cosas con calma.

grado de función (ensayo) {

Lo primero que tenemos que hacer es inicializar el objeto. Hay dos maneras tenemos que hacer esto, para diferentes navegadores.

// Mozilla versionif (window.XMLHttpRequest) {xhr = new XMLHttpRequest () -} // IE versionelse si (window.ActiveXObject) {xhr = new ActiveXObject ("Microsoft.XMLHTTP") -}

A continuación, escapar de la entrada del usuario para que sea el URL de fallos:

 ensayo = encodeURIComponent (ensayo) -

y el uso de la abierto método del objeto para abrir una nueva conexión con el script PHP:

 xhr.open ("ENVIAR","grade.php") -

El método requiere dos argumentos: primero, la método HTTP (GET o POST)- En segundo lugar, la URL del script. Un encabezado HTTP rápida afirma el guión de lo que se está haciendo, y luego el enviar método transmite la solicitud real:

xhr.setRequestHeader ( `Content-Type`, `application / x-www-form-urlencoded- charset = UTF-8`) - xhr.send (ensayo) -

Este último paso no es necesario para las solicitudes GET, en donde todos los datos pueden estar contenidos en la cadena de consulta de la URL.

La obtención de los resultados definitivos

Finalmente estamos listos para ver si la petición HTTP hicimos trabajó. los readyState propiedad cuenta a partir de cero durante la petición, y la muestra 4 cuando la página del servidor se ha cargado correctamente.

Vídeo: Aprende jQuery y Ajax desde cero

 xhr.onreadystatechange = function () {if (== xhr.readyState 4) {

Si, efectivamente, la solicitud real trabajado, entonces podemos obtener la salida del script del lado del servidor mediante la consulta de la responseText propiedad, que contiene una cadena. Para más de una salida de script de servidor complejo, una responseXML propiedad, que puede contener un objeto de documento completo de datos XML, es una opción también accesible.

 grado = xhr.responseText-alerta ("Buen ensayo. Su grado es " + Grado) -}} volver falsos

En conclusión, el tercer componente consta de script PHP, que básicamente vive en el servidor y espera pacientemente a que el javascript para pasarlo algunos datos jugosos para que pueda prosperar. En este ejemplo se utiliza algo de PHP, pero cualquier idioma en el que quieres - Ruby, Perl, C, ASP - puede hacer frente a sus necesidades también. El núcleo de este script de ejemplo es una función de lenguaje natural llamada grade_essay () que las calificaciones del estudiante ensayos de 1 a 100, pero voy a redactar esa parte para conservar el espacio.

? Lt; phpfunction grade_essay ($ ensayo) {return strlen ($ ensayo) -} $ = urldecode ensayo (implosión (archivo ( `php: // input`))) - $ = grado grade_essay ($ ensayo) de grado $ -echo - gt;

los php: // input agarra los datos POST, que consigue puesto en una cadena, decodifican y se pasa al algoritmo de clasificación inteligente. El algoritmo devuelve una calificación numérica. Por último, acabamos de salida del grado con eco - Normalmente, esto sería mostrar en el navegador, pero ya que el script PHP se está ejecutando “detrás de las escenas”, la cadena de salida se devuelve al javascript que lo llamó. Si necesita datos estructurados, un documento XML sería la salida con una eco declaración en la misma forma, pero el tipo de contenido de la página de salida, básicamente, se debe establecer en text / xml.

Lo que el usuario ve es la siguiente: los tipos que él / ella su ensayo en el área de texto en el navegador, hace clic en Enviar, y dentro de un cuadro de alerta instantes aparece dando él / ella una calificación final en el ensayo. Invisible, el ensayo ha sido enviado al servidor, leer y evaluadas por un equipo de elfos PHP, e inevitablemente regresado con un grado, sin tener que recargar la página. El usuario puede modificar su ensayo y volver a enviarlo de forma continua.

Y ese es el contenido general del objeto XMLHttpRequest casi mágico! El ejemplo es bastante simple y recta hacia adelante, pero los usos del objeto puede ser muy, múltiples inteligente.

Para más inspiración y grandes ejemplos de aplicaciones Ajax ingeniosas puede momentáneamente alejarse de SimpleHelp.Net y visitar iGoogle, Pageflakes, Netflix y Netvibes.

Sin embargo, los datos y las funciones que el Ajax envía y actúa a cabo es simplemente depende de usted.