Bueno Primero les Doy una Instroduccion de lo que es Ajax:
AJAX, acrónimo de
Asynchronous
JavaScript
And
XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Éstas se ejecutan en el cliente, es decir, en el navegador de los usuarios y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.
En Wikipedia:
es.wikipedia.org/wiki/AJAX
ajax.css:#demoArr { border:1px dashed; width:600px; background-color:#EAEAEA; text-align:center; }
#demoAba { text-align:center; }Bueno Aqui no Hay mucho que explicar es un codigo Css que hace input decorado.
ajax2.php:<?php
$tipoDato=$_POST['d'];
if($tipoDato=='ip') echo 'Tu IP es: '.$_SERVER['REMOTE_ADDR'];
elseif($tipoDato=="time") echo 'El horario del server es: '.date('G:i');
?>Se Comprueba que el texto obtenido mediante el Metodo POST de un Formulario sea igual a ip o a time si es igual a ip muestra la ip del usuario si es igual a time muestra la hora del servidor.
ajax.html:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ejemplo de Uso de Ajax</title>
<link rel="stylesheet" type="text/css" href="ajax.css">
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="demo" style="width:600px;">
<div id="demoArr">Ejemplo de Uso de Ajax</div>
<br>
<div id="demoAba">
<button type="button" onclick="traerDatos('ip')">IP</button>
<button type="button" onclick="traerDatos('time')">Hora</button>
</div>
</div>
</body>
</html>
Son Simples codigos Html entre ellos enlazamos los archivos de css y ajax y tenemos los botones que determinaran si se quiere la ip o el tiempo
Ajax.js:function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }
return xmlhttp;
}
function traerDatos(tipoDato)
{
// Obtendo la capa donde se muestran las respuestas del servidor
var capa=document.getElementById("demoArr");
// Creo el objeto AJAX
var ajax=nuevoAjax();
// Coloco el mensaje "Cargando..." en la capa
capa.innerHTML="Cargando...";
// Abro la conexión, envío cabeceras correspondientes al uso de POST y envío los datos con el método send del objeto AJAX
ajax.open("POST", "ajax2.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("d="+tipoDato);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
// Respuesta recibida. Coloco el texto plano en la capa correspondiente
capa.innerHTML=ajax.responseText;
}
}
}Las Tag van explicando en el codigo pero tambien quisiera explicar alguito:
La Primera Funcion lo que hace es crear un objeto para el navegador ya sea IE u otro
La Segunda Funcion lo que hace es obtiene la respuesta de la capa, crea un objeto ajax y crea un formulario utilizando el metodo POST.
Publique este tuto en ST y pense que tambien aqui ya que me pueden ayudar si hay algun error ya que no manejo el ajax.
Ejemplo: http://dcn.gratishost.com/ajax/index.phpEl Codigo Ajax y los demas codigos fueron sacados de una web la cual no recuerdo Triste
Edit Fuente: http://www.formatoweb.com.ar/ajax/ejemplo_basico_xmlhttprequest_post.phpSe Acepta Karmas (+1)
Saludos, Dacan
