2.tutorial de AJAX

Olvidastetuusuariooclave?
Contrasea
Usuario
Entrar
o registrate
Buscar..
Foros Blog Tutoriales Cursos Videotutoriales Comic
Publicauntutorial
QuesCristalab?
Tags
Ququieresbuscar?
Ejemplos
Contctanos
Buscar
Tutoriales / TutorialdeAJAX
TutorialdeAJAX
PorSisco el18deMarzode2006 con569,786visitas
HTML,CSSyJavascript OtrostutorialesporSisco.
26
Like
16
Tw ittear
AJAX(AsynchronousJavascriptandXML)traducidocomoindicaelttulo,noesmsqueunaformadeprogram
aplicacionesinteractivasparaweb.EstaevolucindeDHTMLselahadenominadoWeb2.0.Paraelloutiliza
XHTMLyCSSparaformatearlainformacin,DOM(DocumentObjectModel)parainteractuaryvisualizar
dinmicamentelainformacin,seapoyaenXML,XSTLparamanipularlainformacinmostrada,elobjeto
XMLHttpRequest(noestndar)yJavascriptparaactualizarlosdatossinnecesidadderefrescarlapgina,yp
manipulartodasesastecnologas.
Segnlawikipedia,JesseJ.Garret,fuelquedesarrolllaideaoriginaldenominndolaAJAX.Elobjeto
XMLHttpRequestfueoriginariamenteinventadoporMicrosoft,usadodesdeinternetexplorer5.0comounobjeto
ActiveX,siendoaccesiblemedianteJavascript.Mozillaensuversin1.0implementaelobjetocompatible.DOM
unaformaderepresentardocumentosestructuradoscomomodelosoriendosaobjetos,estandarizadoporW3C
EstaformadeprogramaresunabuenaalternativaaFlash,siempreycuandosemantenganlasdistancias.FlashademsdetenerellenguajeActionScript,y
poderinteractuarconobjetosXMLposeelafacetadeldiseogrficoincorporado.LacapacidaddeimpactomultimediaqueofreceFlashestmuylejosde
conseguirseconAJAX.ExistenFrameworksdecdigoJavascriptquepermitenanimarobjetos,elusodeDragandDrop,ordenarobjetos,ymuchasms
operacionesquepermitenunosefectosvisualesmuyatractivosynovedosos.
Google(porejemploGmail)yYahoo(porejemploFlickr),usanAjax.Yahoravamosaverunejemploprcticoysencillodeusarestemtododedesarrollo.
1. Elobjetivoescrearunapginaconunosenlacesquecargencontenidoasncrono(Esdecir,sincambiardeURL).
2. NecesitaremoscrearunapginaXHTMLprincipal,ydosmsquesonlasquecargaremos.
3. UnarchivoCSSparadarformatoalasetiquetasxhtml.
4. UnarchivoJS,dondepondremoselcdigoJavascript.
5. ComprobaremoselsoportedelnavegadordelobjetoXMLHttpRequest
Nota:RequieresconocimientosbasicosdeHTMLparaleerestetutorial.Quizastambiendeprogramacinbasicapara
entenderlapartedeCSS.
CrearlosdocumentosXHTML
EmpezamosporlofcileldocumentoXHTMLprincipal(Paramayorreferencia,observalosarchivosdeejemploquevienenconeltutorial):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es"
xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Asíncrono Javascript y XML</title>
<link href="css/mis_estilos.css" rel="stylesheet"
type="text/css">
<script language="JavaScript" type="text/javascript"
src="js/codigo.js"></script>
</head>
<body>
<div id="menu"> <a
href="javascript:llamarasincrono('contenidos/tutorial1.ht
m', 'contenidos');">El sentido del tacto</a> <a
href="javascript:llamarasincrono('contenidos/tutorial2.ht
m', 'contenidos');">Sensaciones</a> </div>
<div id="contenidos">
<h3>En esta capa se cargará
asíncronamente dos fragmentos de código
(x)html.</h3>
<p>Escoger una opción del menú... </p>
</div>
</body>
</html>
Estapginalaguardaremosconelnombreajax.html
Ahoralasdospginasqueinsertaremosenlaprincipalquellamaremostutorial1.htm:
<img src="aerogenerador1.jpg" alt="imagen" width="480"

