Capitulo 4.7 prog iii

PROGRAMACIÓN III

AJAX

Modelo de aplicaciones web básicas
 Se realiza un HTTP request al servidor web.
 Retorna una página HTML en respuesta al cliente.

1. Submits sent to actions
2. Actions perform work and then forward to next page
3. Page refresh occur for each submit.

!!! Comportamiento síncrono mientras dura el
requerimeinto.

Tecnologías de RIAs (Rich Internet Application)
 Applet: requiere aceptación del usuario.

 Macromedia Flash: requiere plugin.

 DHTML (HTML + Javascript + DOM + CSS):
comunicación síncrona.

 DHTML + Iframe:
comunicación asíncrona. asíncrono

 Ajax: DHTML + comunicación asíncrona.

Requerimientos Asíncronos
Iframe:
Elemento HTML que permite insertar o incrustar un
documento HTML dentro de un documento HTML
principal.
Los datos que están en el Iframe se
envían al servidor. La página no se Nombre:
bloquea durante el requerimiento, Email:
solo el iframe.
Enviar

La respuesta llega al iframe. Nombre:

Emai
l:

¿Qué es AJAX?
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
de utilizar los estándares existentes.

 Ajax es el arte de intercambiar datos con un servidor y actualizar
partes de una página web, sin recargar la página entera.

 Para utilizar Ajax, debe tener un conocimiento básico de lo
siguientes:
 HTML / XHTML
 CSS
 JavaScript / DOM

¿Cómo trabaja AJAX?
 AJAX is based on internet standards, and uses a
combination of:
 XMLHttpRequest object (to exchange data
asynchronously with a server)
 JavaScript/DOM (to display/interact with the
information)
 CSS (to style the data)
 XML (often used as the format for transferring data)
 AJAX applications are browser- and platform-
independent!


 <!DOCTYPE html>
<html>

 <head>
<script>
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change
Content</button>
</body>
</html>

 The keystone of AJAX is the XMLHttpRequest
object.

 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.

 Sintaxis para crear un XMLHttpRequest object:
 variable = new XMLHttpRequest();

 Versiones anteriores de Internet Explorer (IE5 and
IE6) utilizan un ActiveX Object:
 variable=new ActiveXObject("Microsoft.XMLHTTP");

 Enviar una petición al Servidor.
 Para enviar una petición al servidor, utilizamos los
métodos open() y send() del objeto
XMLHttpRequest:
 xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

 Para obtener la respuesta del servidor, utilizamos
las propiedades responseText() y responseXML() del
objeto XMLHttpRequest:
 xmlhttp.responseText;
xmlhttp.ResponseXML;

Capitulo 4.7 prog iii

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Capitulo 4.7 prog iii

Ähnlich wie Capitulo 4.7 prog iii (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Capitulo 4.7 prog iii