Repblica Bolivariana de Venezuela

Ministerio del Poder Popular para la Educacin

Instituto Universitario de Tecnologa del Estado Bolvar
IV Semestre de Informtica, seccin 3M
ELECTIVA II










UNIDAD 6
TECNOLOGA AJAX











Profesor: Estudiante:
Joel Poyo Francheska Romero
C.I. 24.542.729












Ciudad Bolvar; Mayo 2014
Tecnologa AJAX

Cuando nos referimos a Ajax (Asynchronous JavaScript And XML) nos referimos a
una tecnologa asncrona, en el sentido de que los datos adicionales se requieren al servidor
y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la
pgina. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente
se efectan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza
mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier
caso, no es necesario que el contenido asncrono est formateado en XML.


Modelo de objetos con lenguaje Script (DOM).

El DOM es un API de programacin para documentos. Guarda una gran similitud
con la estructura del documento al que modeliza.

El Modelo de Objetos de Documento (DOM - Document Object Model -) describe
cmo todos los elementos en una pgina HTML, tales como campos de entrada, imgenes,
etc, se relacionan con la estructura ms alta: el propio documento. Llamando al elemento
por su nombre correcto DOM, podemos influir en l mediante un lenguaje de
programacin, e,g. Javascript, Java, etc.

Una pgina web es un documento. ste documento puede exhibirse en la ventana de
un navegador o tambin como cdigo fuente HTML. Pero, en los dos casos, es el mismo
documento. El modelo de objeto de documento (DOM) proporciona otras formas de
presentar, guarda y manipular este mismo documento. El DOM es una representacin
completamente orientada al objeto de la pgina web y puede ser modificado con un
lenguaje de script como JavaScript.

El W3C DOM estndar forma la base del funcionamiento del DOM en muchos
navegadores modernos. Varios navegadores ofrecen extensiones ms all del estndar
W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos
pueden ser consultados por navegadores que tienen DOMs diferentes.

Por ejemplo, el DOM de W3C especifica que el mtodo getElementsByTagName
en el cdigo de abajo debe devolver una lista de todos los elementos <P> del documento:

paragraphs = document.getElementsByTagName("P");
// paragraphs[0] es el primer elemento <p>
// paragraphs[1] es el segundo elemento <p>, etc.
alert(paragraphs[0].nodeName);

Todas las propiedades, mtodos y eventos disponibles para la manipulacin y la
creacin de pginas web est organizado dentro de objetos. Un ejemplo: el objeto document
representa al documento mismo, el objeto table hace funcionar la interfaz especial
HTMLTableElement del DOM para acceder a tablas HTML, y as sucesivamente.

Mtodos y propiedades del objeto XML HTTP Request.

A continuacin la lista completa de todas las propiedades y mtodos del objeto y
todos los valores numricos de sus propiedades:

Las propiedades definidas para el objeto XMLHttpRequest son:


Los valores definidos para la propiedad readyState son los siguientes:

Valor Descripcin
0 No inicializado (objeto creado, pero no se ha invocado el mtodo open)
1 Cargando (objeto creado, pero no se ha invocado el mtodo send)
2 Cargado (se ha invocado el mtodo send, pero el servidor an no ha respondido)
3
Interactivo (se han recibido algunos datos, aunque no se puede emplear la
propiedad responseText)
4 Completo (se han recibido todos los datos de la respuesta del servidor)


Los mtodos disponibles para el objeto XMLHttpRequest son los siguientes:

