Scribd
Cargar
20 vistas19 páginas

Ajax y JSON

La unidad 5 del curso de Desarrollo de Aplicaciones Web se centra en AJAX y el desarrollo web ágil, explicando cómo AJAX permite la actualización de partes de una página web sin recargarla completamente. Se detalla el uso del objeto XMLHttpRequest para realizar peticiones asíncronas al servidor y se presentan ejemplos de código para ilustrar su funcionamiento. Además, se discuten los formatos de intercambio de datos como XML y JSON, destacando la creciente preferencia por JSON debido a su legibilidad y eficacia.

Cargado por

Eduardo Chele
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
20 vistas19 páginas

Ajax y JSON

La unidad 5 del curso de Desarrollo de Aplicaciones Web se centra en AJAX y el desarrollo web ágil, explicando cómo AJAX permite la actualización de partes de una página web sin recargarla completamente. Se detalla el uso del objeto XMLHttpRequest para realizar peticiones asíncronas al servidor y se presentan ejemplos de código para ilustrar su funcionamiento. Además, se discuten los formatos de intercambio de datos como XML y JSON, destacando la creciente preferencia por JSON debido a su legibilidad y eficacia.

Cargado por

Eduardo Chele
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 19

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

También podría gustarte