Autor Tema: [Ayuda] ¿Cómo enviar todos los parametros por Ajax?  (Leído 4026 veces)

Desconectado ferdi342

  • PHPero Experto
  • *****
  • Mensajes: 734
  • Karma: 8
  • Sexo: Masculino
  • Gúgol
    • Ver Perfil
    • Google - La solución a todo
[Ayuda] ¿Cómo enviar todos los parametros por Ajax?
« en: 26 de Septiembre de 2011, 20:17:39 pm »
Hola, quiero procesar todo un formulario vía Ajax, hasta ahora lo que hacía era que al instante comprobaba si el valor introducido era correcto o no, usaba onkeydown y utilizaba este método:

Código: [Seleccionar]
function comprobar(url, objeto) {
var parametros = objeto.id + "=" + objeto.value;
// crea un objeto XMLHttpRequest
var miObj = null;
if (window.XMLHttpRequest) {
// Gestión de Ajax con Mozilla Firefox y otros navegadores
miObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Gestión de Ajax con Internet Explorer
miObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// El objeto XMLHttpRequest no se puede gestionar en este navegador
alert("El navegador no admite el uso de Ajax");
return;
}
miObj.open("POST", url, true);
miObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
miObj.setRequestHeader("Content-length", parametros.length);
miObj.setRequestHeader("Connection", "close");
miObj.send(parametros);
// Gestión de una llamada asincrónica que NO bloquea la ejecución hasta que se recibe la respuesta
miObj.onreadystatechange = function() {
if (miObj.readyState < 4 && miObj.status == 200) {
document.getElementById("respuesta_usuario").innerHTML = '<img src="images/register/preloader.gif" width="16" height="16" />Validando...';
}
if (miObj.readyState == 4 && miObj.status == 200) {
// Asignación de datos a un elemento en pantalla
if(miObj.responseText=="Usuario Disponible"){
document.write("Todo ok");
}
else {
document.write("Algo mal");
}
}
}
}

Pero como se puede observar, este código sólo envia un parámetro. Bien he estado probando como podría mandar todos los parámetros de una vez y me ha salido esto:

Código: [Seleccionar]
function comprobar() {
name = document.getElementById("name");
email = document.getElementById("email");
motivo = document.getElementById("motivo");
comentario = document.getElementById("comentario");
parametros_name = name.id + "=" + name.value;
parametros_email = email.id + "=" + email.value;
parametros_motivo = motivo.id + "=" + motivo.value;
parametros_comentario = comentario.id + "=" + comentario.value;
// crea un objeto XMLHttpRequest
var miObj = null;
if (window.XMLHttpRequest) {
// Gestión de Ajax con Mozilla Firefox y otros navegadores
miObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Gestión de Ajax con Internet Explorer
miObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// El objeto XMLHttpRequest no se puede gestionar en este navegador
alert("El navegador no admite el uso de Ajax");
return;
}
miObj.open("POST", "comprobar.php", true);
miObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
miObj.setRequestHeader("Content-length", parametros_name.length);
miObj.setRequestHeader("Content-length", parametros_email.length);
miObj.setRequestHeader("Content-length", parametros_motivo.length);
miObj.setRequestHeader("Content-length", parametros_comentario.length);
miObj.setRequestHeader("Connection", "close");
miObj.send(parametros_name);
miObj.send(parametros_email);
miObj.send(parametros_motivo);
miObj.send(parametros_comentario);
// Gestión de una llamada asincrónica que NO bloquea la ejecución hasta que se recibe la respuesta
miObj.onreadystatechange = function() {
if (miObj.readyState == 4 && miObj.status == 200) {
// Asignación de datos a un elemento en pantalla
if(miObj.responseText=="todok"){
document.getElementById("contacto").style.visibility = "visible";
}
else {
document.getElementById("respuesta_usuario").className = "texto_nok";
document.getElementById("respuesta_usuario").innerHTML = miObj.responseText;
}
}
}
}

El onclick esta vez lo ponía en el botón de enviar, y he echo varios alerts haber si recoge los datos y los recoge como [ObjectHTMLInputElement], y la verdad no se porqué. ¿Cómo a partir del código que recoge un valor podría enviar todo el formulario a la vez?