Mtodo Descripcin
abort() Detiene la peticin actual
getAllResponseHeaders() Devuelve una cadena de texto con todas las cabeceras de la
Propiedad Descripcin
readyState Valor numrico (entero) que almacena el estado de la peticin
responseText El contenido de la respuesta del servidor en forma de cadena de texto
responseXML
El contenido de la respuesta del servidor en formato XML. El objeto devuelto se
puede procesar como un objeto DOM
status
El cdigo de estado HTTP devuelto por el servidor (200 para una respuesta
correcta, 404 para "No encontrado", 500 para un error de servidor, etc.)
statusText
El cdigo de estado HTTP devuelto por el servidor en forma de cadena de texto:
"OK", "Not Found", "Internal Server Error", etc.
respuesta del servidor
getResponseHeader("cabecera")
Devuelve una cadena de texto con el contenido de la cabecera
solicitada
onreadystatechange
Responsable de manejar los eventos que se producen. Se
invoca cada vez que se produce un cambio en el estado de la
peticin HTTP. Normalmente es una referencia a una funcin
JavaScript
open("metodo", "url")
Establece los parmetros de la peticin que se realiza al
servidor. Los parmetros necesarios son el
mtodo HTTP empleado y la URL destino (puede indicarse
de forma absoluta o relativa)
send(contenido) Realiza la peticin HTTP al servidor
setRequestHeader("cabecera",
"valor")
Permite establecer cabeceras personalizadas en la
peticin HTTP. Se debe invocar el mtodo open() antes
que setRequestHeader()

El mtodo open() requiere dos parmetros (mtodo HTTP y URL) y acepta de
forma opcional otros tres parmetros. Definicin formal del mtodo open():


open(string metodo, string URL [,boolean asincrono, string usuario, string password]);


Las peticiones realizadas son asncronas. Si se indica un valor false al tercer
parmetro, la peticin se realiza de forma sncrona, esto es, se detiene la ejecucin de la
aplicacin hasta que se recibe de forma completa la respuesta del servidor. Es importante
saber que las peticiones sncronas son justamente contrarias a la filosofa de AJAX. El
motivo es que una peticin sncrona congela el navegador y no permite al usuario realizar
ninguna accin hasta que no se haya recibido la respuesta completa del servidor. La
sensacin que provoca es que el navegador se ha colgado por lo que no se recomienda el
uso de peticiones sncronas salvo que sea imprescindible.

Los ltimos dos parmetros opcionales permiten indicar un nombre de usuario y una
contrasea vlidos para acceder al recurso solicitado, por otra parte, el mtodo send()
requiere de un parmetro que indica la informacin que se va a enviar al servidor junto con
la peticin HTTP. Si no se envan datos, se debe indicar un valor igual a null. En otro caso,
se puede indicar como parmetro una cadena de texto, un array de bytes o un objeto XML
DOM.



Manejo de errores.

Para lograr manejar los errores que ocurren en las llamadas asincrnicas a mtodos
utilizadas por ajax a travs de javascript nos tendremos que valer del evento
ScriptManager.AsyncPostBackError este evento se produce cuando hay un error de pgina
durante una devolucin de datos asincrnica y pertenece al control ScriptManager .

Un ejemplo:

protected void ScriptManager1_AsyncPostBackError(object sender,
AsyncPostBackErrorEventArgs e)
{
ScriptManager1.AsyncPostBackErrorMessage =Mi mensaje al usuario aqu;
}

En el ejemplo cambiamos el mensaje al usuario por uno mas amigable y ocultamos
la informacin que podramos estar cediendo a terceros, esto tambin podra se muy til si
queremos llevar un Log de este tipo de errores.

protected void ScriptManager1_AsyncPostBackError(object sender,
AsyncPostBackErrorEventArgs e)
{
ScriptManager1.AsyncPostBackErrorMessage =Mi mensaje al usuario aqu;
MiClaseLog.Add(e.Exception);
}


En nuestro aspx solo tendramos que configurar nuestro ScriptManager de la
siguiente manera:

<asp:ScriptManager ID=ScriptManager1 runat=server
OnAsyncPostBackError=ScriptManager1_AsyncPostBackError>
</asp:ScriptManager>

Ahora bien si quisiramos que no el navegador de ninguna manera mostrara un error
de javasript sino que mostrar este error de una manera mas presentable al usuario a travs
de una capa div por ejemplo podramos hacer uso de la clase
Sys.WebForms.PageRequestManager que a travs del mtodo getInstance() no permite
acceder a la funcionalidad de postback asincrnicos de la clase que esta en uso, adems
usando el mtodo add_endRequest(EndRequestHandler) podemos aadir un manejador al
evento endRequest que seala que la llamada asincrnica ha terminado.

