ajax.js// Crea un objeto Ajax para trabajar de forma asíncrona con el servidor
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 inserta_comentario(){
nick=document.getElementById('nick').value;
comentario=document.getElementById('comentario').value;
divResultado = document.getElementById('comentarios');
ajax=objetoAjax();
ajax.open("GET", "comment.php?nick="+nick+"&comentario="+comentario);
// Esta es la imagen de carga que se muestra mientras se ejecuta el php
divResultado.innerHTML = '<center><img src="loading.gif"></center>';
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText
}
}
ajax.send(null)
}
Ejemplo de loading.gif:
$nick=$_GET['nick'];
$comentario=$_GET['comentario'];
// Conexión a la base de datos
$usuario="user";
$password="your_pass";
$host="your_host";
$db="db_name";
$link=mysql_connect($host,$usuario,$password) or die("Error al conectar a la base de datos");
mysql_select_db($db) or die ("Se produjo un error al seleccionar la base de datos");
$sql=mysql_query("INSERT INTO comments (nick, comentario) VALUES ('$nick', '$comentario')");
echo "<strong>$nick</strong><hr />";
echo $comentario;
index.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<input type="text" id="nick" name="nick"><br />
<input type="text" id="comentario" name="comentario"><br /><br />
<input type="button" onclick="inserta_comentario();">
<div id="comentarios" style="background-color: #D5DFE6; width: 500px;"></div>
</body>
<html>
</script>
Esto es un ejemplo súper resumido de lo que sería una consulta
AJAX. El mismo efecto se puede conseguir de otras formas, pero he intentado hacerlo lo más sencillo posible y sin framework puesto que veo que siempre trabajas en puro javascript. Con un framework como jquery te ahorras tener que declarar el objeto ajax porque ya lo posee el framework y además la carga AJAX se realiza en una sola línea. Obviamente las variables pasadas por GET ni siquiera están siendo filtradas por lo que el código es vulnerable a XSS, pero no he querido liarlo demasiado para que lo comprendas, una vez comprendas como funciona te será sencillo aumentar la seguridad filtrando las variables con funciones php como htmlspecialchars(), stripslashes(), etc.
El ejemplo está hecho de memoria, he pillado algunos trozos de código de alguno de mis proyectos y los he dejado con lo básico pero no he probado el resultado, de todas formas debería funcionar.
Obviamente tendrás que tener una base de datos a la que conectar con una tabla "comentarios" que al menos tenga el campo 'nick' y el campo 'comentario'.
Autor
En línea
,si,es cierto,casi siempre intento trabajar sin usar farmework,amenos que se haga inprescindible nose e suna amnia que tengo,no se si es bueno o malo pero es una mania que tengo en fin nose si a alguien le pasa
