Ver Mensaje Individual
  #10 (permalink)  
Antiguo 22/03/2011, 12:25
principiante2011
 
Fecha de Ingreso: marzo-2011
Mensajes: 14
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: Actualizar web con ajax

Cita:
Iniciado por johhan16 Ver Mensaje
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