Professional Documents
Culture Documents
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.
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;
}
}
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()}
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>";
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.
Ing. Chinga Ramos Carlos Enrique
PHP Y AJAX [Escribir texto] Desarrollo de Software
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)
}