height="360" border="0" />
<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0;
margin-bottom: -5px">El sentido del tacto.</h3>
<p><br />
Todos sabemos la sensación agradable que nos
produce un simple roce o caricia, un abrazo, etc. Pero
además de esta sensación, el tacto, el
ser tocados, comprende mucho más. La humanidad
precisa del “con-tacto” interpersonal.<br
/>
Sabemos que en la piel se halla la sensación
del tacto. Que existen ciertos puntos sensibles al dolor,
al frío o al calor. La piel está
íntimamente relacionada con el mecanismo
psicológico
del individuo, que actúa como reflejo de las
emociones. El rubor que acompaña a la
vergüenza,
o la palidez con el miedo nos lo demuestran.</p>
<p>Las investigaciones que se han llevado a cabo sobre la
importancia del tacto revelan lo necesario que resulta
en contacto corporal durante la infancia para el
correcto desarrollo físico y mental.
También en
la edad adulta, el contacto personal influye en la
capacidad para soportar el dolor y el estrés,
así
como en las aptitudes de comunicación del
individuo. Un estudio realizado en 1.978 sobre unos 5.000
pacientes,
por el dermatólogo R. Grieshmer,
averiguó en un gran número de casos, que
las emociones
eran las instigadoras de las enfermedades de la
piel, por ejemplo, el 62% de los casos de psoriasis, el
78% de
las urticarias, el 86% de los pruritos, el 95% de
las verrugas, y el 100% de la sudoración profusa,
se
producían por motivos psicológicos.
<br />
</p>
Ytutorial2.htm:
<img src="aerogenerador2.jpg" alt="imagen" width="480"

