Game Memória Empreendedora

Eis mais um acrescimo para meu portfolio, este game foi desenvolvido na plataforma web, usando, PHP5, Mysql e Ajax. A finalidade deste aplicativo é auxiliar no aprendizado e inclusão digital de empreendedores.

Este projeto foi desenvolvido pelo Centro de Apoio ao Desenvolvimento Tecnológico – CDT/UnB em parceria com o Ministério do Desenvolvimento, Indústria e Comércio Exterior.

Visite www.cdt.unb.br/memoria, e divirta-se.

Ajax com jQuery

Bem galera,
iniciando uma serie de artigos sobres esta fabulosa biblioteca js, o jQuery. Para fazer o download acesse jQuery.

Mãos na massa:

Primeiro vamos criar a nossa função que ira pegar os dados do formúlario e enviar via ajax, neste exemplo usarei a função $.post(url, data, callback).

$(document).ready(function() {				
	$("#submit").click(function(){
		// Mostra tela Loding
		$('#loading').ajaxStart(function(){
			$(this).show();
		});
		
		$.post('jQuery.php', {
			nome: $('#nome').val(),
			email: $('#email').val(),
			tel: $('#tel').val()
		}, function(response) {
			$('#result').html(unescape(response));
			$('#result').fadeIn();
		});
		
		// Esconde Loading
		$("#loading").ajaxSuccess(function(){
			$(this).hide();
		});
		
		return false;
	});
})

Pega os parametos enviados pelo formulário, jQuery.php.

<?php
// Extrai os POST
extract($_POST);

// Mostra dados
echo "
Nome: " . $nome;
echo "
Email: " . $email;
echo "
Tel: " . $tel;
?>

Unidos pelo récorde

Unidos para que o Firefox 3 bata o récorde mundial de download.

Abracem esta idéia!

Requisitando uma página em ajax

A finalidade deste exemplo é mostra para os iniciantes em ajax como é simples efetuar uma requisição usando o ajax.

A primeira coisa a fazer é verificar se o browser do cliente suporta o ajax e instânciar o objeto.

var ajax;
try {
  // Verifica se o Firefox, Opera 8.0+, Safari suporta o ajax
  ajax = new XMLHttpRequest();
} catch (e) {
  // Verifica se o Internet Explorer suporta o ajax
  try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      alert("Seu browser não dar suporte ao AJAX!");
      return false;
    }
  }
}

Agora vamos processar nosso ajax, observe que neste exemplo estamos tratando o readyState 4, que seguinifica que a requisição foi bem sucedida.

// Processa requisição ajax
ajax.onreadystatechange = function() {
  if(ajax.readyState == 4) {
    document.getElementById('campoResposta').innerHTML = ajax.responseText;
  }
}
ajax.open('POST', 'time.php', true);
ajax.send(null);

Neste exemplo o ajax requisita uma página que contém uma função date(‘H:i:s’)
time.php

date('H:i:s')

Agora juntamos as partes do objeto ajax em uma função para efetuarmos a requisição.

function ajaxSend() {
  var ajax;
  try {
    // Firefox, Opera 8.0+, Safari
    ajax = new XMLHttpRequest();
  } catch (e) {
      // Internet Explorer
      try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Seu browser não dar suporte ao AJAX!");
          return false;
        }
      }
  }
  
  // Processa requisição ajax
  ajax.onreadystatechange=function() {
    if(ajax.readyState == 4) {
      document.getElementById('time').innerHTML = 'Time: ' + ajax.responseText;
    }
  }
  ajax.open('POST', 'time.php', true);
  ajax.send(null);
}