Ajax Utilizando

Hacer AJAX utilizando

L. I. José Alberto López Razo - razo.duke12@gmail.comENLI 2006

Ajax Utilizando

www.gruslic.org.mx

Ajax Utilizando

¿Que es?● Dojo es un Toolkit Open Source de javaScript que te ayuda a construir aplicaciones de internet.

● Contiene APIS y Widgets ● Es potente, portable, ligero.● Tiene herramientas de testeo para construir interfaces dinámicas.

● Permite crear widgets rápidamente, transiciones animadas, peticiones Ajax con la mejor potencia y facilidad.

● Soporta bookmarking● Encapsula las molestias “crossbrowser”.● Te ayuda con el DOM.

Ajax Utilizando

Fundación Dojo

● Dojo es licencia dual como AFL y BSD, puedes usarlo en proyectos (L)GPL.

● Patrocinadores y Socios.

● Presidente de la Fundación, líder de proyecto,y creador de Dojo.

Alex Russell Blog - http://alex.dojotoolkit.org/

Ajax Utilizando

Comunidad Dojo

● Sitio principal http://dojotoolkit.org● Sistema de trackeo de bugs http://dojotoolkit.org/trac

● Mailing lists http://dojotoolkit.org/mailman/listinfo/dojo-interest http://dojotoolkit.org/mailman/listinfo/dojo-contributors

● Manual (API documentación) http://manual.dojotoolkit.org/index.html

● Wiki http://dojo.jot.com/

Ajax Utilizando

Sitios usando Dojo

www.youos.com

www.turboajax.com

Ajax Utilizando

Sitios usando Dojo

http://copyleft.com.mx/

http://renkoo.com/

www.sitepen.com

Ajax Utilizando

Capas

Ajax Utilizando

Empezando

Como mínimo tener en website/js/dojo/ :

folder -> src/ dojo.js iframe_history.html

Incluir a dojo en nuestra página.

<script language="JavaScript" type="text/javascript" src="js/dojo/dojo.js"></script>

Ajax Utilizando

Entrada/Salida con dojo.io✔ El paquete dojo.io proporciona código

portable y mecánismos de transporte para XMLHTTP.

✔ dojo.io.bind () es una API de petición asincrónica genérica que involucra múltiples capas de transporte. Es quien hace las peticiones "Ajax" utlizando Dojo.

✔ Las respuestas puede ser:✔ Texto puro (text/plain)✔ H T M L (text/html)✔ Javascript (text/javascript)✔ Xml (text/xml)✔ JSON-RPC (text/json) ✔ ...

Ajax Utilizando

dojo.io.bin() text/plain

Estado inicial

Nuevo texto traido del server

Ajax Utilizando

dojo.io.bin() text/plaindojo.require("dojo.io.*"); //incluimos paquete iofunction display_txt(){ var bindArgs = { //argumentos url: "data.txt", //url del archivo de texto load: function(type, data, evt){ //hacer algo con la

respuesta dojo.byId('cont').innerHTML = data; //alimentar la div

destino } };

dojo.io.bind(bindArgs); //atamos los argumentos y se ejecuta

}<span onclick="display_txt();">Despliega el nuevo texto da click aqui</span>

<div id="cont" class="bigfont"></div>

Mediante un span y su evento onclick activamos la función.

Esta será la div a alimentar.

Función Javascript

Ajax Utilizando

dojo.io.bin() text/html

Zona de links

Div main

Div top

en panels/

main_3.html<p>MAIN 3</p><p><img src="imgs/batman_wp2.gif" width="168" height="119" /> </p>

main_2.html<p>MAIN 2</p><p>texto.....................</p>

top_2.html<p align="center">TOP 2 TEXTO DIFERENTE</p>

top_3.html<p align="center">TOP 3 OTRO TEXTO DIFERENTE</p>

Ajax Utilizando

dojo.io.bin() text/htmldojo.require("dojo.io.*"); //incluimos funciones de dojo.iofunction carga_HTML( URL, destino ){ var dest = destino; //div destino dojo.io.bind({ mimetype: "text/html", //regresará html url: "panels/"+URL, //url a traer load: function( type, data, evt ) { //data = regresa del servidor dojo.byId(dest).innerHTML = data; //alimentamos destino con data }, error: errorHandler //manejador de errores });}

