readyState == 4 - AJAX mi problema es el siguiente:
estoy aprendiendo Ajax y todo hiba bien hasta que me toque con el envio de datos con Ajax via POST, lo que hago es lo siguiente:
Envio los datos con ajax a un archivo PHP ("proc.php") que me crea un fichero de texto ("com.txt") con los datos que ingresa el usuario en el formulario ("index.php"), el fichero se crea bien con los datos que se le pide que ponga pero el readyState no llega al estado 4 y aun asi el fichero se ha creado, y como el readyState no llega a 4 el div de respuesta no me muestra el mensaje que deberia mostrar al acabar de realizar la accion...
aqui les dejo los archivos que he usado, el "func.js" es el k contiene las funciones ajax.
index.php:
Código HTML:
<html> <head> <title>AJAX</title> <link rel="stylesheet" href="styles.css" /> <script language="javascript" type="text/javascript" src="func.js"></script> </head> <body> <form action="proc.php" method="post" id="form"> Nombre: <input type="text" name="name" id="name" size="20" /> <br /> Comentarios: <textarea name="coments" id="coments" rows="5" cols="20"></textarea> <br /> <input type="submit" id="sub" value="Enviar" /> <div id="res"></div> <a href="com.txt">Ver comentarios</a> </form> </body> </html>
Código PHP:
addEvent(window, "load", init, false); //esta funcion esta creada en la ultima parte del arhchivo para comprobar el navegador. Es como attachEvent o addEventListener
function init() {//funcion k se ejecuta al inicio
var f = document.getElementById("form"); //selecciono el formulario del index
addEvent(f, "submit", submitd, false); // le añado un evento para cuando se envie el formulario
}
function submitd(e) { //esta funcion es para detener el envio del formulario para procesarlo con ajax, dependiendo que navegador sea
if(window.event) {
window.event.returnValue = false;
}
else if(e) {
e.preventDefault();
}
submit(); // ejecuto la funcion para el envio con ajax
}
function data() { // esta funcion la uso para ordenar los datos k le voy a enviar a mi archivo php
var cad = "";
var n = document.getElementById("name").value; //selecciono el input name del index
var c = document.getElementById("coments").value; // selecciono el input coments del index
cad = "n="+encodeURIComponent(n)+"&c="+encodeURIComponent(c); // aqui ordeno los dos valores
return cad; // retorno la cadena
}
var http;
function submit() { // esta es la funcion encargada del envio POST al archivo "proc.php"
http = xhr(); // instancio el objeto XMLHTTPREQUEST
http.onreadystatechange = process; // ejecuto la funcion process() que esta creada mas abajo
http.open("POST", "proc.php", true); // aqui preparo el envio
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // envio los datos como un tipo form
http.send(data()); // envio los datos k estan ordenados en la funcion de arriba data()
}
function process() { // esta funcion no me muestra el gracias porque nunca llega al readyState = 4
var r = document.getElementById("res"); // este es el div para mostrar el resultado
if(http.redyState == 4) {
r.innerHTML = "Gracias.";
}
else {
r.innerHTML = "Procesando...";
}
}
function xhr() { // para crear el XMLHTTPREQUEST
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
//Esta funcion es para crear eventos segun el navegador =D
function addEvent(e, ev, f, b) {if(e.attachEvent) {e.attachEvent("on"+ev,f);return true;} else if(e.addEventListener) {e.addEventListener(ev, f, b);return true;} else {return false;}}
Código PHP:
<?php
header("Content-Type: text/html; charset=ISO-8859-1");
$o = fopen("com.txt", "a") or die("No se pudo abrir el archivo.");
fputs($o, "Nombre: ".$_POST["n"]."\n");
fputs($o, "Comentarios: ".$_POST["c"]."\n\n");
fclose($o);
?> Gracias...
