<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Mostrar Data/ Hora do Servidor ⁄ >




clicks: 17120 17120 2008-02-03 2008-02-03 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This



A finalidade deste snippet será simples, basicamente o que vai ser demonstrado é mostrar a hora actual na página, porém terá a particularidade de ser a hora que consta no servidor e não a hora local do visitante do nosso site, que é facilmente manipulada. Para tal vamos utilizar Ajax. A página "principal" será uma página html normal.

Algum código deste snippet é re-aproveitado de snippets anteriores, tais como Actualizar DropDownList utilizando Ajax e Formatar Data/ Hora

Events.js, este ficheiro será responsável por adicionar ou remover eventos a elementos/ objectos da página, por ex. load da página, quanto um elemento é actualizado, etc, etc.
  1. /**
  2. * Class Events - possui vários métodos/ propriedades estáticos comuns
  3. */
  4. Events = function(){
  5. }
  6.  
  7. /**
  8. * Adicionar Event
  9. *
  10. * Adaptada do seguinte URL
  11. * http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
  12. *
  13. * @param Object
  14. * @param Object
  15. * @param Object
  16. */
  17. Events.AddEvent = function(obj, type, fn){
  18. if(!obj) return;
  19.  
  20. this.RemoveEvent(obj, type, fn);
  21. if (obj.addEventListener) {
  22. obj.addEventListener(type, fn, false);
  23. }
  24. else {
  25. if (obj.attachEvent) {
  26. obj["e" + type + fn] = fn;
  27. obj[type + fn] = function(){
  28. obj["e" + type + fn](window.event);
  29. }
  30. obj.attachEvent("on" + type, obj[type + fn]);
  31. }
  32. }
  33. }
  34. /**
  35. * Remover Event
  36. *
  37. * Adaptada do seguinte URL
  38. * http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
  39. *
  40. * @param Object
  41. * @param Object
  42. * @param Object
  43. */
  44. Events.RemoveEvent = function(obj, type, fn){
  45. if (obj.removeEventListener) {
  46. try{obj.removeEventListener(type, fn, false);} catch(e){}
  47. }
  48. else{
  49. if (obj.detachEvent) {
  50. obj.detachEvent("on" + type, fn);
  51. obj[type + fn] = null;
  52. obj["e" + type + fn] = null;
  53. }
  54. }
  55. }
  56.  



Misc.js, class estática, possui vários métodos de uso comum, como por ex. a criação do HttpRequest
  1. /**
  2. * Class Misc - possui vários métodos/ propriedades estáticos comuns
  3. */
  4. Misc = function(){}
  5.  
  6. // ficheiro que vai responder aos pedidos
  7. Misc.ServerFile = "ajax.php";
  8.  
  9. /**
  10. * Hack IE para ultrapassar problema cache pedidos get
  11. *
  12. * @param String
  13. */
  14. Misc.AntiCacheRand = function(aurl){
  15. var rnd = encodeURI(Math.random());
  16. aurl += (aurl.indexOf("?") >= 0) ? "&foo=" + rnd : "?foo=" + rnd;
  17.  
  18. return aurl;
  19. };
  20.  
  21. /**
  22. * Criar request
  23. */
  24. Misc.CreateHttpRequest = function(){
  25. if (window.XMLHttpRequest) { // Mozilla, Safari,...
  26. http_request = new XMLHttpRequest();
  27.  
  28. if (http_request.overrideMimeType) {
  29. http_request.overrideMimeType('text/html');
  30. }
  31. }
  32. else
  33. if (window.ActiveXObject) { // IE
  34. try {
  35. http_request = new ActiveXObject("Msxml2.XMLHTTP");
  36. }
  37. catch (e) {
  38. try {
  39. http_request = new ActiveXObject("Microsoft.XMLHTTP");
  40. }
  41. catch (e) {
  42. }
  43. }
  44. }
  45.  
  46. if (!http_request) {
  47. alert('Giving up :( Cannot create an XMLHTTP instance');
  48. return false;
  49. }
  50.  
  51. return http_request;
  52. };
  53.  
  54. /**
  55. * Cria um Timer.
  56. * Terá como finalidade executar uma determinada função
  57. * de X em X segundos
  58. *
  59. * @param Object Função a executar
  60. * @param Int Intervalo temporário (em segundos)
  61. */
  62. Misc.Timer = function(func,interval_seconds){
  63. setInterval(func,interval_seconds*1000);
  64. };
  65.  
  66.  
  67. /**
  68. * Obter a referência para um elemento
  69. *
  70. * @param String
  71. */
  72. $ = function(element){return document.getElementById(element);};
  73.  
  74. //fim class Misc



