AJAX Novatos, código de ejemplo y duda. [Sin solucionar]

anf · #1 (**permalink**) 03/07/2009, 08:07

Hola amigos, antes de plantear mi duda quisiera colaborar con mi pequeño granito de arena, esto es un pequeño código JavaScript que funciona actualmente y que puede ayudaros a empezar en el mundo de AJAX si no tenéis nada de experiencia.

Primero lo esencial, la función de llamada:

Código:

function getXMLHTTPRequest() {
	var r = false;
	try { r = new XMLHttpRequest(); } /* Navegadores competentes */
	catch(e) {
		try { r = new ActiveXObject("Msxml2.XMLHTTP"); } /* Algunas versiones de IE */
		catch(e) {
			try { r = new ActiveXObject("Microsoft.XMLHTTP"); } /* Otras versiones de IE */
			catch(e) { r = false; }
		}
	}
	return r;
}

Creamos la llamada:

Código:

var http = getXMLHTTPRequest();

Ahora llamada y retorno:

Código:

function callPage(page) {
	trash = parseInt(Math.random()*999999999); /* Esto evita el cacheo de páginas */
	url = page + "&trash=" + trash;
	try {
		http.open("GET", url, true);
		http.onreadystatechange = tracePage;
		http.send(null);
	}
	catch(e){
		alert('Mensaje de error si no puede hacer la peticion.');
	}
	finally{}
}

Y ahora el proceso:

Código:

function tracePage() {
	if (http.readyState == 4) {
		if (http.status == 200) {
			var r = http.responseText; /* Se puede recibir en XML o en String (Text) */
			document.getElementById("ajax").innerHTML = r; /* Crea un <div id='ajax'></div> para ver el resultado. */
		}
	} 
}

Uso, en tu página pon algun evento Javascript, por ejemplo un onClick para que haga un:

Código:

callPage("miPagina.php?saludo=Hola");

miPagina.php:

Código PHP:

<?php print "Esto es una prueba simple de AJAX. ¡".$_GET["saludo"]." mundo!"; ?>

HTML de ejemplo (sin doctype, encoding etc..., simple):

Código HTML:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript">
function getXMLHTTPRequest() {
	var r = false;
	try { r = new XMLHttpRequest(); } /* Navegadores competentes */
	catch(e) {
		try { r = new ActiveXObject("Msxml2.XMLHTTP"); } /* Algunas versiones de IE */
		catch(e) {
			try { r = new ActiveXObject("Microsoft.XMLHTTP"); } /* Otras versiones de IE */
			catch(e) { r = false; }
		}
	}
	return r;
}
var http = getXMLHTTPRequest(); /* http tiene que ser una variable global, y puede llamarse miPeticion o como quieras */
function callPage(page) {
	trash = parseInt(Math.random()*999999999); /* Esto evita el cacheo de las páginas */
	url = page + "&trash=" + trash;
	try {
		http.open("GET", url, true);
		http.onreadystatechange = tracePage;
		http.send(null);
	}
	catch(e){
		alert('Mensaje de error si no puede hacer la peticion.');
	}
	finally{}
}
function tracePage() {
	if (http.readyState == 4) {
		if (http.status == 200) {
			var r = http.responseText; /* Se puede recibir en XML o en String (Text) */
			document.getElementById("ajax").innerHTML = r; /* Crea un <div id='ajax'></div> para ver el resultado. */
		}
	} 
}
</script>
</head>
<body>
<a href='#' onclick="javascript:callPage('miPagina.php?saludo=Hola');">Pincha aqui</a>
<hr />
<div id='ajax'>Ahora mismo no hay nada aquí.</div>
</body>
</html>

bueno, básicamente es una idea, me tengo que ir a currar en 5minutos y tengo algo de prisa, si alguien no entiende nada o necesita una explicacion detallada estoy encantado de responder todo lo que surja, toda esta información la puedes encontrar en los video tutoriales de Jesús Conde, ahora voy con mi problema:

Tengo una petición que desearía meter en un array, necesito abrir 25 hilos XMLHttpRequest para que cada uno de ellos pida una informacion a un sitio distinto y vayan apareciendo en la pagina los resultados en 25 divs, actualmente lo tengo funcionando en cadena, o en serie, quiere decir que primero lanza el 1 y si no termina no lanza el 2, asi hasta el 25, mi idea es lanzar los 25 de golpe y segun vayan llegando leerlos y actualizar los datos, lo que tengo ahora mismo es esto:

