Scribd
Cargar
86 vistas4 páginas

Introducción A AJAX Con PHP y Formularios

Este documento introduce el uso de AJAX con PHP y formularios. Explica cómo crear un objeto XMLHttpRequest de forma compatible entre navegadores y cómo cargar contenido externo, enviar datos pequeños a través del método GET y enviar datos más grandes a través del método POST usando AJAX y PHP. Finalmente, proporciona algunas notas adicionales sobre el uso de este objeto y el envío de datos con caracteres especiales.

Cargado por

tgefra
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
86 vistas4 páginas

Introducción A AJAX Con PHP y Formularios

Este documento introduce el uso de AJAX con PHP y formularios. Explica cómo crear un objeto XMLHttpRequest de forma compatible entre navegadores y cómo cargar contenido externo, enviar datos pequeños a través del método GET y enviar datos más grandes a través del método POST usando AJAX y PHP. Finalmente, proporciona algunas notas adicionales sobre el uso de este objeto y el envío de datos con caracteres especiales.

Cargado por

tgefra
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Introducción a AJAX con PHP y formularios

Por: fael
31 de Marzo del 2006
CSS y Javascript
2601 de clabLevel
Otros artículos de fael
214,178 visitas
php ajax

Desde que Gmail apareció, ha cambiado la forma de ver la web. Hoy sabemos que
podemos hacer un sitio completo sin la necesidad de recargar la página y sólo cargando las partes que
requerimos. La tecnología usada es el XMLHTTPREQUEST, bautizada recientemente con el nombre de
AJAX. A manera de ejercicio veremos primero cómo cargar contenido, después cómo interactuar con
php y mandar pequeñas porciones de información y finalmente cómo enviar información más grande.

Creando el objeto XMLHTTPREQUEST


Hacer una función genérica es la mejor idea para este modelo. A base de try y catch podemos hacer una
función cross-browser:

function nuevoAjax(){
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;
}

Primer ejemplo; Cargar datos externos.

 La función de cargar contenido la definiremos de la siguiente forma:


function cargarContenido(){
var contenedor;
contenedor = document.getElementById('contenedor');
ajax=nuevoAjax();
ajax.open("GET", "ejemploajax1.html",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.send(null)
}
window.onload= function(){cargarContenido()}

Hay varias cosas qué checar aquí, primero obtenemos el elemento que tenga como id 'contenedor',
después creamos un nuevo objeto ajax, luego es cargar el archivo html por el método GET y lo
importante aquí es qué hacer cuando se cargue, esto es onreadystatechange. Readystate 4 significa que
ya acabó de cargarlo, 1, 2 y 3 es el progreso y realmente no nos importa. Finalente el método send es
realizar la acción y llamar la función en el window.onload. Veamos el ejemplo.
Sencillo, no?

Segundo ejemplo; Envío de datos por el método GET

Lo siguiente es enviar pequeñas cantidades de datos, por ejemplo de un input text con límite a 255
caracteres, esto lo haremos por el método GET. Utilizaremos también la función crearAjax y
modificaremos un poco cargarContenido.

La idea es meter un formulario, saber los valores de los input que incluye el formulario y enviarla a php.
El código modificado de cargarContenido sería:

function cargarContenido(){
var t1, t2, contenedor;
contenedor = document.getElementById('contenedor');
t1 = document.getElementById('texto1').value;
t2 = document.getElementById('texto2').value;
ajax=nuevoAjax();
ajax.open("GET", "ejemploajax2.php?t1="+t1+"&t2="+t2,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.send(null)
}

El archivo php sólo contiene este código:

<?
echo "Datos en GET: <pre>";
print_r($_GET);
echo "</pre>";

echo "Datos en POST: <pre>";


print_r($_POST);
echo "</pre>";
?>

Ahora sí, veamos el ejemplo.

Tercer ejemplo; Envío de datos por el método POST

Por último y para terminar, enviar datos por el método post. Habrá que cambiar algunas cosas en la
función cargarContenido:
Debemos agregar una línea adicional: setRequestHeader especifica qué tipo de datos llegarán al
servidor. Asímismo especificamos el método en el método open y ahora sí utilizaremos parámetros para
send.

La función quedaría de la siguiente manera:

function cargarContenido(){
var t1, t2, contenedor;
contenedor = document.getElementById('contenedor');
t1 = document.getElementById('texto1').value;
t2 = document.getElementById('texto2').value;
ajax=nuevoAjax();
ajax.open("POST", "ejemploajax2.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
ajax.send("t1="+t1+"&t2="+t2)
}

Usaremos el mismo php, veamos el ejemplo funcionando.

Notas adicionales
 Por algún extraño motivo, el objeto que es usado una vez ya no se puede usar otra vez. Por eso
en la función cargarContenido siempre se llama a la función para crear un nuevo objeto ajax. Si
no entienden de qué hablo, creen el objeto fuera de la función y verán cómo sólo funciona una
vez
 Enviar y recibir datos con acentos/símbolos extraños es un dolor de cabeza. Básicamente, en
php es la utilización de utf8_decode cuando se reciben y de utf8_encode cuando se envían.

Espero les haya ilustrado este tutorial, si tienen dudas o algo, no duden preguntar en los foros.

Información adicional
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Artículos Relacionados

 Lector de feeds RSS en AJAX


 Enviar datos por POST y GET en AJAX en una función
 AJAX en jQuery

Cristalab | Artículos | Foros | Comics | Tutoriales | Tutoriales de Flash | Ejemplos | Anime | Tips | FAQ
| Colaborar

También podría gustarte