Actualizar web con ajax

[principiante2011]

hola a todos soy nuevo en este foro y estoy poco a poco aprendiendo html pero ahora me gustaria aprender a actualizar mi web mediante ajax ,he leido algun tutorial pero aun no consigo hacerlo ,si fuese posible me puedan ayudar paso a paso para que yo aprenda.segun tengo entendido tienes que guardar un archivo llamado iquey.php o algo asi y en el index de la web hay que pone algo mas pero no se bien lo que ,como veis estoy echo un lio y seguro no es tan dificl como parece.bueno espero que me puedan ayudar y aprender mucho en esta web .saludos y gracias de antemano

[maycolalvarez]

querrás decir jquery, y no, no es necesario usar jquery, ni ningún archivo js para implementar ajax (el usar un archivo js es solo para separarlo del html y usarlo en otros para reutilizarlo), además es <<<imprescindible>>> que domines al menos algo de javascript y no digamos de al menos un script del lado del servidor como PHP, JSP, ASP entre otros.

busca un tutorial de AJAX básico, en donde te expliquen como crear el XmlHttpRequest, así es la mejor forma de aprender, una vez domines el concepto, puede utilizar frameworks como jQuery que solamente te facilitan la tarea, pero sigue siendo lo mismo: AJAX; además en un buen tutorial deben de indicarte que hasta con un iframe puedes implementar AJAX, suerte

[principiante2011]

he buscado varios tutoriales pero no me sale y no se que hacer ya saludos.¿alguna idea o algun link ?

[maycolalvarez]

¿en serio? por favor!!! un poco más de empreño, si cuando yo me enteré de AJAX no tardé 30 minutos en comprenderlo!!!!:

http://www.tufuncion.com/tutorial_basico_ajax
tan simple como ir a google: http://www.google.com/search?ie=UTF-...=tutorial+ajax

[principiante2011]

hola te agradezco tu ayuda pero ese tutorial ya lo habia visto ,pero sigue sin salirme he vista varios tutoriales y los he subido a mi web pero algo me sale mal y ya estoy echo un lio le pongo interes , buscando encontre un jquery http://jquery.com/ .ejemplo en el index pongo esto.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax.js"></script>

despues subo un archivo llamado jquery.js es decir este http://jquery.com/

despues un archivo llamado ajax.js y pongo esto