Gracias  :-[
A veces hay que dejar terminar cosas buenas para que empiecen mejores, How I Met Your Mother

Comunidad PHPeros

[Ayuda] ¿Cómo enviar todos los parametros por Ajax?
« en: 26 de Septiembre de 2011, 20:17:39 pm »

Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:[Ayuda] ¿Cómo enviar todos los parametros por Ajax?
« Respuesta #1 en: 28 de Septiembre de 2011, 18:31:19 pm »
Hola, quiero procesar todo un formulario vía Ajax, hasta ahora lo que hacía era que al instante comprobaba si el valor introducido era correcto o no, usaba onkeydown y utilizaba este método:

Código: [Seleccionar]
function comprobar(url, objeto) {
var parametros = objeto.id + "=" + objeto.value;
// crea un objeto XMLHttpRequest
var miObj = null;
if (window.XMLHttpRequest) {
// Gestión de Ajax con Mozilla Firefox y otros navegadores
miObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Gestión de Ajax con Internet Explorer
miObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// El objeto XMLHttpRequest no se puede gestionar en este navegador
alert("El navegador no admite el uso de Ajax");
return;
}
miObj.open("POST", url, true);
miObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
miObj.setRequestHeader("Content-length", parametros.length);
miObj.setRequestHeader("Connection", "close");
miObj.send(parametros);
// Gestión de una llamada asincrónica que NO bloquea la ejecución hasta que se recibe la respuesta
miObj.onreadystatechange = function() {
if (miObj.readyState < 4 && miObj.status == 200) {
document.getElementById("respuesta_usuario").innerHTML = '<img src="images/register/preloader.gif" width="16" height="16" />Validando...';
}
if (miObj.readyState == 4 && miObj.status == 200) {
// Asignación de datos a un elemento en pantalla
if(miObj.responseText=="Usuario Disponible"){
document.write("Todo ok");
}
else {
document.write("Algo mal");
}
}
}
}

Pero como se puede observar, este código sólo envia un parámetro. Bien he estado probando como podría mandar todos los parámetros de una vez y me ha salido esto:

Código: [Seleccionar]
function comprobar() {
name = document.getElementById("name");
email = document.getElementById("email");
motivo = document.getElementById("motivo");
comentario = document.getElementById("comentario");
parametros_name = name.id + "=" + name.value;
parametros_email = email.id + "=" + email.value;
parametros_motivo = motivo.id + "=" + motivo.value;
parametros_comentario = comentario.id + "=" + comentario.value;
// crea un objeto XMLHttpRequest
var miObj = null;
if (window.XMLHttpRequest) {
// Gestión de Ajax con Mozilla Firefox y otros navegadores
miObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Gestión de Ajax con Internet Explorer
miObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// El objeto XMLHttpRequest no se puede gestionar en este navegador
alert("El navegador no admite el uso de Ajax");
return;
}
miObj.open("POST", "comprobar.php", true);
miObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
miObj.setRequestHeader("Content-length", parametros_name.length);
miObj.setRequestHeader("Content-length", parametros_email.length);
miObj.setRequestHeader("Content-length", parametros_motivo.length);
miObj.setRequestHeader("Content-length", parametros_comentario.length);
miObj.setRequestHeader("Connection", "close");
miObj.send(parametros_name);
miObj.send(parametros_email);
miObj.send(parametros_motivo);
miObj.send(parametros_comentario);
// Gestión de una llamada asincrónica que NO bloquea la ejecución hasta que se recibe la respuesta
miObj.onreadystatechange = function() {
if (miObj.readyState == 4 && miObj.status == 200) {
// Asignación de datos a un elemento en pantalla
if(miObj.responseText=="todok"){
document.getElementById("contacto").style.visibility = "visible";
}
else {
document.getElementById("respuesta_usuario").className = "texto_nok";
document.getElementById("respuesta_usuario").innerHTML = miObj.responseText;
}
}
}
}

El onclick esta vez lo ponía en el botón de enviar, y he echo varios alerts haber si recoge los datos y los recoge como [ObjectHTMLInputElement], y la verdad no se porqué. ¿Cómo a partir del código que recoge un valor podría enviar todo el formulario a la vez?

Gracias  :-[

1.- No es bueno usar AJAX con onkeydown porque matarías al servidor si tu web llega a ser popular

2.- Usa javascript para comprobar longitud, formato, etc... de los datos. Luego, al enviar los datos del formulario, los compruebas con PHP

3.- Si quieres comprobar valores como por ejemplo la disponibilidad de un nick / email, hazlo con onblur, porque no tiene sentido comprobar letra por letra el dato, porque sería una consulta cada vez que escribes una letra... con eso te hacen un DDoS que no puedes con el

4.- Te recomiendo usar jQuery, porque para solucionar tu problema harías esto:
Código: [Seleccionar]
$.post('url', 'parametro1='+parametro1+'&parametro2=...', function(respuesta){ if(respuesta == 'todok'){ algo; }else{ otro; } })Te ahorrarías todo ese código, además de que te funcionaría sin problemas ;)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:[Ayuda] ¿Cómo enviar todos los parametros por Ajax?
« Respuesta #2 en: 29 de Septiembre de 2011, 03:40:42 am »
Como ya dijeron, es recomendable filtrar todos tus datos tanto del lado del cliente como del servidor (js y php), para así ahorrarle peticiones al servidor y en caso de que algún infiltrado se pase editando tu js, el servidor pueda responder.

Por otro lado, no apoyo mucho la idea de martin de usar jQuery solo en esto, ya que hay que tomar en consideración el peso de la librería. Si llega a ser el caso de que te encuentras utilizando jQuery para alguna otra cosa de tu sitio web, utilízala al máximo la librería cargada.

Aunque yo en mi opinión, jQuery nunca falta en mis paginas y para estos casos siempre utilizo ajax de jQuery.

Saludos.
Twitter: @JoakoM010



Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:[Ayuda] ¿Cómo enviar todos los parametros por Ajax?
« Respuesta #3 en: 29 de Septiembre de 2011, 14:09:07 pm »
Como ya dijeron, es recomendable filtrar todos tus datos tanto del lado del cliente como del servidor (js y php), para así ahorrarle peticiones al servidor y en caso de que algún infiltrado se pase editando tu js, el servidor pueda responder.

Por otro lado, no apoyo mucho la idea de martin de usar jQuery solo en esto, ya que hay que tomar en consideración el peso de la librería. Si llega a ser el caso de que te encuentras utilizando jQuery para alguna otra cosa de tu sitio web, utilízala al máximo la librería cargada.

Aunque yo en mi opinión, jQuery nunca falta en mis paginas y para estos casos siempre utilizo ajax de jQuery.

Saludos.
Jaja, siento haber dado la impresión de que jQuery es imprescindible, sólo quería decir que te ahorra muchos dolores de cabeza :P