Ayuda por favor en Ajax

B

Buka_azul

Becerro
#1
#1
Hola compañeros del corral,esta vez les pido ayuda, bueno lo k pasa es que quiero empezar a trabajar en ajax pero no se como, alo que voy es que, con que debo de contar primeo para comenzar a trabajar en ajax, si debo de tener algun tipo de complento previo para que este funcione, tomen en cuenta que voy a trbajar en linux distro ubuntu,con servidor web apache. Espero que alguien me explique estaria agredecido
 
A

AlxRex

Bovino maduro
#2
#2
Para ajax debes tener conocimiento
HTTP, GET, POST, algo de javascript, y todo el html basico, css basico

Utiliza un framework que se llama jquery. es muy sencillo hacer un ajax y asignarlo a un div o a cualquier elemento.
 
D

dramms

Bovino adolescente
#3
#3
Un ejemplo sencillito de login para AJAX...
admin.css
PHP: 
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.buttondiv {
margin-top: 10px;
}
.messagebox{
 position:absolute;
 width:100px;
 margin-left:30px;
 border:1px solid #c93;
 background:#ffc;
 padding:3px;
}
.messageboxok{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #349534;
 background:#C9FFCA;
 padding:3px;
 font-weight:bold;
 color:#008000;
 
}
.messageboxerror{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #CC0000;
 background:#F7CBCA;
 padding:3px;
 font-weight:bold;
 color:#CC0000;
}
admin.php:
PHP: 
<?php echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="admin.css" />
<script src="jquery.js" type="text/javascript" language="javascript"></script>
 <title>Administracion de Autobuses Tlapacoyan</title>
<script language="javascript">
$(document).ready(function()
{
 $("#login_form").submit(function()
 {
  //remueve las classes del fading del form
  $("#msgbox").removeClass().addClass('messagebox').text('Validando....').fadeIn(1000);
  //Checa si existe o no el usuario, via ajax
  $.post("login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {
    if(data=='yes') //si el login es correcto..
    {
     $("#msgbox").fadeTo(200,0.1,function()  //inicia la caja de mensajes
   { 
     //añade la clase para poner el mensaje..
     $(this).html('Iniciando Sesion.....').addClass('messageboxok').fadeTo(900,1,
              function()
     { 
       //redirige a una pagina en la que puede hacer cositas...
     document.location='paginaAdministrativa.php';
     });
 
   });
    }
    else 
    {
     $("#msgbox").fadeTo(200,0.1,function()
   { 
     //add message and change the class of the box and start fading
     $(this).html('Verifica los detalles del inicio de sesion...').addClass('messageboxerror').fadeTo(900,1);
   });  
          }
 
        });
   return false; //no envio el form fisicamente
 });
 //llamamos la funcion ajax cuando password pierde el enfoque.. para el submit
 $("#password").blur(function()
 {
  $("#login_form").trigger('submit');
 });
});
</script>
</head>
<body>
<div id="loginForm">
 <form method="post" action="" id="login_form">
  <div align="center">
   <div>
    Usuario: <input name="username" type="text" id="username" value="" maxlength="20" />
   </div>
   <div style="margin-top:5px" >
    Clave:
    &nbsp;&nbsp;
    <input name="password" type="password" id="password" value="" maxlength="20" />
   </div>
   <div class="buttondiv">
    <input name="Submit" type="submit" id="submit" value="Login" style="margin-left:-10px; height:23px"  /> 
    <span id="msgbox" style="display:none"></span>
   </div>
  </div>
</form>
</div>
</body>
</html>
db.php:
PHP: 
<?php
//creamos la conexion a la basse de datos
mysql_connect("localhost", "usuario", "password") or die(mysql_error());
mysql_select_db("basedatos") or die(mysql_error());
?>
Login.php:
PHP: 
<?php 
session_start();
include("db.php");
$user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES);
$pass=md5($_POST['password']);
//validamos si existe el nombre.. y el pass
$sql="SELECT username, password FROM usuarios WHERE username='".$user_name."'";
$result=mysql_query($sql);
$row=mysql_fetch_array($result);
//si el nombre existe..
if(mysql_num_rows($result)>0)
{
 //comparamos el password
 if(strcmp($row['password'],$pass)==0)
 {
  echo "yes";
  //cargamos la session..
  $_SESSION['uname']=$user_name; 
 }
 else
  echo "no"; 
}
else
 echo "no"; //login invalido..
?>
Saludos espero te sirva... :D
 
T

tonirilix

Becerro
#6
#6
exacto. Ajax se podría decir que no es una nueva tecnología, es decir, no es ningun lenguaje de programacion nuevo. Lo que si es nuevo es la forma de usar los diferentes estandares existentes.
Como bien mencionan, mas que aprender ajax, deberías tenes conocimientos previos de css, javascript, php y xhtml, para poder implementar ajax... aka te dejo una pagina, donde podrás aprender tanto de ajax como de los estandares que te mencionamos del consorcio w3c.... la pagina es http://www.w3schools.com/ está en ingles pero es de mucha ayuda. especificamente ajax esta en esta seccion http://www.w3schools.com/ajax/default.asp

saludos
 
Debes iniciar sesión o registrarte para responder aquí.
Arriba