Ajax

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manual Ajax práctico Taller Ajax

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Pablo Lecce Damián Suárez Andrés Fernández
Programador autodidacta http://www.rhosting.com.ar (3 capítulos) Impulsor de XiFOX.net http://www.cabezaderaton.com.ar (1 capítulo)http://www.disegnocentell.com.ar (1 capítulo)

Manual Ajax práctico – Taller Ajax: www.desarrolloweb.com/manuales/taller-ajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

1

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Enviar mediante POST y GET usando una sola funcion AJAX
En este tutorial te contamos como crear unasola funcion que te permita pasar variables mediante GET y POST entre dos páginas web usando AJAX . Esto aligerará mucho el peso de tus archivos javascript y de tus páginas ya que usarás una funcion para todo y no una para cada variable o conjunto de variables que desees pasar. ANTES DE EMPEZAR Este tutorial esta hecho para personas que saben cómo crear objetos AJAX, escribir funciones y pasarlasmediante AJAX por POST o GET. Tambien que tienen conocimientos sobre PHP y javascript. Si no es tu caso, por favor profundiza en dichos aspectos a fin de entenderlo. EL CODIGO Primero copio aqui el codigo completo, y luego pasaré a analizarlo.
function objetus(file) { xmlhttp=false; this.AjaxFailedAlert = "Su navegador no soporta las funcionalidades de este sitio y podria experimentarlo deforma diferente a la que fue pensada. Por favor habilite javascript en su navegador para verlo normalmente.\n"; this.requestFile = file; this.encodeURIString = true; this.execute = false; if (window.XMLHttpRequest) { this.xmlhttp = new XMLHttpRequest(); if (this.xmlhttp.overrideMimeType) { this.xmlhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE try { this.xmlhttp = newActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try { this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { this.xmlhttp = null;

Manual Ajax práctico – Taller Ajax: www.desarrolloweb.com/manuales/taller-ajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

2

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

} } if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') { this.xmlhttp = new XMLHttpRequest(); if (!this.xmlhttp){ this.failed = true; } } } return this.xmlhttp ; } function recibeid(_pagina,valorget,valorpost,capa){ ajax=objetus(_pagina); if(valorpost!=""){ ajax.open("POST", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true); } else { ajax.open("GET",_pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true); } ajax.onreadystatechange=function() { if (ajax.readyState==1){ document.getElementById(capa).innerHTML = " Aguarde por favor..."; } if (ajax.readyState==4) { if(ajax.status==200) {document.getElementById(capa).innerHTML = ajax.responseText;} else if(ajax.status==404) { capa.innerHTML = "La direccion no existe"; } else { capa.innerHTML = "Error: ".ajax.status;Manual Ajax práctico – Taller Ajax: www.desarrolloweb.com/manuales/taller-ajax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

3

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

} } } if(valorpost!=""){ ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send(valorpost); } else {ajax.send(null); } }

Artículo por Pablo Lecce

Pasar valores por GET o POST mediante AJAX - Explicando el código
El codigo tiene dos funciones. La primera es la función que carga el objeto AJAX propiamente dicho. Si bien es compleja, su explicacion no es objeto de este tutorial, y podes usar cualquier funcion para la carga del objeto xhttprequest que vengas usando previamente. La funcion...