Código:

var httpDomain = new Array();
var tld = 0; /* global */
function domainSearch (domain) {
	for (tld = 0; tld <= 25; tld++) {
		httpDomain[tld] = getXMLHTTPRequest();
		searchDomain(domain);

	}
}
function searchDomain(consult) {
	try {
		httpDomain[tld].open("GET", "search.php?domain=" + consult + "&tld=" + tld, true);
		httpDomain[tld].onreadystatechange = traceDomain;
		httpDomain[tld].send(null);
	}
	catch(e){ alert('Servidor en mantenimiento, intentelo mas tarde.'); }
	finally {}
	if ($("div#domain_roll").is(":hidden")) { $("div#domain_roll").show("slow"); }
}

Sabeis por que no funciona el httpDomain[tld]? No se puede hacer mediante un Array(); ?

Se que una solución rápida y chapucera es hacer algo tipo:

httpDomain1 = getXMLHTTPRequest();
httpDomain2 = getXMLHTTPRequest();
httpDomain3 = getXMLHTTPRequest();
httpDomain4 = getXMLHTTPRequest();
httpDomain5 = getXMLHTTPRequest();

etc... y lo mismo con el tracePage y demás pero como veréis eso es una chapuza catedrática, imagínate que tengo que hacer algún día una petición de 500 Arrays con 500 datos en cada Array, eso es mucho código desperdiciado.

Bueno tengo que irme amigos, muchas gracias por vuestra ayuda y espero que sirva para alguno lo que puse arriba, me sentiría mejor persona

Vhan · #2 (**permalink**) 03/07/2009, 10:33

bueno.. hize una lectura rapida... si se me pasa algo sorry...

no comprendo muy bien el

Código:

var httpDomain = new Array();
var tld = 0; /* global */
function domainSearch (domain) {
	for (tld = 0; tld <= 25; tld++) {
		httpDomain[tld] = getXMLHTTPRequest();
		searchDomain(domain);

	}
}

creas una array httpDomain y luego en la funcion... le asignas valores? prueba pasandole el tamaño del array primero ( var httpDomain = new Array(25); )
asi mismo, creo que no es necesario el "=" en "for (.....tld <= 25.....) {"

porque dices que no funciona; no agrega elementos?, si esta funcionando getXMLHTTPRequest()?

prueba un alert para eso

Código:

	for (tld = 0; tld < 25; tld++) {
		httpDomain[tld] = getXMLHTTPRequest();
                alert(httpDomain[tld]);
		searchDomain(domain);

	}

anf · #3 (**permalink**) 03/07/2009, 13:03

Intento hacer un bucle para abrir hasta 25 peticiones paralelamente (25 es un numero de ejemplo, en realidad son 24 exactas, por eso cometí el error de poner 25 en el for cuando en realidad hace 26 ya que para hacer las 24 tengo <= 23), supongo que si tengo un request httpDomain[15] por ejemplo, el if de httpDomain[15].status debería funcionar, pero no funciona, el problema es ese que si no uso un array por cada httpDomain request me hace solo el ultimo por que no doy tiempo a que cargue la pagina y me devuelva un código httpDomain.status = 200, entonces me devuelve el resultado 24.

Básicamente lo que estoy tratando de hacer es llamar 25 veces al archivo .php en hilos separados cada una con un parámetro y a medida que me va devolviendo resultados ir cambiando según el parámetro que sea.

Como dicen que una imagen vale mas que 1000 palabras, mas que una imagen os pongo el ejemplo mas parecido:

h t t p:// www . dondominio . com/buscar/estofunciona

anf · #4 (**permalink**) 06/07/2009, 17:01

He conseguido hacer funcionar el Script perfectamente, pero no es un metodo demasiado correcto, mirar:

Código:

httpDomain[tld].onreadystatechange = function traceDomain() {
 for (i = 0; i <= 23; i++) {
  if (httpDomain[i].readyState == 4) {
   if (httpDomain[i].status == 200) {
    var r = httpDomain[i].responseText;
    document.getElementById("tld-" + i).innerHTML = r;
   }
  }
 }
};

Como el valor de tld siempre va ser 24, por ser el último del bucle for, tengo que hacer un nuevo bucle que recorra del 0 al 23 y si coincide el número que supuestamente debería tener tld entonces sale estado 4 y finalmente estado 200, es bastante rápido, tarda unos 4 segundos en comprobar el estado de los 22 dominios, no es lo mejor pero de momento funciona hasta mejorarlo.