Entradas

Mostrando entradas de octubre, 2008

Tratamiento de respuestas xml con ajax

Bien veamos como tratar elementos que recibimos de respuesta como XML al ejecutar AJAX, para ello existen varios métodos del objeto XMLHttpRequest, veamos en un ejemplo:

// obtenemos el tag con el nombre deseado
xmlhttp.responseXML.getElementsByTagName('nombre_tag')
// obtenemos la cantidad de tags con este nombre
xmlhttp.responseXML.getElementsByTagName('nombre_tag').length
// sacamos el objeto del tag i de este nombre
xmlhttp.responseXML.getElementsByTagName('nombre_tag').item(i).firstChild
// el valor de este elemento
xmlhttp.responseXML.getElementsByTagName('nombre_tag').item(i).firstChild.data

Con estos valores podremos recorrer el archivo XML y realizar cualquier roceso con los datos que recibamos, asignarlo a valores de formularios, ssacarlos en pantalla, etc, etc.

Error con la codificación de la respuesta

algo que me trajo de cabeza era un error con una respuesta generada al llamar a un documento en el server que ejecutaba un script para crear un archivo XML y es que aunque definas el archivo XML como:

$xml_response = new XmlWriter();
$xml_response->openMemory();
$xml_response->startDocument('1.0', 'ISO-8859-1');

o sea defines que es codificación ISO-8859-1, para internet explorer esto no importa, con firefox si funciona pero explorer ni caso y es que hay que definir además el header de esta respuesta, o sea que la primera línea del código de esta url que queremos ejectar del lado del servidor tiene que ser:

header("Content-Type: text/xml; charset=ISO-8859-1");

y es que si no te darían errores como (aclaro que el problema es IE como siempre):

IE error: Automation server can't create object - JavaScript

Método onreadystatechange del objeto XMLHttpRequest

Con este método lo que hacemos es tratar la respuesta recibida por parte del servidor, ¿Cómo sabemos cuando se ha ejecutado correctamente? Para ello utilizamos:

ajaxNEW.readyState

Este devolverá los siguientes valores:
0 - Sin inicializar
1 - Abierto (acaba de llamar open)
2 - Enviado
3 - Recibiendo
4 - A punto
por ejemplo:

ajaxNEW.onreadystatechange=function() {
if (ajaxNEW.readyState==4)
// pongo la rspuesta tal y como la recibo dentro del contenedor
// la propiedad responseText me devuelve la respuesta tal y como se genera en el server.
contenedorLugar.innerHTML = ajaxNEW.responseText;
}

Si ademas queremos compreobar que se ejecutó correctamente la página una vez llegado as readyState == 4 nos bastaría con hacer otra comprobación:

if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) alert("URL Exists!")
else if (xmlhttp.status==404) alert("URL doesn't exist!")
else alert("Status is "+xmlhttp.status)
}

La propiedad status almacena la respuesta del…

Método open del objeto XMLHttpRequest

Una vez que ya hemos creado el objeto XMLHttpRequest (ver entrada anterior) entonces podemos realizar las llamadas al servidor sin necesidad de recargar la página al completo. estas llamadas se hacen a través de la función open y tiene los siguientes parámetros:

ajaxNEW=makeAJAX();
ajaxNEW.open("GET",url,true);

el primer parámetro es el tipo de llamada y puede ser GET, POST o HEAD, luego veremos cada uno en detalle.
el segundo es la url que vamos a ejecutar y de la cual obtendremos la respuesta.
el tercero es si queremos hacerlo de forma asíncrona o no, generalmente es TRUE para que así no se recargue la página.
esta función tiene otros 2 parámetros para el acceso de páginas restringidas por usuario y contraseña pero nunca los he utilizado, los parámetros serían : usuario y password.
veamos ahora las distintas llamadas al método open.
GET
Esta función carga la respuesta generada de ejecutar la url en el div contenedor:

function carga(contenedor,url){
var contenedorLugar;
contenedo…

Código para crear un objeto XMLHttpRequest

function makeAJAX() {
var xmlhttp=false;
// Entre estos ids podemos obviar comodamente
// la versión Msxml2.XMLHTTP.7.0
var ids = ["Msxml2.XMLHTTP.7.0",
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"];
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation,
// we can cope with old IE versions.
// and security blocked creation of the objects.
for(var i=0; !xmlhttp && i < ids.length; i++) {
try {
xmlhttp = new ActiveXObject(ids[i]);
} catch(ex) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
/*
* Esta condición es realmente obsoleta pues
* actualmente todos los navegadores modernos
* ya vienen con compatibilidad innata…

Introducción a AJAX y el objeto XMLHttpRequest

Este artículo es una recopilación de datos provenientes de varias fuentes en internet y varios códigos que poco a poco he ido aplicando en el transcurso del tiempo. La mayor parte de este documento es una actualización y traducción de un artículo que podéis encontrar en la siguiente dirección http://www.jibbering.com/2002/4/httprequest.html con fecha de enero de 2006.

Las cosas desde ese momento no han cambiado mucho en AJAX aunque si se han actualizado algunos componentes del objeto XML HTTP Request sobre todo para Internet Explorer, siendo el cambio más novedoso que desde IE8 ya existe compatibilidad innata con el objeto XMLHttpRequest no siendo ya necesaria la creación de ActiveXObject, esta compatibilidad se había venido testeando por parte de Microsoft desde IE7 pero la compatibilidad innata sólo la han alcanzado en IE8.

¿Qué es el objeto XMLHttpRequest y por qué utilizarlo?

Tanto IE, Safari, Mozilla, Konqueror, Ice Browser, Opera como todos los navegadores que se basen en los motor…