function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function Post(post,elemento){
cont = document.getElementById(elemento);
ajax=objetoAjax();
ajax.open("GET", post);
ajax.onreadystatechange = function(){
if (ajax.readyState == 4 && ajax.status == 200) {
cont.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}

function () {Post('/','');}
function destacados() {Post('destacado','destacado');}

function load() { Post('destacado','destacado'); setTimeout('()',2000); setInterval('destacados()',120000);}


if ( top != self ) top.location.href = 'URL DE MI WEB';


PUES ASI ES COMO ESTOY HACIENDO PERO NO SE SI ES CORRECTO .HABER SI ME PUEDES GUIAR TE LO AGRADECERIA MUCHO

[memoadian]

Lo que pasa es que no sabes nada de programación , y tratas de hacerlo como una receta de cocina, y no va por ahi, para saber ajax hay que conocer javascript, DHTML y un lenguaje de servidor, como php o asp, y aparte ya tener bien dominado los pseudolenguajes html, xhtml, y csspor lo que la tarea es casi titanica para un principiante, estas queriendo volar con plumas y pegamento, yo te recomiendo que empieces por el principio aqui te dejo un tutorial de

javascript
css
dhtml
php
html
ajax

te tomara cerca de un mes si le hechas muchas ganas masticar todo.

recuerda que no es aprenderse todo de memoria, solo los conceptos básicos, y la lógica de la programación que en todos los casos es igual, una vez dominado uno casi seguro que dominas todos.

suerte

[principiante2011]

bueno la verdad que no soy novato llevo 2 años con html y no creo que sea tan dificil subir 2 archivos .en vez de desanimar podrias poner un ejemplo ya creado para que lo pruebe y mirar si me funciona .una vez que me funcione ya estudiare el codigo y comprendere como se hace , o en el colegio el profesor te decia que te buscaras la vida , si nadie te ayuda nunca aprenderas .ya lo intentado pero no me sale y sigo buscando como hacerlo no todos cogemos las cosas a la primera . simplemete quiero yo que mi web actulice sola sin necesitad de decirle a los usuarios que lo agan ,solo son 2 archivos que hacen falta no creo que tenga que echarme 1 mes a estudiar ajax xd xd xd .saludos

[memoadian]

no pues entonces ni como ayudarte, quieres que te de un código ya hecho, y has revisado segun tu bastantes tutoriales, no se trata de subir dos archivos, por que si fuera eso ya lo hubieras logrado, y dices que no eres novato llevando dos años de html que como dije es un pseudolnguaje con dificultad nivel -1, si crees que en el colegio el profesor me decia que me buscara la vida... pues dejame decirte que asi es tuve muchos maestros que me dejaban a mi suerte, y los mejores que tuve no fueron aquellos que medieron todo si no los que me ayudaron a entender que nada viene en bandeja de plata.

por otro lado yo aprendi a programar completamente solo no es mi profesión esto y asi como te dije, estudiando no un mes, si no un año. ok pero esto no es mi autobiografia, y la tuya es una pésima actitud, no es desanimar, te estoy dando la llave para que no sigas pidiendo codigos hechos por terceros que dificilmente llegarán y menos en este foro aunque sigue con esa actitud y puede que tengas suerte :D

y eso de que solo es cuestion de subir dos archivos XD ¡¡¡no se de donde tienes esa idea!!!

[johhan16]

Veamos que tan cierto es lo que dices, te dare el ejemplo que quieres

se haran 3 archivos en una misma carpeta index.php, ajax.js y prueba_ajax.php

index.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de Funcionamiento AJAX</title>
<!-- AQUI SE COLOCA LA RUTA DONDE SE ENCUENTRA EL ARCHIVO 
AJAX.JS EN ESTE CASO ESTA EN LA MISMA CARPETA QUE LOS OTROS ARCHIVOS -->
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label>
Escribe tu nombre:
<input type="text" name="nombre" id="nombre" />
</label>
<label>
<input type="button" name="saludar" onclick="mostrarNombre(this.form.nombre.value)" id="saludar" value="Enviar" />
</label>
<!-- AQUI SE HACE EL DIV DONDE DARA RESPUESTA EL AJAX -->
</form>
<div id="respuesta_ajax">
</div>

</body>
</html> 

ajax.js

Código HTML:

//ESTA PRIMERA PARTE DEL CODIGO SE HACE PARA CREAR EL OBJETO EN AJAX Y FUNCIONE EN LOS EXPLORADORES
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
//AQUI TERMINA ESTA FUNCION QUE NO CAMBIA


//ESTA FUNCIONE SI PUEDE CAMBIAR SEGUN SEA EL CASO
function mostrarNombre(nombre){
	//donde se mostrará el resultado de la eliminacion
	divResultado = document.getElementById('respuesta_ajax');
	
	
		//instanciamos el objetoAjax
		ajax=objetoAjax();
		//uso del medotod GET
		ajax.open("GET", "prueba_ajax.php?nombre="+nombre);
		ajax.onreadystatechange=function() {
			
			if (ajax.readyState==4) {
				//mostrar resultados en esta capa
				divResultado.innerHTML = ajax.responseText
			}
		}
		//como hacemos uso del metodo GET
		//colocamos null
		ajax.send(null)
}

prueba_ajax.php

Código PHP:

  <?php 
$nombre = strtoupper($_GET['nombre']);
echo "Hola <strong>".$nombre."</strong> espero que con esto aprendas"; 
?>   

y para terminar de completar y digas que soy bueno aqui te lo monte en un servidor

http://prueba.centerhipico.com/

ahora tu me diras si no lo entiendes

[principiante2011]

Iniciado por johhan16

Veamos que tan cierto es lo que dices, te dare el ejemplo que quieres

se haran 3 archivos en una misma carpeta index.php, ajax.js y prueba_ajax.php

index.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de Funcionamiento AJAX</title>
<!-- AQUI SE COLOCA LA RUTA DONDE SE ENCUENTRA EL ARCHIVO 
AJAX.JS EN ESTE CASO ESTA EN LA MISMA CARPETA QUE LOS OTROS ARCHIVOS -->
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label>
Escribe tu nombre:
<input type="text" name="nombre" id="nombre" />
</label>
<label>
<input type="button" name="saludar" onclick="mostrarNombre(this.form.nombre.value)" id="saludar" value="Enviar" />
</label>
<!-- AQUI SE HACE EL DIV DONDE DARA RESPUESTA EL AJAX -->
</form>
<div id="respuesta_ajax">
</div>

</body>
</html> 

ajax.js

Código HTML:

//ESTA PRIMERA PARTE DEL CODIGO SE HACE PARA CREAR EL OBJETO EN AJAX Y FUNCIONE EN LOS EXPLORADORES
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
//AQUI TERMINA ESTA FUNCION QUE NO CAMBIA


//ESTA FUNCIONE SI PUEDE CAMBIAR SEGUN SEA EL CASO
function mostrarNombre(nombre){
	//donde se mostrará el resultado de la eliminacion
	divResultado = document.getElementById('respuesta_ajax');
	
	
		//instanciamos el objetoAjax
		ajax=objetoAjax();
		//uso del medotod GET
		ajax.open("GET", "prueba_ajax.php?nombre="+nombre);
		ajax.onreadystatechange=function() {
			
			if (ajax.readyState==4) {
				//mostrar resultados en esta capa
				divResultado.innerHTML = ajax.responseText
			}
		}
		//como hacemos uso del metodo GET
		//colocamos null
		ajax.send(null)
}

prueba_ajax.php

Código PHP:

  <?php 
$nombre = strtoupper($_GET['nombre']);
echo "Hola <strong>".$nombre."</strong> espero que con esto aprendas"; 
?>   

y para terminar de completar y digas que soy bueno aqui te lo monte en un servidor

[url]http://prueba.centerhipico.com/[/url]

ahora tu me diras si no lo entiendes

muchas gracias por tu ayuda ahora empiezo a cogerlo mejor y me pondre manos a la obra a ver que tal me sale y empezare a estudiar los codigos y me gustaria aprender sobre php ,ajax etc... ya que hasta ahora solo usaba web html y ahora ya estoy con mi propia hosting y me gustaria avanzar mas.esto es a lo que me referia de animar a la gente y poner ejemplos ya que se hace mas facil aprender y para eso esta este foro para compartir informacion .saludos

[johhan16]

Bueno cominza a practicar y espero que coloques muy pronto por aqui un codigo o tu pagina ya funcionando con ajax

[principiante2011]

hola amigos he conseguido hacer este ejemplo http://prueba.centerhipico.com/ y me a funcionado ahora me gustaria aprender a refrescar la web sin tener que actualizar los usuarios , he echo alguna prueba pero me falta el codigo load .

ejemplo

idex html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de Funcionamiento AJAX</title>
<!-- AQUI SE COLOCA LA RUTA DONDE SE ENCUENTRA EL ARCHIVO
AJAX.JS EN ESTE CASO ESTA EN LA MISMA CARPETA QUE LOS OTROS ARCHIVOS -->
<script type="text/javascript" src="ajax.js"></script>
</head>
<script type="text/javascript" src="load.js"></script>
</head>
<body>


onload="load()">
<div id="paginaweb">
<table id="web" border="0">







ahora hice otro codigo llamado ajax.js

//ESTA PRIMERA PARTE DEL CODIGO SE HACE PARA CREAR EL OBJETO EN AJAX Y FUNCIONE EN LOS EXPLORADORES
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
//AQUI TERMINA ESTA FUNCION QUE NO CAMBIA


//ESTA FUNCIONE SI PUEDE CAMBIAR SEGUN SEA EL CASO
function mostrarNombre(nombre){
//donde se mostrará el resultado de la eliminacion
divResultado = document.getElementById('respuesta_ajax');


//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod GET
ajax.open("GET", "prueba_ajax.php?nombre="+nombre);
ajax.onreadystatechange=function() {

if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
}
}
//como hacemos uso del metodo GET
//colocamos null
ajax.send(null)
}




ahora hay que crear el archivo llamado load.js que sera e encargado de actualizar la web cuando yo le mande pero lo he buscado y no se cual es me lo podias pasar porfavor y decirme si voy bien encaminado o tengo algun error saludos y gracias de antemano

[maycolalvarez]

fíjate bien en está parte:

Código HTML:

<body>
 
 
onload="load()">
 

como pretendes asignar el evento load al body, si ya cerraste el tag???, debe ser así:

Código HTML:

<body onload="load()">
 

[johhan16]

Bueno te puedo decir que estas mas perdido que indio en New York

Tu dijistes que sabias de html, y tienes un error en el , debe ser asi

Código HTML:

<body onload="nombre_de_funcion()">

<!-- AQUI EL RESTO DE TU CODIGO -->

</body> 

ahora bien tu colocas alli "load()" eso es una funcion que estas llamando, pero de donde?

ok estas llamando un script que se recomienda que este antes de </head>
<script type="text/javascript" src="load.js"></script>

pero en realidad existe ese archivo load.js porque no mostraste el codigo, creo que no.

por otra parte si quieres actualizar la pagina para mostrar informacion que se haya agregado debes es recargar la parte que te interesa cada cierto tiempo

como este ejemplo
http://www.polargeek.net/ajax-refres...cierto-tiempo/

No te metas a lo hondo del Mar si no sabes nadar primero aprende a nadar

Saludos...

[maycolalvarez]

otra cosa que no vi, mezclas todo junto y no hay que indique que es js y que es html, el navegador no lo adivinará por ti...

[memoadian]

Por eso lo de los tutoriales, hmm por cierto los links que te dejé traen minimo 30 ejemplos por tutorial, todos explicados. :D.