noviembre 04, 2010

AJAX




AJAX


Cuando la capacidad existente se está agotando, y mejorar la ya existente en ninguna parte, y luego ir en un avance tecnológico. Este gran avance y ha AJAX (Asynchronous JavaScript y XML) - una aproximación a la construcción de interfaces de usuario, aplicaciones web, en los que la página web sin tener que reiniciar sumarse a la carga de las necesidades de los datos del usuario. AJAX - Uno de los componentes del concepto de DHTML.

¿Qué nos da la tecnología. En la actualidad, el desarrollo de aplicaciones WEB tiende a diferenciar el lado del cliente y el servidor, y esto es causado por el uso generalizado de las plantillas, como Smarty, y XSLT. Ahora el proyecto se ha vuelto más complicada y se entrelazan las diversas tecnologías a ser demasiado costoso para los desarrolladores. Por ejemplo, todos los estilos de formato prestados en los archivos CSS o XSL, HTML o XML de datos almacenados en otras secciones, los procesadores de servidor en el tercero, la base de datos en el cuarto. Y si hasta hace 5-6 años, en casi todas partes se podía ver la interrelación de todos estos en un archivo, ahora se está convirtiendo en una rareza.

En el desarrollo de proyectos más complejos es necesario en la estructuración y legibilidad. No hay que desordenar el código de un código programador programador y el codificador de código - diseñador de correcciones, y así sucesivamente.

Hay una necesidad en la diferenciación del trabajo. Por ejemplo, el diseñador hará su trabajo, su programador, desarrollador de los suyos, y mientras que nadie interfiera con los demás no lo harán. Como resultado, cada participante será suficiente saber sólo los datos con los que tienen que trabajar. En este caso, la productividad y la calidad del proyecto aumentó de manera significativa. En la actualidad, este problema está resuelto con éxito mediante el uso de plantillas, sino que también crea ciertas dificultades en cuanto a, por ejemplo, conectar Smarty, es necesario conectar un módulo de software para el procesamiento de plantillas, y claramente se refieren a la estructura del proyecto. Y esto no es siempre posible y requiere un cierto costo. Un poco más fácil el uso del ligamento XML + XSL, ya que proporcionan más oportunidades, pero cuando esta alternativa, no más. Pero ¿y si nos fijamos en la dirección de algo radicalmente nuevo, que permiten combinar todo lo mejor, tomando ventaja de lo que es? Trate de JavaScript, que tiene todas las características de PHP o Perl, incluyendo el trabajo con gráficos y base de datos, que tiene una capacidad de expansión mucho más conveniente y práctico, y también de plataforma cruzada.

Entonces, ¿qué es AJAX? Por primera vez habló de Ajax después de la aparición en febrero de 2005, el artículo Jesse James Garrett (Jesse James Garrett) "Un nuevo enfoque de las aplicaciones Web." Ajax - no es una tecnología independiente. Esta idea se basa en dos principios básicos.
Utilizando DHTML para cambiar dinámicamente el contenido de la página.
Uso de XMLHttpRequest para comunicarse con un servidor sobre la marcha. "

El uso de estos dos enfoques le permite crear una interfaz mucho más conveniente WEB del usuario en las páginas de los sitios en los que deben interactuar activamente con el usuario. Uso de Ajax se ha convertido en el más popular después de que Google ha comenzado a utilizar activamente para la creación de sus sitios web como Gmail, Google Maps y Google sugieren. La creación de estos sitios confirmado la eficacia de este enfoque.

Así que más: si tomamos el modelo clásico de aplicaciones web:



Cliente escribiendo en la barra de direcciones de búsqueda de interés para los recursos, consiguiendo en el servidor, convirtiéndolo en el pedido. El servidor realiza los cálculos de acuerdo con la solicitud, accede a la base de datos y así sucesivamente, a continuación, los datos recibidos va al cliente y, si es necesario sustituir en las plantillas y el navegador procesa. El resultado es una página que vemos, y que el 80% de la población ubicada en la WEB se llama Internet. Este es un modelo clásico que ha tenido tiempo para probar y ganar un lugar de honor en el sol. Este es el modelo más simple de interacción y, en consecuencia, los más comunes. Sin embargo, es cada vez más escasos. Imagínese, en línea de juego "Acorazado", que es jugado por dos amigos empedernido - Sudáfrica y residente en Japón. Cómo utilizar este modelo para hacer su juego más agradable? En cualquier caso, estos barcos hundidos se almacenan en el servidor, y que no le gustaría comprobar si el oponente se requerirá cada vez que la actualización de la página y anticuado podguschat. "Pero la gente viene con el almacenamiento en caché - que usted dice y usted será toda la razón, pero es más fácil de no llegar a ser. El almacenamiento en caché sólo acelerar el tiempo de interacción con el servidor, pero no elimina la necesidad de recargar la página. Alternativamente, usted puede poner un poco de tiempo auto-renovación, pero en este caso, la página se recarga completamente
.
Ahora mira el modelo de interacción de AJAX:



La secuencia de las acciones del cliente persiste y es probable que no entienda lo que significa, pero la palabra AJAX se asocian únicamente con el nombre del club de fútbol. Pero en el lado del servidor todo se ve diferente.

Cuando acceda a un servidor genera la página que se muestra al usuario y le ofrecen el pago de intereses a su flujo de trabajo. Con conscientes (aunque no necesariamente) la petición del cliente seleccionado pondrá en contacto con el módulo de AJAX, lo que hará que todos sus cálculos de interés y el trabajo con el propio servidor. Pero, ¿qué es la innovación? La principal diferencia es que este método nos da la posibilidad de acceder de forma dinámica el servidor y realizar acciones de interés para nosotros. Por ejemplo, tenemos que hacer a la base de datos y obtener los datos de interés para nosotros entonces se va a utilizar. Los datos que se almacenan en un archivo XML que se creará de forma dinámica, por lo tanto:

Crea un nuevo JavaScript:


var req = new ActiveXObject ("Microsoft.XMLHTTP"); (para IE) req nuevas 
var = XMLHttpRequest (); (Para todo lo demás)

Luego escribe una función con el objeto


var req; 

function loadXMLDoc(url) {
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }



El cuerpo de un archivo HTML en escribir un script que:


function checkName(input, response)
{
  if (response != ''){ 
    // Response mode
    message   = document.getElementById('nameCheckFailed');
    if (response == '1'){
      message.className = 'error';
    }else{
      message.className = 'hidden';
    } 
  }else{
    // Input mode
    url  = 'http://localhost/xml/checkUserName.php?q=' \\
    + input;
    loadXMLDoc(url);
  }
}



El archivo localhost / xml / checkUserName.php procesamos los datos recibidos de la línea de comandos en este caso, la variable q. Y el resultado se guarda en una estructura XML que se pueden encontrar en el mismo archivo. Así que podemos recibir y procesar los datos de la base de datos, o cualquier otra cosa que nos necesite. Además, el servidor procesará únicamente los datos que necesitamos para actualizar y no la página entera en el caso de un reinicio.

Ahora de nuevo a dos amigos - los amantes de la batalla del mar: la luz del surgimiento de innovaciones, podemos hacer lo siguiente: ponga el cheque por cada tres segundos, el archivo XML de esta comprobación se entiende por una base de datos de prueba para el nuevo registro, que es - hecho por los opositores del progreso. Si el traslado se hizo, sin tener que recargar la página de los barcos se hunden, estropeando así el estado de ánimo de las peleas de agua. Esta funcionalidad se consigue utilizando de base el Javascript y hojas de estilo. Este ejemplo es muy ilustrativo, pero de ninguna manera completa, la aplicación de esta tecnología sea más importante.
Sin embargo, no todo lo que fácil. Consideremos ahora los aspectos negativos.

En primer lugar - se puede enviar sólo los datos por GET, respectivamente, grandes cantidades de datos tiene que estar solo. Este problema se ha planteado reiteradamente en diversas fuentes, pero señores, es a causa de cookies, las cuales son perfectamente aceptables en los casos de transmisión de más datos que caben en una petición GET, y Javascript, a su vez, tiene las funciones para trabajar con ellos.