Implementando todo esto en nuestro aspx:

<script type=text/javascript>
var divElem = AlertDiv;
var messageElem = AlertMessage;
var bodyId = bodyId;
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
if (visString == hidden)
{
$get(bodyId).style.backgroundColor = white;
}
else
{
$get(bodyId).style.backgroundColor = gray;
}
var adiv = $get(divElem);
adiv.style.visibility = visString;
}
function ClearErrorState() {
$get(messageElem).innerHTML = ;
ToggleAlertDiv(hidden);
}
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined && args.get_error().httpStatusCode == 500)
{
var errorMessage = args.get_error().message
args.set_errorHandled(true);
ToggleAlertDiv(visible);
$get(messageElem).innerHTML = +
errorMessage + ;
}
}
</script>


Mi div para mostrar el mensaje con el botn aceptar

<div id=AlertDiv>
<div id=AlertMessage>
</div>
<br />
<div id=AlertButtons >
<input id=OKButton value=OK
runat=server onclick=ClearErrorState() />
</div>
</div>

Hay que destacar la lnea en la que aparece args.set_errorHandled(true); dentro del
mtodo EndRequestHandler, con esto indicamos que ya nosotros hemos hecho manejos del
error y por lo tanto no se reflejara como error de javascritp en el navegador.


Gestin de operaciones bsicas.

Crear y eliminar una tabla

<?
#Crear Tabla
$link=mysql_connect("servidor","usuario","password");

//abrimos la base de datos
mysql_select_db("NombreBaseDatos",$link);

$result=mysql_query("CREATE TABLE NombreTabla(Campos de la nueva tabla)",$link);
# para crear un campo unico y autonumerico seria:
# id smallint not null auto_increment, primary key(id)
if($result==0)
{
printf("No se ha podido crear la tabla<P>\n");
}else{
printf("La tabla se ha creado correctamente<P>\n");
}
mysql_close($link);
?>

<?
#Eliminar Tabla
$link=mysql_connect("servidor","usuario","password");

//abrimos la base de datos
mysql_select_db("NombreBaseDatos",$link);

$result=mysql_query("DROP TABLE NombreTabla",$link);
if($result==0)
{
printf("No se ha podido eliminar la tabla<P>\n");
}else{
printf("La tabla se ha eliminado correctamente<P>\n");
}
mysql_close($link);
?>


Cdigo para Insertar, Eliminar y Modificar los campos de una tabla MySQL desde
cdigo PHP.
<?
$link=mysql_connect("servidor","usuario","password");

//abrimos la base de datos
mysql_select_db("NombreBaseDatos",$link);

//agregar un nuevo campo
$result=mysql_query("alter table NombreTabla add campo tipo",$link);

//eliminar un campo
$result=mysql_query("alter table NombreTabla drop campo",$link);

//modificar un campo
$result=mysql_query("alter table NombreTabla modify campo Nuevotipo",$link);
?>


Gestin de archivos.

La gestin de archivos consiste en una serie de pasos interrelacionados, diseados
para asegurar la fcil identificacin, organizacin, acceso y mantenimiento de los archivos.
Dado que hay fuertes conexiones entre los diversos aspectos de la gestin de archivos,
planifique con antelacin para evitar tomar decisiones que limiten las opciones
posteriormente. Es en especial importante mantener las lneas de comunicacin abiertas
entre el personal tcnico y el personal del proyecto durante la etapa de planeamiento.

Los pasos de la gestin de archivos que se tratan aqu incluyen:

Seguimiento (consideraciones bsicas del sistema de archivos). Otro aspecto del
seguimiento est comprendido en Metadatos;
Bases de datos de imgenes y otras soluciones de gestin de imgenes (software
especial para organizar archivos de imgenes);
Almacenamiento (dispositivos y medios);
Mantenimiento (copias de seguridad -backup-, migracin, preservacin y seguridad)
Se lo trata en Preservacin digital).

Un sistema de gestin de archivos es el software que proporciona a los usuarios y
aplicaciones servicios para el uso, acceso y control de accesos, tanto de archivos como a
directorios.