Ajax.js, a class responsável para que o processo de actualização seja executado, vai fazer uma chamada ao servidor e vai processar a sua resposta, chamando os métodos necessários para tal. Recebe a resposta e vai escrevê-la no respectivo objecto html, no nosso caso será um span.
  1. /**
  2. * Class Ajax
  3. */
  4. Ajax = function(){};
  5.  
  6. /**
  7. * Actualizar Tempo
  8. *
  9. * @param Object Onde vai ser impresso o resultado
  10. * @param String Formatação da hora
  11. */
  12. Ajax.UpdateTime = function(id_span,time_format){
  13. var url = Misc.AntiCacheRand(Misc.ServerFile + "?time_format=" + time_format);
  14.  
  15. var http_request = Misc.CreateHttpRequest();
  16.  
  17. http_request.onreadystatechange = function(){
  18. var state = http_request.readyState;
  19.  
  20. //pedido completo e respondido com sucesso
  21. if (state == 4 && http_request.status == 200) {
  22. $(id_span).innerHTML=http_request.responseText; //escrever resultado
  23. }
  24. }
  25.  
  26. http_request.open("GET", url, true);
  27. http_request.send(null);
  28. }



ajax.php, vai receber o pedido, processá-lo e devolver uma resposta
  1. <?php
  2. include_once("class.MyServerTime.php");
  3.  
  4. $my_server_time=new MyServerTime($_GET["time_format"]);
  5. echo $my_server_time->GetDate();
  6. ?>








class.MyServerTime.php, esta class vai devolver a data mediante o formato pretendido.
  1. <?php
  2.  
  3. class MyServerTime{
  4. private $_format; //formatação DateTime
  5.  
  6. /**
  7. * Método construtor
  8. *
  9. * @param String $format
  10. */
  11. public function __construct($format){$this->Format($format);}
  12.  
  13. /**
  14. * Getter/ Setter TimeFormat
  15. *
  16. * @param String $value
  17. * @return String
  18. */
  19. public function Format($value=""){
  20. if($value){$this->_format=$value;}
  21. else{return $this->_format;}
  22. }
  23.  
  24. /**
  25. * Obter Data formatada
  26. *
  27. * @return DateTime
  28. */
  29. function GetDate(){return gmdate($this->Format());}
  30.  
  31. }
  32. ?>



Init.js, o nome esclarece a finalidade deste ficheiro, será o responsável pela inicialização de todo o processo. Vai adicionar o evento load à página, para que a hora seja prontamente actualizada aquando da inicialização da página, também irá fazer com que em intervalos de X segundos (neste caso 1 segundo) o horário vá sendo actualizado.
  1. Init = function (){
  2. var id_span = "mySpanTime";
  3. var timer_interval=1;
  4. var time_format="H:i:s";
  5.  
  6. Ajax.UpdateTime(id_span,time_format);
  7. Misc.Timer('Ajax.UpdateTime("'+id_span+'","'+time_format+'")',timer_interval);
  8. }
  9.  
  10. Events.AddEvent(window, "load", Init);




Por fim a nossa página html
  1. <html>
  2. <head>
  3. <title>MyTimeServer</title>
  4. <script type="text/javascript" src="Events.js"></script>
  5. <script type="text/javascript" src="Misc.js"></script>
  6. <script type="text/javascript" src="Ajax.js"></script>
  7. <script type="text/javascript" src="Init.js"></script>
  8. </head>
  9. <body>
  10. Hora:
  11. <span id="mySpanTime"></span>
  12. </body>
  13. </html>










clicks: 17120 17120 2008-02-03 2008-02-03 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This