TECNOLOGIA AJAX.

Curso de desarrollo de
aplicaciones con tecnologia Web.
 QUE ES AJAX?.
(Asynchronous JavaScript And XML) és una técnica de desarrollo web para crear
aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes
desde hace mucho tiempo.
Tecnologías involucradas:
JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los datos
recibidos.
HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la
información recibida por el servidor
XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que
posteriormente serán mostrados.
Lenguaje de servidor - Genera la información útil en XML y la envía al objeto del
navegador.

Muchas applications web de las denominates WEB 2.0 utilizan AJAX, Google, facebook,
twiter y muchas mas...
FUNCIONAMIENTO.
(El usuario accede a la aplicación que es enviada por el servidor en formato HTML,
JavaScript. Luego el código JavaScript de la aplicación pide al servidor los datos
que quiere mostrar y este, ejecuta un código de lado de servidor que envía al
navegador los datos en formato XML.
LA BASE DE AJAX.
La base de AJAX es el objeto XMLHttpRequest, que es una instancia de una API que nos
permite la transferencia de datos en formato XML desde los script del navegador a los del
servidor e inversamente.

No es oro todo lo que reluce.Problema de Compatibilidad con antiguos navegadores

algunos navegadores.
LA BASE DE AJAX.
OBJETO XMLHttpRequest.
El secreto de AJAX es la comunicación sin refresco entre el cliente y el servidor, esto es
posible gracias a JavaScript y al objeto XMLHttpRequest.

CREACION DEL OBJETO XMLHTTPREQUEST EN JAVASCRIPT. EJEMPLO FUNCION.

<script>
function AJAXCrearObjeto(){
var obj;
if(window.XMLHttpRequest) { // no es IE
obj = new XMLHttpRequest();
} else { // Es IE o no tiene el objeto EJEMPLO DE LLAMADA
try {
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
<script>
catch (e) { oXML = AJAXCrearObjeto();
alert('El navegador utilizado no está soportado'); </script>
}
}
return obj;
}
</script>
LA BASE DE AJAX.
OBJETO XMLHTTPREQUEST.

Métodos

abort() - Detiene la petición en curso.

getAllResponseHeaders() - Devuelve todas las cabeceras de la respuesta (etiquetas y valores)
como una cadena.
getResponseHeader(etiqueta) - Devuelve el valor de la etiqueta en las cabecerasde la respuesta.
open(método,URL,asíncrona,nombre,password) - Abre una conexión con esa URL mediante
ese metodo (GET o POST), aplicando los valores opcionales de la derecha (ahora se explicará).
send(contenido) - Envía el contenido al servidor.
setRequestHeader(etiqueta,valor) - Establece el valor de una etiqueta de las cabeceras de
petición.

Propiedades

onreadystatechange - Contiene el nombre de la función que se ejecuta cada vez que el estado de la
conexión cambie.
readyState - Estado de la conexión, puede valer desde 0 (no iniciada) hasta 4 (completado).
responseText - Datos devueltos por el servidor en formato cadena.
responseXML - Datos devueltos por el servidor en forma de documento XML que puede ser recorrido
mediante las funciones del DOM (getEementsByTagName, etc).
status - Código enviado por el servidor, del tipo 404 (documento no encotrado) o 200 (OK).
statusText - Mensaje de texto enviado por el servidor junto al código (status), para el caso de código
200 contendrá “OK”.
AJAX. Realizar una solicitud al
servidor.
Para realizar la petición al servidor, utilizaremos los métodos:

•open: Prepara la peticion.

•onreadystatechange: Seleccionar la funcion de recepcion.
•send, iniciar la petición.

<script>
// Creamos el objeto
oXML =AJAXCrearObjeto();
// Preparamos la petición
oXML.open('GET', ‘url’);
// Preparamos la recepción
oXML.onreadystatechange = leerDatos;
// Realizamos la petición
oXML.send('');
</script>
AJAX. Recibir la respuesta del
servidor.
Para realizar el estado de la petición lo haremos con el método readyState

0 (No inicializado) - Los datos de la petición no se han definido

1 (Abierto) - La recepción de datos está en curso
2 (Cargado) - La recepción de datos ha finalizado pero los datos no están disponibles
3 (Interactive) - El objeto aún no está listo para otra petición pero ha recibido ya los datos.
4 (Completado) - El objeto está listo para otra petición

Y una vez estamos en estado cargado, ya podemos leer el texto recibido usando el
método responseText, veamos un ejemplo:

function leerDatos(){
if (oXML.readyState == 4) {
alert (oXML.responseText);
}
}
EJEMPLO DE PAGINA PHP QUE
RECIBE PETICION DE AJAX.
Por definición, AJAX utiliza XML para organizar los datos transmitidos entre el servidor y el
navegador, para que el navegador sea capaz de interpretar estos datos, tendrá que
identificarlos cómo XML y su contenido tendrá que ser un XML válido, o de lo contrario, los
datos no serán utilizables.

<?php
// Si voy a enviar XML al cliente, sino, no hace falta.
header("Content-Type: text/xml");
header("Cache-Control: no-cache, must-revalidate");
……
……
Construyo xml….

?>
AJAX. Mostrar los datos devueltos
del servidor al usuario.
¿Dónde mostramos los datos?

Para mostrar estos datos, necesitamos un objeto HTML al que le podamos modificar su
contenido de manera que el usuario pueda verlo.

Normalmente aunque no siempre, usaremos un objeto div al que le podremos modificar su

contenido usando el atributo innerHTML:

<div id="miDiv">Aquí aparecerán los datos</div>

<script>
// Accedemos al DIV con getElementById
miDiv = document.getElementById('miDiv');
// Modificamos su contenido
miDiv.innerHTML = objetoXML.ResponseText;
</script>
Nota: En este ejemplo suponemos que el servidor responde con una cadena de
texto y no una cadena XML.
FIN TUTORIAL AJAX.
 JQUERY.
• jQuery asume conocimientos sobre:

– Programación básica
– Conocimientos de Javascript
– Experiencia con HTML
– Conocimientos de selectores CSS
• Ligero (19Kb Aproximadamente)

• Navegadores soportados:
– Firefox 2.0+
– Internet Explorer 6+
– Safari 3+
– Opera 9+
– Chrome 1+
• Usando jQuery:

– Añadir referencia a la librería

– Usar $(document).ready() es lo equivalente al evento onLoad y que
se ejecuta una vez cargada la pagina

• El Selector permite tener acceso a elementos DOM mediante selectores CSS o XPATH

• Se puede representar mediante jQuery() o el método abreviado $()

EJEMPLO JAVASCRIPT TRADICIONAL

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle

visibility of #foo</a>

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
EJEMPLO CON JQUERY

$("a").click(function(){
$("#more").toggle("slow");

});
• Selector por elemento
– $(this)
• Hace referencia a él mismo

• Selector por ID
– $(‘#Resultados’)
• Retorna el elemento que contenga el id con valor Resultados

• Selector por tag

– $(‘div’)
• Busca todos los div que hay en la pagina

• Selector por CSS

– $(‘.negrita’)
• Busca todos los elementos que contengan la clase CSS negrita
 JQUERY+AJAX.
<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("contenido-ajax.html"); // MUCHO MAS FACIL, UNA SOLA LINEA
});
})
</script>
</head>
<body>

<a href="#" id="enlaceajax">Haz clic!</a>

<br>
<div id="destino"></div>

</body>
</html>
 METODO AJAX COMPLETO:
$.ajax(String url [, parametros])

los parámetros más comunes son los que se detallan a continuación:

succes (function): Es la función que se encarga de interactuar con el usuario una vez
completa la llamada con el servidor.
data (object/string): Datos que son enviados a la URL a la que se hace la llamada.
dataType (string): Valores posibles: xml, json, script o html. Hace referencia al tipo de
datos y la encapsulación en la comunicación entre cliente y servidor.
Type (string): Tipo de llamada. Puede ser POST o GET (valor por defecto)
url (string): URL a la que se hace la llamada

$.ajax({ url: 'respuesta.php',

success: function(datos) {
$('.caparesultado').html(datos); } });
AJAX y jQuery: Paso de variables

$.ajax({ type: 'POST',

url: 'respuesta.php',
data: ‘nombre=miguel&apellidos=calderon',
success: function(data){
$('.resultado').html(data);
}
});