Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

[Dica] Ajax

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Dica [Dica] Ajax

    DEFINIÇÃO
    AJAX - Asynchronous Javascript And XML

    - (Wikipedia: é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações.)
    Ok, como funciona?

    Vamos usar um exemplo prático:
    - Você está montando um site onde usuários vão ter um login e uma senha. Ótimo, então você precisará criar um local onde usuários podem criar suas contas.
    Fácil...
    O problema, é que um login não pode se repetir. Você, em seu código fonte, seja qual linguagem for, terá que gerar um trecho de código para verificar disponibilidade. (se tiver cadastrado no banco, está indisponível, senão está disponível).
    Fácil também...
    Questão é... Você esperar o usuário submeter o formulário para depois verificar se o login já existe ou não. Se o login já existir, você terá que redirecionar o usuário novamente para a página de cadastro. Possivelmente, terá que gerar um monte de código para fazer com que os campos já preenchidos continuem preenchidos caso contrário, o usuário terá de re-preencher todos os campos.
    Chato...
    E se você pudesse colocar um meio de verificar a disponibilidade de login em seu banco de dados sem recarregar a página? Um simples click e a verificação seria feita e pronto.
    Bom, isto é possível.
    A página não é recarregada. A verificação é feita de modo assíncrono.

    Para isto, você precisa programar seu servidor para responder ao chamado Ajax.
    É de bom tom criar uma página específica para lidar com Ajax. Se você usa Java, pode criar uma Servlet, o que te dará muito mais recursos. Em PHP, você pode fazer uma página com acesso ao banco para suas chamadas Ajax.
    Bom... Neste caso específico, vejamos como ficaria (num exemplo simbólico) esta página que responderia aos chamados AJAX:

    Em java, Uma Servlet ficaria perto disto:

    Código:
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setContentType("text/html;charset=ISO-8859-1");
            request.setCharacterEncoding("ISO-8859-1");
            PrintWriter out = response.getWriter();
            try {
    	String metodo = (String) request.getParameter("metodo");
                if (metodo == null || método.equals("")) {
    //Para o caso de uma chamada sem parâmetro. Se não especificar, certamente causará //erros em seu uso futuro;
                    System.out.println("AJAX SEM PARAMETRO");
                    out.print("FALTA DE PARAMETRO");
                    response.setStatus(204);
                } else if (metodo.equals("VerificaLogin")) {
    	DAO dao = new DAO();
    	String login = (String) request.getParameter("login");
    	dao.setHQL("FROM Usuario WHERE login = '"+login.toLowerCase()+"'");
    	if(dao.getListObj.size() > 0){
    		out.println("Login não disponível!");
    	} else{
    		Out.println("Login Disponível");
    	}
    
    	//Temos que fechar o bloco try aberto no inicio.
               } finally {
                out.close();
            }
    O que acontece neste código?
    Ele recebe um parâmetro por uma request. O parâmetro chamado "método". Este parâmetro determina qual ação o cliente está esperando do servidor. Assim é possível concentrar ações Ajax em uma única página(ou classe). Este exemplo foi usado para fins didáticos. A verificação do login, seria de bom tom estar em uma outra classe. Assim a servlet Ajax apenas chamaria o método que executaria a verificação e daria uma resposta. E no Ajax, apenas Ajax
    Como pode ser notado, o login é verificado e se não existe nenhum login cadastrado, ele simplesmente imprime na tela que o login está disponível.
    Embora eu não saiba muito sobre PHP, o código lado servidor ficaria mais ou menos assim:
    Código:
    <?php
    
    $_REQUEST['metodo'];
    
    if(metodo == 'VerificaLogin'){
    	//Incluir meu arquivo de conexão pronto;
    	include("MyConnection.php");
    
    	$login = $_REQUEST['login'];
    
    	$query = "SELECT * FROM usuario WHERE login = '$login'"
    	$res = mysql_query($query);
    
    	if(mysql_num_rows($sql) == 0){
    		echo 'Login disponível!';
    	}else{
    		echo 'Login indiponível!';
    	}
    	mysql_close();
    }
    ?>
    Faz muito tempo que não mecho com php, então se estiver algo errado, por favor, corrijam-me.


    Feito isto, nosso servidor estará apto a responder nossos chamados Ajax.
    Agora Vamos ver como funcionaria o lado cliente.

    Esta ferramenta vem crescendo muito com os anos e vem dando poderes aos desenvolvedores. Poderes de projetar suas aplicações como se estivessem no lado servidor.

    Vamos começar na página que você vai verificar o login, você precisa da tag "script" dentro das tags "head' ou criar um script para poder incluí-lo posteriormente (recomendável apenas depois de todos os testes feitos, pois em testes, isto atrapalha em alguns navegadores por manter o arquivo js em cache);

    Bom, então vamos lá:
    Aqui está uma página HTML comum:

    Código:
    <!DOCTYPE html  
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">  
     <script>
    	//Seus scripts aqui.....
    </script>
      <head>  
      <title>Um título</title>  
     <meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1" />  
      </head>  
      <body>  
     </body>  
     </html>
    Bom, na tag script é que vamos trabalhar neste momento.

    Começaremos criando uma variável normal:

    Código:
    Var httpRequest;
    Agora, criamos o formuário de cadastro normalmente (Dentro da tag body, obviamente):

    Código:
    <form action="UsuarioUtil.php?param=new" method="post" name="form1" id="form1">
    		Nome:<br />
    		<input type="text" name="nome" id="nome" /><br />
    		Login:<br />
    		<input type="text" name="login" id="login" /> <span id="myspan"></span>
    		<br />
    		<!-- Continuar com o formulário... -->
    
    	</form>

    Podemos observar que ao lado do campo login, temos um span com ID “myspan”. É nele que vamos colocar nossa mensagem de disponibilidade do login.

    Voltando ao script, vamos declarar mais uma variável para nosso span:
    Código:
    	Var httpRequest;
    	Var myspan;
    Bom, agora vem um pouco de história para nós.
    Embora outros navegadores tenham, hoje, suporte ao XML em seus scripts, inicialmente só existia suporte, acreditem, para o Internet Explorer.
    Claro que foi um tanto “acidental”, vez que sua criação não foi com o propósito do uso que tem hoje, mas sim. Foi a Microsoft quem liderou esta tecnologia nos scripts de navegadores. Seguido pelo Mozilla bem rapidamente.
    Nos dias atuais, o Mozilla a o IE (Internet Explorer, para quem ainda não conhece a siglas) são grandes veteranos dos navegadores com suporte à esta tecnologia.
    Entretanto, nosso ponto de apreciação da Microsoft termina exatamente aqui. Por ser a pioneira, conforme a tecnologia e tendências apareciam, novas versões de seu plugin, o XML DOM, eram lançadas em seus navegadores. Mas eu ainda penso que na verdade isto foi somente decisão tomada em uma daquelas conferencias secretas que eles têm com o nome “Criando Maneiras de fazer Desenvolvedores Sofrerem e terem Bastante raiva de nós”
    Bom, chega de apreciação.
    Por tanto, para darmos suporte aos navegadores mais antigos, teremos que fazer uma função que para criar o XML DOM apropriado para o navegador em questão.
    Se tratando do XML DOM, temos 5.

    Microsoft.XmlDom
    MSXML2.DOMDocument
    MSXML2.DOMDocument.3.0
    MSXML2.DOMDocument.4.0
    MSXML2.DOMDocument.5.0

    Voltando a nosso script, vamos criar uma função que crie exatamente o que precisamos independente da versão do navegador (ie) utilizado pelo usuário.
    Código:
    	Var httpRequest;
    	Var myspan;
    
    	//Nossa função:
    	function createDocument(){
                    var aVersions = [ "MSXML2.DOMDocument.5.0",
                        "MSXML2.DOMDocument.4.0", "MSXML.DOMDocument.3.0",
                        "MSXML2.DOMDocument", "Microsoft.XmlDom"
                    ];
    
                    for (var i=0; i<aVersions.length; i++){
                        try{
                            var oXmlDom = new ActiveXObject(aVersions[i]);
                            return oXmlDom;
                        }catch(oError){
                            //Nada a fazer
                        }
                    }
                }
    A função create document tem um array com todos os XML DOMs existentes, e o laço garante que o navegador tente criar todos as versões até que crie a verão compatível com o navegador. Quando isto acontece, ele retorna o objeto que precisamos para prosseguir em nosso Ajax.

    Bom, agora criaremos a função que vai enviar o chamado AJAX para o servidor:

    Código:
    Function verifica(){
    	    Var dadosLogin = document.getElementById("login");
    	     var url = "AJAX?metodo=VerificaLogin&login=" + escape(dadosLogin.value);
                        httpRequest = false;
                        if (window.XMLHttpRequest) { // Mozilla, Safari, Chrome...
                            httpRequest = new XMLHttpRequest();
                            if (httpRequest.overrideMimeType) {
                                httpRequest.overrideMimeType('text/xml');
                            }
                        } else if (window.ActiveXObject) { // IE
                            httpRequest = createDocument();
                        }
                        if (!httpRequest) {
                            alert('Seu navegador não suporta AJAX. Esta página usa AJAX.');
                            return false;
                        }
                        httpRequest.onreadystatechange = ResponseReq; //Esta função cuidara do resto;
                        httpRequest.open('GET', url, true);
                        httpRequest.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
                        httpRequest.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
                        httpRequest.setRequestHeader("Pragma", "no-cache");
                        httpRequest.send(null);
                    }
    }

    Analisando, podemos notar que esta função verifica o navegador e acha o “XMLHttlRequest” adequado para o navegador, que é o objeto responsável pela recuperação assíncrona de dados.
    A url usada neste caso, é nossa Servlet (o exemplo de código em Java) e é passado os parâmetros método e o login como GET.

    Código:
    httpRequest.onreadystatechange = ResponseReq

    Esta linha informa que toda vez que houver mudança de status na resposta do servidor para nossa solicitação enviada, ele deve chamar a função “ResponseReq”. Vamos então criar a função ResponseReq:

    Código:
    function ResponseReq(){
    	myspan = document.getElementById('myspan');
    	if (httpRequest.readyState == 4) {
    		myspan.innerHTML = "";
                        if (httpRequest.status == 200) {
                            	myspan.innerHTML = httpRequest. responseText;
                        } else {
                            alert(http_request.status + ' - Houve um erro no servidor. Por favor. Contacte a equipe de suporte técnico se este erro persistir ao reabrir esta página!');
                        }
                    } else {
    		Myspan.innerHTML = "<p>Aguardando Servidor...</p>";
    }
    }
    Bom, myspan, é a variável que declaramos no inínio. E ela esta representando nosso span que esta ao lado do campo login, em nosso formulário.
    Enquanto o servidor não responde com status 4 (que significa que concluiu todo o processo), então ele coloca uma mensagem no span (“Aguardando Servidor...”) que você pode colocar uma imagem de carregando ou um gif ou qualquer outra coisa que queira.
    Agora basta você colocar o evento onde bem quiser.
    Você pode escolher colocar a ação ao sair do campo login ou até mesmo criar um botão ou um link para chamar a função que verifica o login.

    Este foi um exemplo, mas se quiser, você pode, ainda chamar uma página e mandar carregar dentro de um div. A única coisa que iria alterar neste script seria a url, que deveria ter a url da página que você quer abrir dentro do DIV e a variável “myspan” deveria chamar a ID do seu DIV.

    Isto permite você fazer muita coisa, basta usar a criatividade.

    Se este tutorial for útil, então num futuro não muito distante eu crio outro explicando como usar AJAX com XML. Usamos aqui o responseText, com o responseXML, as possibilidades de criação se estendem ainda mais. Pode-se fazer sugest’s, tabelas, preencher campos, etc... Tudo com XML.
    Ainda Tem outras coisas de Java script que é interessantíssimas, tais como criar elementos e setar atributos nestes (como por exemplo um div ou um span ou até mesmo um link). Possibilidades fantásticas, para você usar onde bem desejar.

    Até uma próxima vez.

    Dúvidas e sugestões, postem.

    Creditos:McLuck
    Last edited by Alison_PC; 16-02-2010, 20:59.



  • Font Size
    #2
    Belo tuto... parabéns!

    Comment


    • Font Size
      #3
      Valeu bolinha vai ajudar bastante, ajax tá sendo muito requisitado hoje em dia... ate a google tava procurando bons programadores de ajax... abração e valeu!

      sigpic

      Comment


      • Font Size
        #4
        Vlw mais tem como vc detalhar mais um pouco ou fazer uma video aula pq tou começando a estudar isto agora e tenho bem pouco conhecimento nesta area...
        mais muito obrigado pelo post
        Segurança no Brasil é uma total aberração,helicóptero é derrubado por favelado,e seu site admin é ownado

        Comment


        • Font Size
          #5
          gostei demais do post, to pretendendo fazer um site de baladas em ajax, vc pode me dar umas dixar bolinha?

          Comment


          • Font Size
            #6
            Gracas a Deus existe "$" , ADORO kkk!

            Comment

            X
            Working...
            X