height="360" border="0" />
<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0;
margin-bottom: -5px">Sensaciones</h3>
<p>El hecho de ser tocado puede transmitirnos diferentes
sensaciones. No son iguales todas las formas de tocar. El
contacto puede ser cariñoso o tierno (como cuando
se toca a un bebé), indiferente (como en algunos
actos sociales, que se ofrece la mano sin ningún
interés por su persona), iracundo (violencia),
sexual (como las caricias apasionadas que preceden al
acto sexual), curativo (como el masaje o la
imposición de manos) etc. Se puede tocar,
también, de distintas formas: caricias, abrazos,
palmadas, besos, masajes...<br />
El contacto físico comunica sin palabras, y se
convierte en la expresión física de nuestra
actitud hacia el mundo. ¿No es cierto que un
individuo reservado, también mostrará
cierta reserva en el momento de tocar o ser tocado?<br />
El tacto calibra nuestra capacidad de amar y ser
amados. Necesitamos el contacto físico por
sí mismo; para ser sinceros. Es más
difícil que nos engañe otra persona si le
mantenemos cogido del brazo o del hombro (como
también han demostrado algunos estudios). De forma
que es imposible fingir emociones cuando se toca a
alguien, excepto si el receptor quiere ser
engañado. Es imposible tocar con indiferencia
mientras decimos que nos importa mucho el receptor, o
tocar sexualmente mientras se manifiesta un sentimiento
de amistad con la intención de que se crea. El
tacto simboliza la forma mediante la cual nos
relacionamos con la vida, la experiencia, el amor y la
amistad.<br />
</p>
Estosdocumentos,puestoquevanaformarpartedeunapginaXHTMLnousanlasetiquetasheaders,nihtml,nibody,yaqueseincluirnenlapginamad
pormediodeAJAX.
CrearelarchivodeestilosCSS
LlegaelmomentodeescribirelarchivodeestilosCSS,lollamamosestilos.css,stienesproblemasalentenderelCSS,pasateporlaseccinde
decss:
#menu{
float: left;
width: 150px;
height: 100px;
border: 3px solid #ececff;
padding: 7px;
padding-left: 8px;
border-right-color: #006;
}
#menu a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
color: #606;
}
#menu a:hover{
background-color: #99c;
color: #fff;
}
body {
background-color: ##ececff;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.titulos {
color: #036;
}
#contenidos{
float:left;
width:480px;
min-height: 250px;
border: 3px solid grey;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
background-color: #fff;
}
* html #contenidos{ /*estilo solo para IE ya que no se
admite la propiedad min-height*/
height: 400px;
}
JavascriptyXMLHttpRequest
AhoratocaJavascript,yesdondeseusaelobjetoXMLHttpRequest.
Loprimeroquetenemosquehacerescomprobarladisponibilidadenelnavegador.Paraellonecesitamossaberque:
EnlosnavegadoresbasadosenMozilla,lareferenciaaesteobjetoconcdigoJavascripteswindow.XMLHttpRequest.
Encambio,enInternetExplorertenemosquehacerusodeActiveXObject,existiendovariasversionesdenominadasMicrosoft.XMLHTTPyMsxml2.XMLH
AsquecrearemosunafuncinquecompruebemedianteunIfcondicionalsiexisteelprimerobjeto,yencasodequeseaverdadero,crearemosunnuevo
objetoXMLHttpRequest,perosiesfalso,crearemosunActiveXObjectMicrosoft.XMLHTTP,perosiaunasnoexiste,porltimocrearemosun
Msxml2.XMLHTTP.
Cuandoyatenemoselobjetocreado,disponemosdediversosmtodosypropiedadesparacomprobarelestadodelosdatoscomolaspropiedades
onreadystatechange,readyState,responseText,responseXML,status,statusTextylosmtodosabort(),getAllResponseHeaders(),getresponseHeader(s
header),open(stringurl,stringasynch),send(string),setHeader(stringheader,stringvalue).
Siwindow.XMLHttpRequestdevuelveverdaderoporqueelXMLHttpRequestnoesnulloundefined,leasignaremosalobjetounnombredeistancia(defo
similaracuandolohacemosconActionScript).Aleventoonreadystatechangeseleasignarunafuncinparalarespuestayllamaremosalosmtodoso
ysend().
Sialgunadelascosasdichaarribanotequedoclaro,observaabajoelcodigoparapoderentenderlomejor.
Podemosusarelseifparacomprovarlasversiones.Pero,yaquetenemosquecomprobarlasdiferentesvariablescuandocargamoselobjetoXMLHttpRequ
sepuedeusarelmtododegestindeerrorescatch... try:
// Documento JavaScript
// Esta funcin cargar las paginas
function llamarasincrono (url, id_contenedor)
{
var pagina_requerida = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
pagina_requerida = new ActiveXObject
("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versin antigua
try
{
pagina_requerida = new ActiveXObject
("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
pagina_requerida.onreadystatechange = function ()
{
// funcin de respuesta
cargarpagina (pagina_requerida, id_contenedor);
}
pagina_requerida.open ('GET', url, true); //
asignamos los mtodos open y send
pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la
informacin requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
if (pagina_requerida.readyState == 4 &&
(pagina_requerida.status == 200 ||
window.location.href.indexOf ("http") == - 1))
document.getElementById (id_contenedor).innerHTML =
pagina_requerida.responseText;
}
Conclusin
ElusodeJavascriptparacrearpginasdinmicasdeXHTMLconviertelossitioswebenaplicaciones.Elconceptodeaccinreaccintomarelevanciay
medianteestatcnicasepuedemanipularcualquiercontenedor<div>quetengalapginamediantesuidypermitirlareaccinantecualquiereventodel
usuarioparacargarlainformacinsolicitadaenunapartedelapgina.
EnesteejerciciosehautilizadotextoenformatoxhtmlyheusadolapropiedadresponseText,perotambinsepuedencreardocumentosXMLymanipula
conlapropiedadresponseXML.Despuspodremosinteractuarconlosnodos,aadiendooeliminndolosalapgina,ordenndolos,oincluso,editaryguar
registros,sicreamosunaconexinconunabasededatos.
Comoquedamuchocaminopordelanteyyonosoyunexperto,asqueahorapodramoshacerlosiguiente:
1. BuscarinformacinsobreAJAX,XMLHttprequest,Web2.0yFrameworks.
2. Noseramalmomentoparaponerseaexperimentarconelejemployaconseguirmejoras,comoporejemploimplementarun"loading..."
3. Crearotrotutorialconotroejemplo.
4. Yclaro,comentarlotodoenlosforos.
DescargarArchivo
Enviauncomentario
CrearaplicacionesdeescritorioenHTML
yAJAXconAIR
LectordefeedsRSSenAJAX
CmocrearunPopupconJQuery
AqpHost
aqphost.com
hostingdecalidadparatusclientesytusproyectosweb
Publicatucomentario
opuedes...
Elautordeesteartculohacerradoloscomentarios.Sitienespreguntasocomentarios,puedeshacerlos
enelforo
Entraalforoyparticipaenladiscusin
Estsregistradoen
Cristalabyquieres
publicartuURLyavatar?
Iniciasesin
Noestsregistradoan
peroquiereshacerloante
depublicartucomentario
Registrate
Blog Foros Tutoriales TutorialesdeFlash Ejemplos.fla Anime Videotutoriales Cursos CursodeFlash CursodeHTML Tags
CristalabfuncionagraciasaInfranetworking

2.tutorial de AJAX

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2.tutorial de AJAX

Uploaded by

Copyright:

Available Formats

Olvidastetuusuariooclave?

Foros Blog Tutoriales Cursos Videotutoriales Comic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

<img src="aerogenerador1.jpg" alt="imagen" width="480"

<img src="aerogenerador2.jpg" alt="imagen" width="480"

You might also like