DESARROLLO
DE
APLICACIONES
WEB
Unidad # 5: AJAX Y
DESARROLLO WEB ÁGIL
Ing. Karla Abad Sacoto, Docente CISC - Software
Se realiza un HTTP request al servidor web.
Retorna una página HTML en respuesta al cliente.
1. Submits envía datos a recursos definidos en
Modelo de action
aplicaciones 2. Se desempeña un trabajo en el servidor y
entonces se direcciona a la siguiente página.
web básicas 3. Refrescamiento de la página ocurre para cada
submit
!!! Comportamiento síncrono mientras dura el
requerimeinto.
Ing. Karla Abad Sacoto, Docente CISC - Software
AJAX = Asynchronous JavaScript and XML.
AJAX se trata de actualizar partes de una página web, sin tener
que recargar toda la página (Comunicación asincrónica).
No es un nuevo lenguaje de programación sino una nueva manera
Requerimien de utilizar los estándares existentes.
tos
Asíncronos: Ajax es el arte de intercambiar datos con un servidor y actualizar
partes de una página web, sin recargar la página entera.
con AJAX
Para utilizar Ajax, debe tener un conocimiento básico de lo
siguientes:
HTML / XHTML
CSS
JavaScript / DOM
XML, JSON
Ing. Karla Abad Sacoto, Docente CISC - Software
¿Cómo trabaja .
AJAX?
Ing. Karla Abad Sacoto, Docente CISC - Software
AJAX está basada en estandares y usa una
combinación de:
Objeto XMLHttpRequest (para intercambiar
datos asincronamente con un servidor).
¿Cómo
trabaja JavaScript/DOM (para desplegar/interactuar
AJAX? con la información).
Ingredientes. XML y JSON (utilizados como formatos de
intercambio de datos)
Las aplicaciones AJAX son independientes
del browser y de la plataforma!
Ing. Karla Abad Sacoto, Docente CISC - Software
El elemento principal de AJAX es el
objeto XMLHttpRequest.
¿Cómo
trabaja
AJAX? El objeto XMLHttpRequest se utiliza para
intercambiar datos con el servidor en
segundo plano. Esto significa que es
posible actualizar partes de una página
web, sin volver a cargar la página entera.
Ing. Karla Abad Sacoto, Docente CISC - Software
Ejemplo Básico de AJAX, utilizando objeto XMLHttpRequest
<!DOCTYPE html>
<html>
onreadystatechange:
<head>
<script type=“text/javascript”> funcion que será
ejecutada cada vez que el
var xhttp;
function loadDoc() { readystate cambie
xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
status:
¿Cómo xhttp.onreadystatechange = function() { actualiza()};
}
código de
respuesta
trabaja function actualiza(){
if (xhttp.readyState == 4 && xhttp.status == 200) {
HTTP
//actualizar cierta parte de la pagina
AJAX? document.getElementById("demo").innerHTML = xhttp.responseText;
};
} readyState:
estado de la
</script>
</head> petición ajax
<body> (del 0 al 4)
<div id="demo">
<h2>Let AJAX change this text</h2></div>
<button type="button" onclick=" loadDoc()">Change
Content</button>
</body>
</html>
ajax_info.txt
Ing. Karla Abad Sacoto, Docente CISC - Software “AJAX”
“…………”
Para enviar una petición al servidor, utilizamos los métodos open() y
send() del objeto XMLHttpRequest:
var xmlhttp= new XMLHttpRequest();
numero=23;
xmlhttp.open("GET","ajaxinfo.php?name=Jesus&id=23&n
um=“+numero,true);
xmlhttp.send();
xmlhttp.open(“POST","ajaxinfo.php",true);
Petición xhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
AJAX xhttp.send(“fname=Henry&lname=Ford");
Ing. Karla Abad Sacoto, Docente CISC - Software
La propiedad readyState tiene el estado de la petición
XMLHttpRequest. (puede tener valores del 0 al 4)
La propiedad onreadystatechange define una función que se
ejecutará cuando cambie el readyState.
Las propiedades status y statusText tienen el estado HTTP de la
respuesta XMLHttpRequest.
La propiedad onreadystatechange se llama cada vez que cambia
Respuesta readyState.
AJAX Cuando readyState es 4 y el status es 200, la respuesta está lista.
Para leer las respuestas se utiliza las propiedades:
Ing. Karla Abad Sacoto, Docente CISC - Software
Propiedad Descripción
Define la funcion a ser llamada cada vez que la
onreadystatechange
propiedad readyState cambie de valor.
Las propiedades readyState
Valor numérico (0 al 4) que almacena el estado de
la petición
definidas para el El contenido de la respuesta del servidor en forma
responseText
objeto XMLHttp de cadena de texto
El contenido de la respuesta del servidor en
Request son: responseXML formato XML. El objeto devuelto se puede
procesar como un objeto DOM
El código de estado HTTP devuelto por el servidor
status (200 para una respuesta correcta, 404 para "No
encontrado", 500 para un error de servidor, etc.)
El código de estado HTTP devuelto por el servidor
statusText en forma de cadena de texto: "OK", "Not Found",
"Internal Server Error", etc.
Ing. Karla Abad Sacoto, Docente CISC - Software
Los valores definidos para la
propiedad
readyState son los siguientes:
Ing. Karla Abad Sacoto, Docente CISC - Software
Establece los parámetros de la petición que se
open("metodo", realiza al servidor. Los parámetros necesarios
Los métodos "url’, true) son el método HTTP empleado y la URL destino
disponibles para (puede indicarse de forma absoluta o relativa)
el
objeto XMLHttp send() Envía la petición al servidor (utilizado para GET)
Request son los send(contenido) Envía la petición al servidor (utilizado para
POST)
siguientes:
Permite establecer cabeceras personalizadas
setRequestHeader("
en la petición HTTP. Se debe invocar el
cabecera", "valor")
método open() antes que setRequestHeader()
Ing. Karla Abad Sacoto, Docente CISC - Software
Formatos de Intercambio de Datos.
XML
Usa etiquetas, permite crear nuevos lenguajes.
JSON (JavaScript
Formatos Object
deNotation)
representación e
intercambio de
Datos
Ing. Karla Abad Sacoto, Docente CISC - Software
Más legible por el ser humano e igual de eficaz que
XML para la comunicación entre maquinas.
JSON está construido por una colección de pares
de nombre y valor. En muchos lenguajes de
JSON programación tenemos elementos parecidos como
pueden ser los objetos, una estructura, un
diccionario, un array….
Este formato es el que se suele utilizar en el los
servicios web REST y en los últimos años le está
ganando el terreno a XML como formato de
intercambio de datos.
Ing. Karla Abad Sacoto, Docente CISC - Software
La sintaxis JSON se deriva de la sintaxis de notación
de objetos de JavaScript:
Los datos están en pares de nombre : valor,
Reglas de
Los datos están separados por comas
sintaxis
Objetos están dentro de llaves { … }.
JSON
Los arreglos están dentro de corchetes [ …]
Ing. Karla Abad Sacoto, Docente CISC - Software
Puede acceder a un dato de JSON asi:
//retorna Tornillo
pieza.nombre
O también se puede acceder así:
//retorna Tornillo
pieza[‘nombre’]
JSON: Los datos se pueden modificar así:
Accediendo a pieza.nombre =‘Desarmador’
Datos O también se puede modificar así:
pieza[‘nombre’]=‘Desarmador’
Ing. Karla Abad Sacoto, Docente CISC - Software
x =
myObj[‘cars’]["car2"];
//o tambien
JSON: x = myObj.cars.car2;
Accediendo a
Datos Resp. BMW
Ing. Karla Abad Sacoto, Docente CISC - Software
Arreglos en JSON
Puede acceder a los datos se utiliza el nombre:
x = myObj[‘age’]; //o tambien: x= myObj.age;
Resultado 30
Y= myObj.name; y=myObj['name'];
Puede acceder a los valores de la matriz
utilizando el número de índice:
x = myObj[‘cars’][2]; o tambien: x=
myObj.cars[2]
Resultado: Fiat
X=myObj.cars[1]; //bmw
X=myObj['cars'][1]; //bmw
MyObj.cars[2].models[1] //Panda
myObj[‘cars’][2][‘models’][1]//Panda
Puede acceder a los valores de la matriz utilizando el número de índice:
x = myObj[‘cars’][0][‘name’]; //o tambien myObj.cars[0].name; resp// Ford
y = myObj[‘cars’][0][‘models’][1]; //o tambien y = myObj.cars[0].models[1]; //resp.
Z=myObj[‘cars’][1]; //o tambien Z=myObj.cars[1]; //resp. Un objeto bmw
Ing. Karla Abad Sacoto, Docente CISC - Software
Ing. Karla Abad Sacoto, Docente CISC - Software
