Articulos - javascript - Ajax - Asynchronus Javascript and XML

MYGNET: http://www.mygnet.net/index.php [Imprimir | Cerrar vista de impresión]

Inicio | Artículos | JavaScript | Ajax asynchronus javascript and xml ii

Ajax - Asynchronus Javascript and XML - II

Publicado el Sábado 16 de diciembre de 2006 a las 17:02:04 por mandm

Lecturas

AJAX - Asynchronus Javascript and XML II
Segunda entrega

En la primera entrega de este artículo publicada en la revista MYGNET-MAGAZINE No. 4 Febrero 2006, se dice cómo hacer para enviar mensajes al servidor por método POST o GET y recibir a cambio otro mensaje que bien puede ser HTML, o una cadena , este método es muy útil para cuando queremos guardar cambios por ejemplo, o cuando ocupamos decirle al servidor que haga algo, inclusive recibir HTML, pero NO para recibir datos, los métodos para esto pueden resultar "precarios".

Pongamos un ejemplo:

En mi base de datos se encuentra una tabla con nombres apellidos de mis usuarios.

+----------+-------------+
| Nombre | Apellido |
+----------+-------------+
| Marco | Rizo |
+----------+-------------+

Y tengo un archivo html con dos campos de texto en uno quiero que me aparezca el nombre y en otro el apellido, siguiendo el primer método, tendríamos que hacer la petición al servidor y que este nos devuelva el nombre y apellido separados por un "#" por ejemplo. Al recibir el mensaje el navegador ( JS ) tendría que hacer la separación, es decir:

cadena = mensaje.split("#");
nombre = cadena[0];
apellido = cadena[1];

Esto muy a menudo nos causa una grave frustración, sobre todo cuando queremos cambiar el órden o agregar un campo a la base de datos, y muy aparte de eso NO es correcto, haríamos de nuestro código algo difícil de entender para nosotros mismos, sin seguir una semántica adecuada.

¿ Pero entonces cómo ?

Para hacer algo bien estructurado necesitamos recurrir a una hoja de nuestro querido XML.

¿ Ejemplo ?

Primero creamos un archivo html, donde cargaremos los datos.

usuarios.html

Nombre:
Apellidos:

Después creamos un archivo php ( XML ) / claro puede ser asp, jsp, perl, py u otro.

datospersonales.php

';
?>

" />

Y ahora creamos nuestro archivo JS

ajax.js

/*
Esta es una función propia que crea un objeto XML-DOM
el primer parametro es el archivo XML que leeremos
el segundo parámetro es una cadena que será evaluada
una vez que el archivo XML sea leído completamente.
*/
function read_xml( file, func )
{
var xml_obj = null;
// En el caso de IE usamos el control ActiveXObject XMLDOM
if( window.ActiveXObject ){
xml_obj = new ActiveXObject("Microsoft.XMLDOM");
xml_obj.async = false;
xml_obj.load( file );
} // En el caso de Firefox/Netscape usamos el método createDocument
else if( document.implementation && document.implementation.createDocument ){
xml_obj = document.implementation.createDocument("","doc",null);
xml_obj.load( file );
} // En el caso de Opera usamos el método createLSParser
else if(document.implementation.createLSParser ){
var opj = document.implementation.createLSParser(1, null);
xml_obj = opj.parseURI( file );
} // En cualquier otro caso devolvemos falso ya que no se puede hacer.
else return false;
// En el caso de IE u Opera evaluamos "func"
// en caso de Firefox/Netscape esperamos a que se carge y evaluamos "func"
if( window.ActiveXObject || window.opera ) eval( func );
else xml_obj.onload = function(){eval( func );};
};

/*
Esta es una función propia que crea un objeto a partir de un línea XML
Recibe como parámetro una línea XML y retorna un objeto con propiedades
cada propiedad es asignada en base al nombre de cada atributo de la línea XML
es decir:
si recibe una línea:

Devolverá un objeto que contiene
.nombre = "Marco";
.apellidos = "Rizo";
*/
function parse_xml_obj( Obj ){
var a = Obj.attributes.length;
var expre = '';
var objret = new Object();

for( var i = 0; i < a ; i++ ){
expre+= 'objret.'+Obj.attributes.nodeName+'="'+Obj.getAttribute(Obj.attributes.nodeName)+'";';
} eval( expre );
return objret;
};

function cargar_datos_personales(){
/*
Efectuamos la lectura del archivo XML
Cuando termine de leerse, entonces se ejecutará la función cargar_datos_personales_OK();
y como parámetro le pasamos el "xml_obj"
Esto es muy importante "xml_obj" por que así se llama la variable en la función read_xml
*/
var xml = read_xml("datospersonales.php?idusuario=algunaid","cargar_datos_personales_OK(xml_obj);");
};

function cargar_datos_personales_OK( Obj ){
var Obj;
// acá ya tenemos en la variable Obj la información necesaria.
// ahora vamos a parsear el primer tag "usuario" del documento.
var usuario = parse_xml_obj( Obj.getElementsByTagName('usuario')[0] );
document.getElementById('nombre').value = usuario.nombre;
document.getElementById('apellidos').value = usuario.apellidos;
return;
};

Está hecho, ahora la semántica de nuestro código es mucho más legible. ;)

En el ejemplo se muestra cómo hacerlo cargando una línea XML
pero en realidad podremos cargar no una sino muchas filas, sólo habría que recorrerlas con un bucle por ejemplo:

for( i = 0; i < Obj.getElementsByTagName('usuario').length; i++ ){
var usuario = parse_xml_obj( Obj.getElementsByTagName('usuario') );
// el proceso conocido :p
}

Impleméntenlo, hagan buenas webs !

Marco rz

Agregar comentario

Ingreso

Últimos registrados

  dani
  anansa
  luisan
  diana1518
  marco123
  andrela
  dasa
  franknet
  grisbell
  jf_tco

¿Más sobre ti?

¿Cuantos años tienes?
¿Eres...?
¿En que te desempeñas actualmente?

Saber más de ti nos ayudara a construir una comunidad más de acuerdo a tus necesidades.

Estadísticas

Seleccionar Navegadores

Odio la realidad, pero es en el único sitio donde se puede comer un buen filete.
( Woody Allen - 1935-?. Actor, director y escritor estadounidense.)

MyGnet © Agosto 2005 - Noviembre 2008, My Group Net - La comunidad de programación

usuario
contraseña