Blog Tuarroba

..: Acerca de

Blog oficial de Tuarroba. Miles de noticias, artículos y noticias sobre informática, webmasters, miarroba y la propia tuarroba.

FeedBurner RSS
Technorati Profile
Blogcindario

..: Buscador


..: Participantes
  EffectedCard
  FORZALAZIO15
  angelismo
  Niyaz
  Darth_Carl
  infinito23
  paitu

..: Últimos Comentarios
  Mario, Cargar paginas con Ajax

  Jose Antonio, Hacer tu windows legal

  Denise, Furor por mascotas virtuales.

  aguchito, ¡8 AÑOS YA!, ¡Como pasa el tiempo!

  Invitado, Como agregar feeds en tu web

  Camisadefuerza, Solucion para descargar de Megaupload

  Invitado, Solucion para descargar de Megaupload

  Invitado, Como agregar feeds en tu web

  Invitado, Video tutoriales curso de hacker en español

  Invitado, Video tutoriales curso de hacker en español


..: Categorias
  Tuarroba
  Miarroba
  Webmasters
  Internet
  Informatica
  Videojuegos
  Tutoriales
  Recursos
  Scripts
  Telefonia
  Curiosidades
  Actualidad
  Deportes
  Otros


..: Calendario

..: Agregador RSS
  
  
  
  
  
  

..: Afiliados y Enlaces
  Tuarroba
  Skindario
  Tu@Games
  Tu@Ebooks
  Foro Redemption Day
  Blog Redemption Day
  Niyaz Web

..: Sindicacion
  RSS 0.91
  RSS 1.0
  RSS 2.0
  ATOM 1.0

domingo, 22 de octubre de 2006

..: Cargar paginas con Ajax
Una de las cosas que llevo tiempo queriendo hacer, es aprender AJAX. Hoy, me he puesto a investigar una función muy básica. Cargar páginas.

Para que os hagáis una idea, es como la función include de php, sólo que nos permite además, con el código apropiado, podemos cambiar una pagina cargada con un simple click.

El código es un poco largo, pero es muy sencillo de utilizar. Lo primero que necesitamos son las funciones en javascript.

AumentarMaximizarDisminuirMinimizar

<script type="text/javascript">

function sack(file) {
this.xmlhttp = null;

this.resetData = function() {
this.method = "POST";
this.queryStringSeparator = "?";
this.argumentSeparator = "&";
this.URLString = "";
this.encodeURIString = true;
this.execute = false;
this.element = null;
this.elementObj = null;
this.requestFile = file;
this.vars = new Object();
this.responseStatus = new Array(2);
};

this.resetFunctions = function() {
this.onLoading = function() { };
this.onLoaded = function() { };
this.onInteractive = function() { };
this.onCompletion = function() { };
this.onError = function() { };
this.onFail = function() { };
};

this.reset = function() {
this.resetFunctions();
this.resetData();
};

this.createAJAX = function() {
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
this.xmlhttp = null;
}
}

if (! this.xmlhttp) {
if (typeof XMLHttpRequest != "undefined") {
this.xmlhttp = new XMLHttpRequest();
} else {
this.failed = true;
}
}
};

this.setVar = function(name, value){
this.vars[name] = Array(value, false);
};

this.encVar = function(name, value, returnvars) {
if (true == returnvars) {
return Array(encodeURIComponent(name), encodeURIComponent(value));
} else {
this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
}
}

this.processURLString = function(string, encode) {
encoded = encodeURIComponent(this.argumentSeparator);
regexp = new RegExp(this.argumentSeparator + "|" + encoded);
varArray = string.split(regexp);
for (i = 0; i < varArray.length; i++){
urlVars = varArray[i].split("=");
if (true == encode){
this.encVar(urlVars[0], urlVars[1]);
} else {
this.setVar(urlVars[0], urlVars[1]);
}
}
}

this.createURLString = function(urlstring) {
if (this.encodeURIString && this.URLString.length) {
this.processURLString(this.URLString, true);
}

if (urlstring) {
if (this.URLString.length) {
this.URLString += this.argumentSeparator + urlstring;
} else {
this.URLString = urlstring;
}
}

// prevents caching of URLString
this.setVar("rndval", new Date().getTime());

urlstringtemp = new Array();
for (key in this.vars) {
if (false == this.vars[key][1] && true == this.encodeURIString) {
encoded = this.encVar(key, this.vars[key][0], true);
delete this.vars[key];
this.vars[encoded[0]] = Array(encoded[1], true);
key = encoded[0];
}

urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
}
if (urlstring){
this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
} else {
this.URLString += urlstringtemp.join(this.argumentSeparator);
}
}

this.runResponse = function() {
eval(this.response);
}

