Upload
chingacarlos
View
220
Download
0
Embed Size (px)
Citation preview
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)}