Publicado el 12 de Febrero del 2019
568 visualizaciones desde el 12 de Febrero del 2019
272,0 KB
42 paginas
Creado hace 16a (17/10/2007)
XHTML DINAMICO AVANZADO
XHTML DINAMICO AVANZADO
(AJAX Y DOM)
(AJAX Y DOM)
AJAX
•Conceptos y fundamentos básicos
•Patrones de Ajax
•Ejemplos prácticos.
•Librerías estándares
Bibliografía
•Ajax in Practice
•Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition
•DHTML Utopia. Modern Web Design Using JavaScript & DOM
Ajax: Un Nuevo acercamiento a las Aplicaciones Web
http://www.ajaxhispano.com/ajax-nuevo-acercamiento-aplicaciones-web.html
El objeto XMLHttpRequest
http://www.programacionweb.net/articulos/articulo/?num=386
AJAX (Asynchronous JavaScript And XML)
AJAX no es una tecnología. Es realmente muchas tecnologías, cadauna
floreciendo por su propio mérito, uniéndose en poderosas nuevas formas.
AJAX incorpora:
•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 y XSLT;
•Recuperación de datos asincrónica usando XMLHttpRequest;
•Y JavaScript poniendo todo junto.
Modelo clásico de aplicaciones Web
Navegador
Interfaz de usuario
Solicitud
HTTP
Datos
HTML + CSS
Servidor Web
Bases de datos
Servidor
Modelo clásico de aplicaciones Web
Solicitud
HTTP
Servidor
Datos
HTML + CSS
Bases
datos
http://cv1.cpd.ua.es/WebCv/CtrlZonaPersonal/LoginCv.asp
http://cv1.cpd.ua.es/WebCv/
Modelo AJAX de aplicaciones Web
Navegador
Interfaz de usuario
Javascript
Datos
HTML + CSS
Motor AJAX
Solicitud
HTTP
Datos
XML
Servidor Web / XML
Bases de datos
Servidor
Modelo AJAX de aplicaciones Web
http://maps.google.es/
Solicitud
HTTP
Servidor
Datos
XML
Bases
datos
¿Dónde utilizar AJAX?
•Comunicación rápida entre usuarios
•Interacción a través de formularios
•Votaciones, encuestas, valoraciones, etc.
•Filtrado y manipulación de datos o resultados de búsqueda
•Autocompletado de campos de texto usados comúnmente
¿Dónde no utilizar AJAX?
•Envíos a través de formularios simples
•Búsquedas
•Navegación básica
•Reemplazar grandes cantidades de texto
•Manipulación de la interfaz
• Validación de usuarios
¿Dónde vamos a utilizar AJAX?
1. Traer contenido al pulsar determinados enlaces
2. Mini álbum de fotos
3. Desplegables de edificios-localizaciones
4. Buscador sencillo
5. Sugerir valores para un campo
6. Paginar resultados
7. Navegar por directorios (DHTML)
8. Editar campos no editables y actualizar contenido (DHTML)
Ejemplo modelo clásico de aplicaciones Web
Formulario de identificación
http://127.0.0.1/ajax/mod_clas_form1.html
Validación simple de datos
http://127.0.0.1/ajax/mod_clas_valid1.asp
Ejemplo modelo clásico de aplicaciones Web
Formulario de identificación
http://127.0.0.1/ajax/mod_clas_form2.html
El objeto XMLHttpRequest
El objeto XMLHttpRequest nos permite la transferencia de datos en
formato XML desde los script del navegador ( JavaScript, JScrip,VBScript,
etc.) a los del servidor (PHP, ASP, etc.) e inversamente.
El objeto XMLHttpRequest
El primer en implementar esta API fue Microsoft con un objeto ActiveX
para su navegador Internet Explorer 5, posteriormente empezó a
incorporarse de forma nativa en todos los navegadores empezando por
Firefox seguido de Apple, Konqueror, Opera Software, iCab y Microsoft
Internet Explorer 7.
El objeto se declara de forma diferente dependiendo del navegador, pero
sus funciones son las mismas.
El objeto XMLHttpRequest
Permite que la interacción del usuario con la aplicación suceda
asincrónicamente (independientemente de la comunicación con el
servidor). Así el usuario nunca estará mirando una ventana en blanco del
navegador y un icono de reloj de arena esperando a que el servidor haga
algo.
Creación del objeto XMLHttpRequest
•En los navegadores basados en Mozilla, la referencia a este objeto con
código Javascript es window.XMLHttpRequest.
•En cambio, en Internet Explorer tenemos que hacer uso de
ActiveXObject, existiendo varias versiones denominadas
Microsoft.XMLHTTP y Msxml2.XMLHTTP
Así que crearemos una función que compruebe mediante un If
condicional si existe el primer objeto, y en caso de que sea
verdadero, crearemos un nuevo objeto XMLHttpRequest, pero si es
falso, crearemos un ActiveXObject Microsoft.XMLHTTP, pero si aun
así no existe, por último crearemos un Msxml2.XMLHTTP.
Creación del objeto XMLHttpRequest (Modo 1)
var objeto = false;
if(window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
objeto = newXMLHttpRequest ();
} elseif(window.ActiveXObject)
{
}
catch(e)
{
}
}
}
// pero si es IE
try
{
objeto = newActiveXObject ("Msxml2.XMLHTTP");
}
catch(e)
{
// en caso que sea una versión antigua
try
{
objeto = newActiveXObject ("Microsoft.XMLHTTP");
Creación del objeto XMLHttpRequest (Modo 2)
var objeto = false;
objeto = newActiveXObject("Msxml2.XMLHTTP");
objeto = newActiveXObject("Microsoft.XMLHTTP");
try {
} catch(e1) {
try {
} catch(e2) {
objeto = null;
}
}
}
}
if(! objeto ) {
if(typeofXMLHttpRequest != "undefined") {
objeto = newXMLHttpRequest();
Uso del objeto XMLHttpRequest
•Cuando ya tenemos el objeto creado, disponemos de diversos métodos y
propiedades para comprobar el estado de los datos.
•Propiedades:
•onreadystatechange
•readyState
•responseText
•responseXML
•status
•statusText
Métodos
•abort()
•getAllResponseHeaders()
•getresponseHeader(stringheader)
•open(stringurl,stringasynch)
•send(string)
•setRequestHeader(stringheader,
stringvalue)
onreadystatechange(atributo)
El atributo onreadystatechange asigna la función que se ejecutará cada
vez que readyState cambie de valor.
Utilización
oXMLHttpRequest.onreadystatechange = fFuncion;
– oXMLHttpRequest -Objeto XMLHttpRequest
– fFuncion -Función a ejecutar
Frecuentemente utilizamos
función para leer los datos recibidos del servidor, en este casoen su
interior comprobaríamos que
leeremos el valor de responseXML, responseText...
readyState tenga valor 4 y entonces
onreadystatechange para definir una
onreadystatechange(atributo)
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
//Creamoslafunción
functionfFuncion() {
//Alertamoselestadodelapetición
alert(oXMLHttpRequest.readyState);
}
//Definimoslafunciónhandlerdelevento
oXMLHttpRequest.onreadystatechange=fFuncion;
/*]]>*/
</script>
readyState(atributo)
readyState devuelve el estado actual del objeto
El atributo
XMLHttpRequest, cada vez que cambia el valor de readyState se lanza la
función indicada en onreadystatechange
Utilización
iEstado = oXMLHttpRequest.readyState;
iEstado -Estado actual del objeto
0 -Sin inicializar, siempre será:
1 -Abierto (acaba de llamar open)
2 –Enviado
3 –Recibiendo
4 -A punto
La propiedad
asíncronas para comprobar que podemos acceder ya a atributos como
responseXML y responseText, sólo accesibles en los estados 3 y 4.
readyState se utiliza en todas las comunicaciones
readyState(atributo)
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
//Creamoslafunción
functionfFuncion() {
//Sielestadoes“apunto“
if(oXMLHttpRequest.readyState==4) {
//Mostramoseltextoque llega
alert(oXMLHttpRequest.responseText);
}
}
//Definimoslafunciónhandlerdelevento
oXMLHttpRequest.onreadystatechange=fFuncion;
/*]]>*/
</script>
responseText(atributo)
El atributo responseText devuelve el texto del documento descargado
del servidor en una petición con XMLHttpRequest.
Utilización
sDocumento = oXMLHttpRequest.responseText;
– sDocumento -Cadena de caracteres con el texto del documento.
La propiedad responseText se utiliza para tratar los datos recibidos
desde el servidor que no tienen formato XML, podremos acceder a los
datos siempre y cuando el estado de la conexión devuelto con
readyStatechange sea igual a 3 (recibiendo) o 4 (a punto).
Siempre que podamos intentaremos usar
responseText y XML para la los datos en lugar de texto plano.
responseXML en lugar de
responseText(atributo)
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
//Creamoslafunción
functionfFuncion() {
//Sielestadoes“apunto“
if(oXMLHttpRequest.readyState==4) {
//Mostramoseltextoque llega
alert(oXMLHttpRequest.responseText);
}
}
//Definimoslafunciónhandlerdelevento
oXMLHttpRequest.onreadystatechange=fFuncion;
/*]]>*/
</script>
open (método)
El método open prepara una conexión HTTP a través del objeto XMLHttpRequest
( con un método y una URL especificados ) y inicializa todos losatributos del objeto.
Utilización
oXMLHttpRequest.open ( sMetodo, sURL[, bSincronia[, sUsuario[, sPwd] ] ] );
– sMetodo -Stringcon el método de conexión ( GET o POST ).
– sURL-URL para la peticionHTTP
– bSincronia-Booleanoopcional en truepara usar modo asíncrono y en false para
síncrono.
– sUsuario -Cadena de caracteres opcional con el nombre de usuario para la
autenticación
– sPwd -Cadena de caracteres opcional con la contraseña del usuario sUsuarioparala
autenticación
Al llamar a open el atributo readyState a 1, resetea las cabeceras (headers) de
responseText, responseXML, status y
envío y los devuelve atributos
statusText a sus valores
open (método)
No se permiten las llamadas a dominios, puertos o protocolos
diferentes al de la página que llama la función
Para realizar la conexión deberemos usar send después de open
open (método)
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// creamos el objeto
oXMLHttp= newcXMLHttpRequest();
// pedimos la página en modo síncrono
oXMLHttp.open('get', 'index.htm', false);
// enviamos los datos
oXMLHttp.send();
/*]]>*/
</script>
send(método)
El método send envía la petición con los datos pasados por parámetro
como cuerpo de la petición a través del objeto XMLHttpRequest.
Utilización
oXMLHttpRequest.send ( mData);
– oData -Cuerpo de la petición HTTP.
El parametro oData puede ser una referencia al DOM de un documento o
una cadena de caracteres.
send(método)
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// creamos el objeto
oXMLHttp
Comentarios de: XHTML Dinámico avanzado (AJAX y DOM) (0)
No hay comentarios