-
8/7/2019 AJAX con PHP y formularios
1/3
PHP Y AJAX [Escribir texto] Desarrollo de Software
Ing. Chinga Ramos Carlos Enrique
AJAX con PHP y formularios
Desde que Gmail apareci, ha cambiado la forma de ver la web. Hoy
sabemos que podemoshacer un sitio completo sin la necesidad de
recargar la pgina y slo cargando las partes querequerimos. La
tecnologa usada es el XMLHTTPREQUEST, bautizada recientemente con
elnombre de AJAX. A manera de ejercicio veremos primero cmo cargar
contenido, despus cmointeractuar con php y mandar pequeas porciones
de informacin y finalmente cmo enviar
informacin ms grande.
Creando el objeto XMLHTTPREQUEST
Hacer una funcin genrica es la mejor idea para este modelo. A
base de try y catch podemoshacer una funcin 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 funcin 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()}
-
8/7/2019 AJAX con PHP y formularios
2/3
PHP Y AJAX [Escribir texto] Desarrollo de Software
Ing. Chinga Ramos Carlos Enrique
Hay varias cosas qu checar aqu, primero obtenemos el elemento
que tenga como id'contenedor', despus creamos un nuevo objeto ajax,
luego es cargar el archivo html por elmtodo 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 nosimporta. Finalente el mtodo send es realizar la
accin y llamar la funcin en el window.onload.Veamos el
ejemplo.Sencillo, no?
Segundo ejemplo; Envo de datos por el mtodo GET
Lo siguiente es enviar pequeas cantidades de datos, por ejemplo
de un input text con lmite a255 caracteres, esto lo haremos por el
mtodo GET. Utilizaremos tambin la funcin crearAjax ymodificaremos
un poco cargarContenido.
La idea es meter un formulario, saber los valores de los input
que incluye el formulario yenviarla a php. El cdigo modificado de
cargarContenido sera:
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 slo contiene este cdigo:
Ahora s, veamos el ejemplo.
Tercer ejemplo; Envo de datos por el mtodo POST
Por ltimo y para terminar, enviar datos por el mtodo post. Habr
que cambiar algunas cosas enla funcin cargarContenido:Debemos
agregar una lnea adicional: setRequestHeader especifica qu tipo de
datos llegarn alservidor. Asmismo especificamos el mtodo en el
mtodo open y ahora s utilizaremos
parmetros para send.
-
8/7/2019 AJAX con PHP y formularios
3/3
PHP Y AJAX [Escribir texto] Desarrollo de Software
Ing. Chinga Ramos Carlos Enrique
La funcin quedara 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)}
