AJAX

Facilitador: Kenneth Alvarez

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Contenidos Instruccionales

AJAX Conceptos Básicos 
Caracteristicas de AJAX
Modelo Web Tradicional y Modelo AJAX
Ventajas e inconvenientes
Ejemplos 

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Conceptos básicos

Acrónimo de Asynchronous JavaScript + XML

Consiste en cargar y renderizar una página, luego mantenerse en esa página mientras 
scripts y rutinas van al servidor buscando, en background, los datos que son usados para 
actualizar la página solo re­renderizando la página y mostrando u ocultando porciones 
de la misma.

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Características

Ajax no es una tecnología. Es realmente muchas tecnologías.

 Presentación basada en estándares usando XHTML y CSS.
 Exhibición e interacción dinámicas usando el Document Object Model.
 Intercambio y manipulación de datos usando XML and XSLT.
 Recuperación de datos asincrónica usando XMLHttpRequest.
 y JavaScript poniendo todo junto.

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Comparación de Modelos

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Ventajas de AJAX

Las  aplicaciones  construidas  con  AJAX  eliminan  la  recarga  constante  de  páginas 
mediante la creación de un elemento intermedio entre el usuario y el servidor. La nueva 
capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca 
se encuentra con una ventana del navegador vacía esperando la respuesta del servidor.

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Inconvenientes de AJAX

 Las páginas con AJAX son mas difíciles de desarrollar que las páginas estáticas.

  Las  páginas  creadas  dinámicamente  mediante  peticiones  sucesivas  AJAX,  no  son 
registradas de forma automática en el historial del navegador, así que haciendo clic en 
el botón de "volver" del navegador, el usuario no sera devuelto a un estado anterior de 
la página, en cambio puede volver a la última página que visitó. Soluciones incluyen el 
uso de IFrames invisible para desencadenar cambios en el historial del navegador y el 
cambio de la porción de anclaje de la dirección (después de un #).

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Inconvenientes de AJAX

  Los  motores  de  búsquedas  no  entienden  JavaScript.  La  información  en  la  página 
dinámica no se almacena en los registros del buscador.

  Hay  problemas  usando  Ajax  entre  nombres  de  dominios.  Eso  es  una  función  de 
seguridad.

 El sitio con Ajax usa más recursos en el servidor.

 Es  posible que  páginas  con  Ajax  no  puedan  funcionar en telefonos moviles, PDA u 

otros  aparatos.  Ajax  no  es  compatible  con  todos  los  software  para  ciegos  u  otras 
discapacidades.

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Practicas y Ejemplos
con AJAX

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Ejemplo
<H1>Mostrando datos con AJAX</H1>

  <form>
  <input type = "button" value = "Mostrar mensaje" 
  onclick = “pedirDatos('datos.txt','targetDiv')">
  </form>

  <div id="targetDiv" style="background­color:#99FF66;">
  <p>Aquí aparecerá el texto</p>
  </div>

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Ejemplo

<script language = "javascript">

    function pedirDatos(fuenteDatos, divID){

        if(XMLHttpRequestObject) {
   var obj = document.getElementById(divID);
   XMLHttpRequestObject.open("GET", fuenteDatos);
   XMLHttpRequestObject.onreadystatechange = function()
       {

        if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
   obj.innerHTML = XMLHttpRequestObject.responseText;
       }
  }
  XMLHttpRequestObject.send(null);
 
 </script>

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Ejemplo
<?php include("funciones.php"); ?>
<script language="javascript" src="ajax.js"></script>
­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­
<td colspan="2" class="Estilo2" >
<font face="Arial" >Indica el estado y el municipio donde resides actualmente</font>
<div align="justify">Estado
<?php 
   $tabla="estado";
   $xtra="cargarContenido();"; 
    impSelect($tabla,$xtra,""); 
?>
</div>
</td>
<td colspan="2" class="Estilo2"><div align="justify">Municipio 
<div id="contenedor"> 
       <select name="municipio" class="navLink" id="municipio"> 
              <option value="0"> Seleccione Municipio</option> 
       </select>
</div>
</td>

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 Referencias

Programa de Formación de la Academia de Software Libre. Nivel Desarrolladores. 
Módulo Lenguajes de Desarrollo Web.  AJAX. 

[Documento electrónico] Disponible: Academia de Software Libre.

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS
 ¡Gracias por su Atención!

TEMA :AJAX PARA LA OPTIMIZACION DE CONSULTAS EN BASES DE DATOS