Es cierto lo que ambos te han respondido, yo he estado haciendo eso últimamente, y por conocerlo, se que nadie te va a regalar el código completo de lo que necesitas, pero si de algo te sirve, lo mejor que puedes hacer, es relajarte, respirar profundo y prepararte mental y sicológicamente para estudiarte un manual rápido de AJAX, generalmente vienen en ingles con casi todo explicado, como en:
http://www.w3schools.com/ajax/default.asp
Y a medida que vas necesitando algo lo vas consultando, ya sea referencias sobre funciones, métodos, propiedades, objetos u otras cosas de javascript, DOM o BOM.
O si quieres aún mejor, te preparas unas 5 o 6 horas para estudiar un manual en español, donde se explica todo, como en:
http://www.librosweb.es/
Ya que al estar en español, está más entendible, pero explican más cosas y está un poco más largo, y sobre ajax es el que más me ha servido hasta el momento.
Otra recomendación es que te estudies el objeto XMLHttpRequest, que es una de las partes importantes del núcleo de ajax.
Te lo digo por experiencia de mis ultimas semanas estudiando ajax, es mejor que aprendas, por que por más que te ayuden, siempre va a haber algo único o propio de tus scripts que solo tu puedes entender y solo tu vas a poder programar.
Básicamente un código para que un formulario no recargue la página completa, sería algo como lo siguiente:
Código HTML:
Ver original<script type="text/javascript"> function enviarDatos(){
var formulario = document.getElementById('formulario');
var datos = new FormData(formulario);
//con esto se crea una variable que guarda los datos
// en el formato necesario para enviarlos por medio de la peticion xml
xhr(datos);
//se llama la función y listo
}
function xhr(datos){ //funcion para crear las peticiones de XMLHttpResquest
// Generalmente sacada de páginas que usan un método para IE6 o anteriores,
// IE 7, FF, Opera, Google Chrome, u otros.
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = procesarRespuesta; //Ojo sin parentesis
xmlhttp.open("POST", "paginaConScript.php", true);
//Siempre dejar true para que la peticion se asíncrona
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//Esto debe ir siempre con el método post
xmlhttp.send(datos);
//Datos que son una cadena o array con forma de pares dato=valor,
//hay varias formas, adelante te dejo la manera de utilizarlo propuesta en MDN
}
function procesarRespuesta(){
if(xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
alert(xmlhttp.responseText);
//aqui es donde esta el chiste, de lo que se tiene que hacer con la
//respuesta del servidor, como mostrarlo en un div mediante
//document.getElementById, o con un alert o abrir una ventana emergente,
//método poco recomendado por que algunos usuarios pueden tener la opcion de
//ventanas emergentes bloqueadas
}
}
}
<!-- onsubmit="return false;" para que no se recargue la página-->
<form name="formulario" id="formulario" action="" onsubmit="return false;"> <input type="text" name="dato" id="dato" /><br /> <input type="submit" name="accion" value="Enviar" onclick="enviarDatos();" />
obviamente este código es un ejemplo y puede tener muchas mejoras o variables dependiendo de lo que necesites, y es mejor que estudies bn como hacerlo, como manipular los eventos y como asignarles handlers(manipuladores) a los atributos que se modifican con la ejecucion de un evento como onload, onclick, onsubmit, onreadystatechange, y que aparte de todo te estudies bn el objeto xmlhttprequest como te dije antes.
Te dejo la página de mozilla donde explican como utilizar el FormData (en ingles):
https://developer.mozilla.org/En/Using_XMLHttpRequest#Using_FormData_objects