El segundo problema - cross-browser. El objeto XMLHttpRequest no es parte de ninguna norma (aunque algo parecido ya se ha propuesto en la especificación de W3C DOM Nivel 3 Cargar y Guardar). Por lo tanto, hay dos métodos distintos de llamar a este objeto en el código de secuencia de comandos.

En Internet Explorer objeto ActiveX que se llama de la siguiente manera:


var req = new ActiveXObject ("Microsoft.XMLHTTP");

En Mozilla y Safari lo hacen más fácil (ya que es un objeto incrustado en JavaScript):

var req = new XMLHttpRequest ();


Todos los navegadores actuales son compatibles con este objeto y los problemas surgen solamente en 1,8% de los usuarios (de acuerdo con las estadísticas de SpyLOG), que utilizan versiones muy antiguas de los navegadores no son compatibles con este objeto.

Y, por último, la seguridad. Detenerse en este detalle. El problema principal es que todo el código fuente de los datos y funciones de JavaScript puede ser visto por ver el código fuente, respectivamente, un atacante puede rastrear la lógica de la consulta, y en determinadas circunstancias lo necesario para realizar un conjunto de comandos. Esto no quiere jugar un papel cuando estamos teniendo una simple comparación de los datos, pero qué hacer en situaciones de mayor complejidad, como la autorización, y como en este caso, enviar la contraseña. Como se mencionó anteriormente, vienen a la ayuda de cookies. Los datos necesarios se pueden enviar a través de ellos, sólo ellos y manejar. Tomemos un ejemplo en el que será el usuario autenticado utilizando la tecnología que se dedica al arte.





generación de la página, creamos valores únicos, que luego se ponen en las variables de servidor. Y en las cookies del navegador, y luego, cuando se obtiene la autorización de nombre de usuario y contraseña, lo que necesitamos para transferir módulo de procesamiento en el servidor.

Una vez que el usuario ha introducido los datos y haga clic en Enviar la contraseña introducida en las cookies, y el nombre de usuario se pasa está abierto - un ejemplo de referencia

http://www.mubestajax.com/ajax.php?login=pupkin 

datos del servidor de adquisición, sobre todo lleva a cabo conciliar los datos. Dado que los valores que hemos generado desde el inicio del servidor y luego pasó a las variables de servidor global y las cookies deben ser las mismas, a continuación, comprobar la integridad de los datos transferidos en caso de discrepancia entre el programa deja de funcionar. Si todo va bien, entonces se extrae todos los datos necesarios y realizar los cálculos necesarios y el trabajo. Este método de protección es simple y eficaz. Pero para los grandes proyectos, no va a funcionar.

Cuando llega a la vanguardia de la seguridad, es mejor utilizar soluciones más sofisticados y fiables. Pero en la mayoría de los casos, estas precauciones será más que suficiente, ya que el uso de más módulos compleja implica el uso de la tecnología no siempre están incluidas en el software estándar de servidores modernos, la característica principal de las cuales - la simplicidad. Es por ello que las tecnologías tales como MySQL y PHP han recibido muy extendida, ya que Ellos proporcionan la comodidad de uso en su fiabilidad suficiente pequeñas y de recursos. Una parte de este software es la solución mejor ajuste propuesto anteriormente.

En conclusión me gustaría decir que AJAX con una sola mano - un gran salto en la ingeniería Web, pero por otro lado es una etapa latente desde hacía tiempo de la evolución, que ha abierto nuevos horizontes en el campo de desarrollo de software. Al mismo tiempo, esta tecnología sigue siendo más bien "queso" debido a su uso en el momento más agradable excepción. Pero estoy seguro de que no lo ha oído todo el tiempo.
Autor: Alexander Orlov
Fuente: www.codenet.ru
Enlaces relacionados
Menú desplegable con CSS y JavaScript
JavaScript y parámetros GET-
Creación de un universal menú desplegable
"Vivir Menú" o "cómo hacer las paces con CSS y JavaScript"
Pre-carga de imágenes (precarga) y balanceo (rollover)
JavaScript FAQ

Toda la documentación de JavaScript

Equipo de documentación de la A a la Z - Inicio

No hay comentarios.:

Publicar un comentario