Principal › Forums › Creando Sitios Web › AJAX

¿Cómo instancias tus objetos XMLHttpRequest?

Enero 30, 2007 - 6:47pm — alexis

Hace un tiempo publiqué una consulta sobre el código que usamos para instanciar objetos XMLHttpRequest, me gustaría conocer sus opiniones y que veamos si existe una forma recomendada por la mayoría para añadir Ajax en nuestras aplicaciones.

Saludos.

‹ Videos demostrativos de ASP.NET AJAX Compartiendo Enlaces Sobre AJAX ›
Enero 30, 2007 - 10:29pm — MaXaC

Instanciando ajax

Haber, AJAX hasta ahora solo lo he utilizado para mostrar datos, como el detalle de una seudo-grilla o cambiar opciones en combos enlazados, no lo he utilizado aun para cosas mas exoticas, asimismo no estoy muy de acuerdo con el uso de scripts como el scriptaculous o protopype me parecen demasiado pesados. Ehmmm para declarar mi Ajaxito utilizo:

function tomar_ajax()
{
var req = false;
try
{
req = new XMLHttpRequest(); /* e.g. Firefox */
}
catch(err1)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP");
/* some versions IE */
}
catch(err2)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP");
/* some versions IE */
}
catch(err3)
{
req = false;
}
}
}
return req;
}

var myrequest = tomar_ajax();

function llamar_ajax()
{
var lastname=document.form1.myname.value;
var laurl="process.php?surname=" + lastname;
myrequest.open("GET", laurl , true);
myrequest.onreadystatechange=respuesta_ajax;
myrequest.send(null);
}

function respuesta_ajax()
{
if (myrequest.readyState==4)
{
if(myrequest.status==200)
{
document.getElementById('imagen').innerHTML = myrequest.responseText;

}
else
{alert('a ocurrido un error' + myrequest.statusText);}
}
else
{
document.getElementById('imagen').innerHTML='';
}
}

Un poco largo, he visto mas formas, pero me quedo con esta por mientras, por cierto todavia siempre para pasar uso GET, por POST es una linea mas extensa, pero no le veo el porque, ahhh, y para terminar hace tiempo que tengo un problema en la codificacion de caracteres especiales, hice de todo, cambiar el charset, cambiar la codificacion de los campos en Mysql pero nada(si lo se, es mejor que abra otro post para esto :b)

Enero 31, 2007 - 2:47pm — CesarS

Lo mejor es Prototype

descargar y usar, un ejemplo :


URL = 'http://www.google.com/search?q=Prototype';
new Ajax.Request('/proxy?url=' + encodeURIComponent(URL), {
method: 'get',
onSuccess: function(transport) {
var notice = $('notice');
if (transport.responseText.match(/‹a class=l href="http:\/\/prototypejs.org/))
notice.update('Yeah! You are in the Top 10!').setStyle({ background: '#dfd' });
else
notice.update('Damn! You are beyond #10...').setStyle({ background: '#fdd' });
}
});

Prototype

Saludos

- - - - - - - - - - - - - - - - - - - -
CesarS | moderador
backdraft : usabilidad y desarrollo web

Enero 31, 2007 - 3:23pm — alexis

Claro, si decides usar una librería Javascript

Pero me refería específicamente a la forma de instanciar el objeto XHR en forma nativa en Javascript, y no a través de una librería.

Sería bueno darle un vistazo al método que usa Prototype y otras librerías.

jQuery tiene una forma muy particular de hacerlo pero yo me inclino por la opción basada en try y catch, similar a la que mencionó Max.

Alexis Bellido
Drupal en 15 gotas. Aprende a usar Drupal en 48 horas.

Febrero 1, 2007 - 11:22pm — Mauricio

De acuerdo con Alexis

Ruben Mauricio
Saludos:
De acuerdo con Alexis, aunque existen muchas otras formas de instanciar un objeto XMLHttpRequest, por ejemplo seria usando la estructura de decisión if – else.
function getXMLHTTPRequest()
{
var req = false;
try
if (window. XMLHttpRequest();
{
req = new XMLHttpRequest();
} else {
if (window.ActiveXObject)
{
Pero para el caso de la versión del navegador Explorer tendríamos que usar try – catch entonces no tiene sentido.

Otro forma seria usando el objeto navigatior con la propiedad appName, pero es mas recomendable esta opción que es similar a la presentada por Max.
function getXMLHTTPRequest()
{
var req = false;
try
{
req = new XMLHttpRequest(); /* p.e. Firefox */
}
catch(err1)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP");
/* algunas versiones IE */
}
catch(err2)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP");
/* algunas versiones IE */
}
catch(err3)
{
req = false;
}
}
}
return req;
}

var miPeticion = getXMLHTTPRequest();

function llamarAjax() {
// declara una variable que contiene alguna información
// para pasar al servidor
var apellido = 'Mauricio';
// construye la URL del script del servidor que queremos llamar
var url = "miscriptdeservidor.php?surname=" + apellido;
// generar un número aleatorio
var miAleatorio=parseInt(Math.random()*99999999);
// pedimos a nuestro objeto XMLHTTPRequest que abra una
// conexión con el servidor
miPeticion.open("GET", url + "&rand=" + miAleatorio, true);
// preparamos una función respuestaAjax() para ejecutarse cuando
// la respuesta haya llegado
miPeticion.onreadystatechange = respuestaAjax;
// y finalmente enviamos la petición
miPeticion.send(null);
}

function respuestaAjax() {
// sólo estamos interesados en un readyState de 4,
// es decir "completado"
if(miPeticion.readyState == 4) {
// si la respuesta HTTP del servidor es "OK"
if(miPeticion.status == 200) {
... declaraciones a ejecutar por el programa ...
} else {
// crear un mensaje de error para cualquier
// otra respuesta HTTP del servidor
alert("Ha ocurrido un error: " + miPeticion.statusText);
}
}
}

-------------------------------
Ruben Mauricio Avalos
Gerente de Informática PVG & DATA

Drupal en 15 gotas