<span onclick="carga_HTML('top_1.html', 'top')">Recarga Top 1 </span><br /><span onclick="carga_HTML('top_2.html', 'top')">Recarga Top 2</span><br /><span onclick="carga_HTML('top_3.html', 'top')">Recarga Top 3</span><br /><span onclick="carga_HTML('main_1.html', 'main')">Recarga Main 1 </span><br /><span onclick="carga_HTML('main_2.html', 'main')">Recarga Main 2</span><br /><span onclick="carga_HTML('main_3.html', 'main')">Recarga Main 3</span><br /><span onclick="carga_HTML('main_4.html', 'main')">Recarga Main 4 </span><br />

Función Javascript

Llamada a la función enviando html a cargar y destino

<div id="top"> </div> ............. <div id="main"> </div>Las divs destino

Ajax Utilizando

dojo.io.bin() text/javascript

1

3

2

El link activa la petición.

El js regresado del server se ejecuta.

Este es un alert local que se despliega con lo regresado por el return del js traido del server.

Ajax Utilizando

dojo.io.bind() text/javascriptfunction Muestravalor( type, evaldObj ) {

alert( "El script regresado\n" + evaldObj );}

function show(){ dojo.io.bind({

mimetype: "text/javascript", //tipo de datos que regresarán

url: "js_return.js", //archivo javascriptload: Muestravalor, //funcion a utilizar al regresar

la respuesta error: function(t, e) { alert("Error!... " + e.message); //manejador de errores

} });}

<a href="#" onclick="show()" >Muestrame el javascript</a>

Función Javascript

Link que activa la función

Ajax Utilizando

dojo.io.bin() text/xml

mor_xml.xml

Ajax Utilizando

