Capturar un error de AJAX y mostrar una alerta del mismo

[junihh]

Hola señores

Estoy preparando un script para mostrar ventanas de mensajes que permite tanto texto simple, HTML, así como cargar archivos de texto externos con AJAX.

El script hace muy bien el trabajo, pero vi que faltaba crear una alerta si el archivo a cargar no era encontrado, así que aplique lo siguiente:

Código HTML:

if (xh.status == 400)
{
	document.body.removeChild( ldn );
	dt['texto'] = '<h3 style="margin:0;padding:0;font-size:20px;line-height:20px;">showMessage[ERROR]</h3><br/>El archivo con la url "' + dt['url'] + '" no fué encontrado. Favor de revisar.';
	dt['ancho'] = 300;
	ths.showLayer (dt);
	return;
};
if (xh.readyState == 4 && xh.status == 200)
{
	document.body.removeChild( ldn );
	dt['texto'] = xh.responseText;
	ths.showLayer (dt);
};

Sin embargo, no me muestra la alerta como debería. Se que la función que crea el layer está haciendolo bien, pero parece que "xh.status == 400" no es lo que necesito para el reconocer el error al cargar el archivo.

Esto es el código completo de la parte que carga el AJAX:

Código HTML:

showMessage.prototype.message = function (dt)
{
	var ths = this;
	//
	if (dt.texto && !dt.url)
	{
		ths.showLayer (dt);
		//
	} else if (!dt.texto && dt.url)
	{
		var ldn = document.createElement ('div');
		ldn.className = 'messageBox_loading';
		ldn.style.position = 'fixed';
		document.body.appendChild (ldn);
		ldn.style.left = ((ths.winWH('w') - ldn.offsetWidth) / 2) + 'px';
		ldn.style.top = ((ths.winWH('h') - ldn.offsetHeight) / 2) + 'px';
		//
		var xh = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
		xh.open('GET',dt['url'],false);
		xh.onreadystatechange = function ()
		{
			if (xh.status == 400)
			{
				document.body.removeChild( ldn );
				dt['texto'] = '<h3 style="margin:0;padding:0;font-size:20px;line-height:20px;">showMessage[ERROR]</h3><br/>El archivo con la url "' + dt['url'] + '" no fué encontrado. Favor de revisar.';
				dt['ancho'] = 300;
				ths.showLayer (dt);
				return;
			};
			if (xh.readyState == 4 && xh.status == 200)
			{
				document.body.removeChild( ldn );
				dt['texto'] = xh.responseText;
				ths.showLayer (dt);
			};
		};
		xh.send('');
		//
	} else if (dt.texto && dt.url)
	{
		dt['texto'] = '<h3 style="margin:0;padding:0;font-size:20px;line-height:20px;">showMessage[ERROR]</h3><br/>Debe especificar sólo "url" o "texto" para el contenido del mensaje, no ambos.';
		dt['ancho'] = 300;
		ths.showLayer (dt);
	};
};

[Panino5001]

Quizá te sirva algo como esto (no es lo mismo, pero lanza una alerta en caso de que no haya una respuesta correcta pasados 10 segundos):

Código PHP:

  function requestCallbackParamUnicode(url,callback,params){ 
    var H=new http(); 
    if(!H)return; 
    H.open('post',url+'?'+new Date().getTime(),true); 
    var xmlHttpTimeout=setTimeout(function(){ 
        if($('aguarde')){ 
            $('aguarde').innerHTML='Server Error';//acá lanzo el error 
        } 
        H.onreadystatechange=function(){} 
        H.abort(); 
        H=null;                        
    },10000); 
    H.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
    H.onreadystatechange=function(){ 
        if(H.readyState==4 && H.status == 200){ 
            clearTimeout(xmlHttpTimeout); 
            callback(H.responseText); 
            H.onreadystatechange=function(){} 
            H.abort(); 
            H=null; 
        } 
    } 
    var p=''; 
    for(var i in params){ 
        p+='&'+i+'='+encodeURIComponent(params[i]);     
    } 
    H.send(p); 
}  
   

[junihh]

Caramba, no había pensado en la opción de período de tiempo. Gracias por la idea Panino, me sirvió de mucho.

Por otro lado y ya en cuanto a tu código: ¿Qué es "$('aguarde')"? ¿Eso es de jQuery?

[Panino5001]

En realidad el $ en ese caso es un reemplazo de document.getElementById

[junihh]

Iniciado por Panino5001

En realidad el $ en ese caso es un reemplazo de document.getElementById

Pues si te refieres a que hiciste esto:

Código HTML:

$ = document.getElementById;

Pues la verdad me gustó también ese tip. Gracias también por eso.

[Panino5001]

En realidad, sería así:

Código PHP:

  var $=function(x){return document.getElementById(x);};  
   

[junihh]

Iniciado por Panino5001

En realidad, sería así:

Código PHP:

  var $=function(x){return document.getElementById(x);};  
   

Entiendo. Pues usaré ese método, que me gustó bastante la verdad.