Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: Dacan en 24 de Mayo de 2008, 03:33:23 am
-
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 (http://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.php
El 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.php
Se Acepta Karmas (+1)
Saludos, Dacan ;)
-
buena explicacion pero te iciste un lio en la frase:
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.
jeje
karma+
gracias un saludo
-
albrandariz, no tendrias que haberle dado karma
este es un codigo casi SIN MODIFICAR de formatoweb
http://www.formatoweb.com.ar/ajax/ejemplo_basico_xmlhttprequest_post.php
Salu2
-
no sabia que lo habia sacado ¡¡ENTERO!! e ¡¡INTEGRO!! de ahi.
dacan, cuando publiques un articulo tio, pon todas tus fuentes.
y tope lo siento no sabia de donde lo a sacado.
-
jaja, no es un problema tan grande, pero sque ha modificado algun valor de los inputs y ya esta...
-
No leen:
El Codigo Ajax y los demas codigos fueron sacados de una web la cual no recuerdo
Bueno gracias por la fuente.
Saludos, Dacan :)
-
La verdad esque eso lo has puesto ahora y has modificado la linea de "este codigo lo publique en ST"
pero bueno, gracias por poner la fuente ;)
-
Esta bien pero es mas de avanzado, no ay algun control mas sencillo??
como una calculadora en Ajax?
-
la calculadora la puedes acer en JS, es el ejemplo mas sencillo k hay
-
Gracias pero no encuentro nada....