A continuación les dejo un código para actualizar por meio de AJAX, los div e id de nuestras aplicaciones web sin la necesidad de cargar toda la paginá y así evitar lentitud, además de sobrcargarla. El siguiente códico lo podemos copiar entre las etiquetas <head> </head> ó podemos guardarlo en un archivo javascript con extensión ".js".
1 | <script type= "text/javascript" language= "javascript" > |
2 | function refreshDivs(divid,secs,url) |
6 | var divid,secs,url,fetch_unix_timestamp; |
9 | if (divid == "" ){ alert( 'Error: escribe el id del div que quieres refrescar' ); return ;} |
10 | else if (!document.getElementById(divid)){ alert( 'Error: el Div ID selectionado no esta definido: ' +divid); return ;} |
11 | else if (secs == "" ){ alert( 'Error: indica la cantidad de segundos que quieres que el div se refresque' ); return ;} |
12 | else if (url == "" ){ alert( 'Error: la URL del documento que quieres cargar en el div no puede estar vacia.' ); return ;} |
18 | xmlHttp= new XMLHttpRequest(); |
22 | xmlHttp= new ActiveXObject( "Msxml2.XMLHTTP" ); |
26 | xmlHttp= new ActiveXObject( "Microsoft.XMLHTTP" ); |
29 | alert( "Tu explorador no soporta AJAX." ); |
37 | fetch_unix_timestamp = function () |
39 | return parseInt( new Date ().getTime().toString().substring(0, 10)) |
42 | var timestamp = fetch_unix_timestamp(); |
43 | var nocacheurl = url+ "?t=" +timestamp; |
46 | xmlHttp.onreadystatechange= function (){ |
47 | if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ |
48 | document.getElementById(divid).innerHTML=xmlHttp.responseText; |
49 | setTimeout( function (){refreshDivs(divid,secs,url);},secs*1000); |
52 | xmlHttp.open( "GET" ,nocacheurl,true); |
57 | window.onload = function startrefresh(){ |
58 | refreshDivs( 'div1' ,5, 'div1.php' ); |
59 | refreshDivs( 'div2' ,3, 'div2.php' ); |
60 | refreshDivs( 'div3' ,10, 'div3.php' ); |
La parte del código donde indicamos que divs hay que refrescar es la siguiente:
1 | window.onload = function startrefresh(){ |
2 | refreshDivs( 'div1' ,5, 'div1.php' ); |
3 | refreshDivs( 'div2' ,3, 'div2.php' ); |
4 | refreshDivs( 'div3' ,10, 'div3.php' ); |
No hay comentarios:
Publicar un comentario