this.runAJAX = function(urlstring) {
if (this.failed) {
this.onFail();
} else {
this.createURLString(urlstring);
if (this.element) {
this.elementObj = document.getElementById(this.element);
}
if (this.xmlhttp) {
var self = this;
if (this.method == "GET") {
totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
this.xmlhttp.open(this.method, totalurlstring, true);
} else {
this.xmlhttp.open(this.method, this.requestFile, true);
try {
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
} catch (e) { }
}

this.xmlhttp.onreadystatechange = function() {
switch (self.xmlhttp.readyState) {
case 1:
self.onLoading();
break;
case 2:
self.onLoaded();
break;
case 3:
self.onInteractive();
break;
case 4:
self.response = self.xmlhttp.responseText;
self.responseXML = self.xmlhttp.responseXML;
self.responseStatus[0] = self.xmlhttp.status;
self.responseStatus[1] = self.xmlhttp.statusText;

if (self.execute) {
self.runResponse();
}

if (self.elementObj) {
elemNodeName = self.elementObj.nodeName;
elemNodeName.toLowerCase();
if (elemNodeName == "input"
|| elemNodeName == "select"
|| elemNodeName == "option"
|| elemNodeName == "textarea") {
self.elementObj.value = self.response;
} else {
self.elementObj.innerHTML = self.response;
}
}
if (self.responseStatus[0] == "200") {
self.onCompletion();
} else {
self.onError();
}

self.URLString = "";
break;
}
};

this.xmlhttp.send(this.URLString);
}
}
};

this.reset();
this.createAJAX();
}



var enableCache = true;
var jsCache = new Array();

var dynamicContent_ajaxObjects = new Array();

function ajax_showContent(divId,ajaxIndex,url)
{
var targetObj = document.getElementById(divId);
targetObj.innerHTML = dynamicContent_ajaxObjects[ajaxIndex].response;
if(enableCache){
jsCache[url] = dynamicContent_ajaxObjects[ajaxIndex].response;
}
dynamicContent_ajaxObjects[ajaxIndex] = false;

ajax_parseJs(targetObj)
}

function ajax_parseJs(inputObj)
{
var jsTags = inputObj.getElementsByTagName('SCRIPT');
for(var no=0;no<jsTags.length;no++){
eval(jsTags[no].innerHTML);
}
}

function ajax_loadContent(divId,url)
{
if(enableCache && jsCache[url]){
document.getElementById(divId).innerHTML = jsCache[url];
return;
}

var ajaxIndex = dynamicContent_ajaxObjects.length;
document.getElementById(divId).innerHTML = 'Cargando Página - <a href="http://tuarroberos.blogcindario.com" target="_blank">Visita Blog Tuarroba</a>';
dynamicContent_ajaxObjects[ajaxIndex] = new sack();
dynamicContent_ajaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get
dynamicContent_ajaxObjects[ajaxIndex].onCompletion = function(){ ajax_showContent(divId,ajaxIndex,url); }; // Specify function that will be executed after file has been found
dynamicContent_ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function


}
</script>



De ahí lo único que hay que cambiar, es de la función ajax_loadContent(divId,url), el texto de la 'variable' document.getElementById(divId).innerHTML


Para usar la función necesitamos un elemento cualquiera, yo recomiendo usar siempre el tag div, al que debemos asignarle un id, por ejemplo "tuarroba".
Por ejemplo, <div id="tuarroba">Cargando página</div>

Después, crearemos la función para llamar a las páginas. Hay muchas maneras, los que sepáis javascript podréis usarla de mil formas, yo voy a usar dos.

Una opción es cargar la página al final, para ello, insertamos antes del </body>

<script>
ajax_loadContent('tuarroba','pagina.htm');
</script>

'tuarroba' es el nombre de la capa.
'pagina.htm' es el nombre del fichero que se cargará.


Para cargar otro fichero en esa misma capa pulsando un enlace, usaríamos:

<a href="javascript:ajax_loadContent('tuarroba','fichero2.htm');">Carga otro fichero</a>



Yo he aprendido un poco de ajax con esto, espero que vosotros también. Podéis comentar cosas sobre este minitutorial, decir vuestros progresos o preguntar dudas. Aunque para preguntar dudas, mejor Skindario




Comparte:    Compartir via email   Blog Memes   del.icio.us   Digg   MyYahoo!   Fresqui   Furl   Meneame   Neo Diario
Enviado por EffectedCard a las 2:40 | Leer | Comentarios (5)



Volver al indice del blog
..: Comentarios

Invitado
 
Enviado el jueves, 27 de septiembre de 2007 a las 20:25


hola! leyendo tu articulo me parece bueno, sólo que podrías poner un ejemplo de uso del mismo.

Saludos!

 

Invitado
 
Enviado el viernes, 23 de noviembre de 2007 a las 17:41


|Pasmao Compadre... me permito felicitarlo por su artículo, la verdad es que usted mismo no sabe lo importante que fue para mi poder encontrar esta ayuda, la verdad es que la necesitaba mas que nunca... ahora podre continuar con mi proyecto |Pasmao

Divertido Muchas gracias y saludos desde Chile... Divertido

 

ROKA135
 
Enviado el miércoles, 05 de diciembre de 2007 a las 18:02


ME HAS SALVADO LA VIDA Bravo! LLEVABA ATASCADO CON ESTE TEMA UN MONTON DE TIEMPO, HE ESTADO HACIENDO PRUEBAS Y ME FUNCIONA PERFECTAMENTE Divertido

 

Invitado
 
Enviado el miércoles, 04 de junio de 2008 a las 20:26


q

 

Mario
 
Enviado el lunes, 11 de agosto de 2008 a las 9:23


Gracias men eres un crack mas salvadoooo!

 


.:: Escribe tu comentario - Escribir en una nueva ventana
Usuario: No estoy logueado en miarroba (Invitado)
(Invitado)
Estoy logueado en miarroba
Comentario:

 
 

.:: Recomendar articulo
Nick Email
 


By: EffectedCard :: Algunos derechos reservados (©©) Tu@ 2005 :: Fundado 15/02/05