El siguiente ejemplo busca exponer de forma clara y sencilla la forma como empleando JavaScript y XML podemos realizar la búsqueda rápida de un dato y colocarlo en un control de una página HTML sin necesidad de recargar la pagina.
Se tiene una pagina Html con un control DropDownList y un TextBox
El objeto XMLHttpRequest. Este es objeto es utilizado para intercambiar datos con el servidor. ¿Cuál es su utilidad? • Actualización de la página sin necesidad del aburrido post-back • Recibir datos una vez la página ya se halla cargado. El archivo que vamos a utilizar se llama PERSONAS.xml este archivo contiene un tag y 4 propiedades.
Archivo ejemplo XML PERSONAS.xml
1 2 3
Lo primero que se va a crear es una función en la cual se inicie el objeto dependiendo el explorador, y se continúa con la configuración de los parámetros para abrir un archivo XML. NOTA: es importante que las funciones JavaScript deben estar definidas dentro de la región head en nuestra página HTML
<html> <head> </head> <html>
Funcion Cargar documento xml:
function _CargarXMLDocumento () {
// codigo para IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest();}
// codigo para IE6, IE5
else { xhttp = new ActiveXObject('Microsoft.XMLHTTP');}
//abrir el archive xml
xhttp.open('GET', 'PERSONAS.xml', false);
xhttp.setRequestHeader('Content-Type', 'text/xml');
xhttp.send('');
return xhttp.responseXML;}
Una vez inicializado el objeto con nuestro archivo XML cargado, empezamos a manipularlo para obtener su información. Creamos una nueva función llamada _CargarInformacion(Value) la cual va a recibir desde un control DropDownList el valor del elemento seleccionado, y a buscarlo en el archivo xml, una vez encontrado el valor mostrara la edad en la caja de texto.
function _CargarInformacion (value) {
// llama la funcion _ CargarXMLDocumento
xhttp = _CargarXMLDocumento();
//busca el tag que contiene el nombre ‘persona’ y lo agrega a la variable allitems
var allitems = xhttp.getElementsByTagName('personas');
// se crea una variable de tipo vector o arreglo
results = new Array;
//ahora se recorre la variable allitems
for (var i = 0; i < allitems.length; i++) {
//recorremos los tags y guardamops el valor del tag en la variable name
//1
// en este caso el numero 1 equivale al valor del tag
var name = allitems[i].lastChild.nodeValue;
//comparamos que el valor del tag sea similar al valor que recibio la funcion _CargarInformacion()
if (name == value) {
// al coincidir el valor del tag con el valor enviado desde el DropDownList lo guardara en la la //variable results
results.push(allitems[i]);} }
//una vez finalizado el ciclo se procede a inserter los datos encontrados en los correspondientes
//controles en este caso el TextBox
// recorremos los nuevos resultados de la variable results y buscamos el atributo edad el cual
//se mostrara en el campo del textbox
for (var i = 0; i < results.length; i++) {
document.getElementById("TextBox1").value=results[i].getAttribute('edad')}
return false;}
PAGINA HTML Configuramos la pagina html que queda de la siguiente forma.
<body>
</body>
Notese que al control DropDownList se le agrego el evento OnChange la cual es el encargadon de ejecutar la función. CODIGO COMPLETO. Finalmente obtendremos el siguiente resultado. Es muy importante que el archivo XML se encuentre al mismo nivel de jerarquía que la página ASP, si se encontrara en una carpeta diferente simplemente definimos la ruta en la funcion _CargarXMLDocumento () en la línea xhttp.open('GET', ‘../otras carpetas/PERSONAS.xml’, false)
<html> <head runat="server"></html></head>
No hay comentarios:
Publicar un comentario