Post on 18-Apr-2015
description
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