Hacer consulta con AJAX

chemajf · #1 (**permalink**) 16/10/2009, 04:00

Hola:

estoy intentando hacer una consulta a una pagina web utilizando AJAX y su respuesta insertarla en un DIV de mi pagina.

En el foro FAQs del foro de Ajax he encontrado el código siguiente:

Código:

function AJAX2(){
	var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
	var ajax = false;
	for(var i=0 ; !ajax && i<ajaxs.length ; i++){
		try{ ajax = new ActiveXObject(ajaxs); }
	catch(e) { ajax = false; }
	}
	if(!ajax && typeof XMLHttpRequest!='undefined') {
		ajax = new XMLHttpRequest();
	}
	return ajax;
}

Código:

function CARGARDATOS(pagina,capa, parametros){
	var ajax = AJAX2(); 
	if(!ajax){
		alert("No se puede ejecutar este proceso: Error de navegador");
		return false;
	}

	document.getElementById(capa).innerHTML = "<center><strong> ..:: Cargando Datos ::.. <br><br><img src='imagenes/cargando.gif'><br> <br> </center></strong>"; 

	ajax.open("POST",pagina,true);

	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4) { 
			document.getElementById(capa).innerHTML=ajax.respo nseText;
		}
	}
	
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ajax.send(parametros);

}

Pero al utilizarlo me da error y no se que pasa.

El error que me da es el siguiente:

cuando llamo a la función CARGARDATOS que a su vez llama a AJAX2, a la hora de hacer

Código:

try{ ajax = new ActiveXObject(ajaxs); }

me da el siguiente error: "ReferenceError: ActiveXObject is not defined"

Espero habarme explicado bien, pero por si no lo he echo, os pego el codigo de mi JSP:

Código:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Prueba de AJAX propio</title>
		<script type="text/javascript">
		function AJAX2(){
			var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
			var ajax = false;
			for(var i=0 ; !ajax && i<ajaxs.length ; i++){
			try{ ajax = new ActiveXObject(ajaxs); }
			catch(e) { ajax = false; }
			}
			if(!ajax && typeof XMLHttpRequest!='undefined') {
			ajax = new XMLHttpRequest();
			}
			return ajax;
		}
		
		function CARGARDATOS(pagina,capa, parametros){
			var ajax = AJAX2(); 
			if(!ajax){
			alert("No se puede ejecutar este proceso: Error de navegador");
			return false;
			}
	
			document.getElementById(capa).innerHTML = "<center><strong> ..:: Cargando Datos ::.. <br><br><img src='imagenes/cargando.gif'><br> <br> </center></strong>"; 
	
			ajax.open("POST",pagina,true);
	
			ajax.onreadystatechange = function() {
				if (ajax.readyState == 4) { 
			document.getElementById(capa).innerHTML=ajax.respo nseText;
			}
		}

		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send(parametros);

		}
		</script>
	</head>
	<body>
		<h1>Hola</h1>
		<p onclick="CARGARDATOS('http://www.google.es','divResultado','');">CLIKEAME</p>
		<div id="divResultado"></div>
	</body>
</html>

enlinea777 · #2 (**permalink**) 16/12/2009, 17:38

aunque ya lo habia posteado lo vuelvo a colocar aqui:

Hola esta cuestion de ajax es muy complicada hacerla a puro javascript por eso siempre recomiendo que utilicen Jquery.

aqui te dejo un link para que lo puedas estudiar aun que es sumamente facil:
jquery
te explico:

he aqui el codigo

Código HTML:

<script>
 $.get("prueba.php", { nombre: "John", hora: "2pm" },
   function(data){
     alert("datos de respuesta: " + data);
   });
</script>

$.get es para GET y $.post es para enviar la info por POST.
{ nombre: "John", hora: "2pm" } son los parametros que se envian a prueba.php
ahora la respuesta la recives en la variable " data "
function(data){
alert("datos de respuesta: " + data);
y la imprimes en pantalla por un alerta.

para agregarlo por ejemplo a el div con id: jorge o el <div id="jorge"></div> haces esto
function(data){
$("div#jorge").html(data);
con esto colocas el resultado en el div.

para mas ayuda un breve ejemplo:
con jquery se llaman a los elementos siempre asi $("elemento#id.clase")

insisto para mas info ver la pagina: www.visualjquery.com

_eNGeLs_ · #3 (**permalink**) 16/12/2009, 18:01

yo suelo usar MooTools www.mootools.net tambien es mucho mas facil que con javascript puro..
salu2!