dojo.io.bind() text/xmlfunction TraeDatos(val) { // esto llenará los menus var archivo =""; if(val==1) archivo = "mor_xml.xml"; else if(val==2) archivo = "nay_xml.xml"; else if(val==3) archivo = "sin_xml.xml"; var data = { mimetype: "text/xml", // el tipo de datos que regresa será xml url: archivo, // URL del archivo xml load: function(t, xml, e){ // esto maneja los datos que vienen de la URL campo = dojo.byId("municipio"); // El campo a llenar campo.length=0; // Se eliminan los elementos actuales campo.options[0] = new Option('Selecciona Municipio',0); // Colocar la 1a opcion munic = xml.getElementsByTagName('row'); //obtener cada municipio del xml for (i=0; i < munic.length; i++ ){ // Ciclar sobre cada renglon de municipio nombre = munic[i].getElementsByTagName('nombre').item(0).firstChild.data; id = munic[i].getElementsByTagName('id').item(0).firstChild.data; // campo id campo.options[i+1] = new Option(nombre,id); //Insertar la nueva opcion } } } if(val!=0){ dojo.io.bind(data); } return false;}

<select id="entidad" onchange='TraeDatos(this.value)'> ...

<select id="municipio"> ...

Función Javascriptque trae el xml del server.

Selects involucrados

Ajax Utilizando

dojo.io.bin() text/JSON

Imagenes con evento

onmouseoverModelos por cada

marca

Ajax Utilizando

dojo.io.bind() text/JSONfunction trae_modelos(marca) {

var params = new Array();params['marca'] = marca;var bindArgs = {

url: "get_data.php", //url load: llenadiv, //funcion handlererror: function(type, json, evt){alert("error");},mimetype: "text/json", //tipo de respuestacontent: params //params

};dojo.io.bind(bindArgs);

}

function llenadiv(type, json, evt) { for(var key in json.modelos) {

dojo.byId("info").innerHTML= divinfo.innerHTML + "<br/>"+ json.modelos[key].modelo + ":"+ json.modelos[key].cantidad; }}

Función quetrae los datosdel servidor.

Función quemuestra los datos.

Evento quellama a la función

<span onmouseover="hndMouseOver('nissan');" onmouseout="hndMouseOut('nissan')"><img src="imgs/nissan.jpg" /></span>

Ajax Utilizando

dojo.event Las herramientas en dojo.event.* permiten que los desarrolladores tratar cualquier llamada de función (acontecimiento de DOM o de otra manera) como evento el cual pueda ser escuchado.

Usando Dojo, el código puede registrar un “escucha” sobre cualquier acción a través de una API uniforme.

Ajax Utilizando

Muestra dojo.event

Evento onChange

Evento onKeyUp

Ajax Utilizando

dojo.event onChangefunction trackear_onchange(){

var campo = dojo.byId('nom'); //campo a trackearvar ultimo_valor = campo.value; //valor del campovar args = {

mimetype: "text/html", //regresará html url: "trackeador.php?nombre_campo=" + campo.name +

'&ultimo_valor=' + ultimo_valor, //url que devuelve el mensaje load: function( type, data) { //data = html regresado del servidor var dest = campo.name + "_resp"; //div destino dojo.byId(dest).innerHTML = " -> Respuesta del Sevidor: <b>" +

data + "</b>"; //alimentamos la div destino con data }, error: errorHandler //manejador de errores

};dojo.io.bind(args); //atamos la función con los argumentos y ejecutamos}

dojo.addOnLoad( function() { dojo.event.connect(dojo.byId("nom"), "onchange", "trackear_onchange});

Registrar elevento y la función a ejecutar.

Funcionalidad para el evento onchange

<span style="width:150px">Nombre:</span> <input type="text" id="nom" name="nombre">

Campo a trackear

Ajax Utilizando

dojo.event OnKeyUpfunction trackear_onkeyup(){

var campo = dojo.byId('nom2'); //campo a trackearvar ultimo_valor = campo.value; //valor del campovar args = {

mimetype: "text/html", //regresará htmlurl: "trackeador.php?nombre_campo=" + campo.name +

'&ultimo_valor=' + ultimo_valor, //url que devuelve el mensajeload: function( type, data) { //data = regresado del servidor

var dest = campo.name + "_resp"; //div destinodojo.byId(dest).innerHTML = " -> Respuesta del Sevidor:

<b>" + data + "</b>"; //alimentamos la div destino con data},error: errorHandler //manejador de errores

};dojo.io.bind(args); //atamos la función con los argumentos y

ejecutamos}

dojo.addOnLoad(function() {dojo.event.connect(dojo.byId("nom2"), "onkeyup", "trackear_onkeyup");}

);

<span style="width:150px">Nombre:</span><input type="text" id="nom2" name="nombre2">

Registrar elevento y la funcion a ejecutar.

Funcionalidad para el evento onkeyup

Campo a trackear

Ajax Utilizando

Formularios con ajax

El form es enviado asincronamente sin refrescar

toda la pagina y entregaun mensaje de confirmación.

Ajax Utilizando

dojo.event & dojo.io.bind()

submitForm = function(e){ //recibe objeto event e.preventDefault(); //cancela comportamiento normal var conn = { url: "data_processor.php", //url formNode:dojo.byId("frmdata"), //formulario load: function(type, data){

dojo.byId("feedback").innerHTML = data; //nuevo mensajehideform(this.formNode,1); //esconde formulario

},error: function(type, error){ alert(String(type) + "\n" +

String(error)); },method: "POST"};

if(validaform(dojo.byId('frmdata'))){dojo.io.bind(conn); //ejecuta el envío

}}

Funcionalidad para el evento onsubmit

dojo.addOnLoad(function() { dojo.event.connect(dojo.byId("frmdata"), "onsubmit", "submitForm"); });

Función para conectar objeto+evento+handler

Ajax Utilizando

X último:

Un buen look = saber CSS

Efectos visuales = CSS + DOM

Actualizar sin refrescar = saber DOM

Tratar respuestas = saber DOM

Ajax Utilizando

WebMasters

OJO: En estos tiempos están pidiendo desarrollos con nuevas características

incluyendo AJAX

Ajax Utilizando

Gracias!

razo.duke12@gmail.com

www.gruslic.org.mx