Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro


Alpha Servers
Resultados 1 a 2 de 2
  1. #1

    Avatar de FusioN
    Data de Ingresso
    Jul 2010
    Localização
    Rio de Janeiro - Brasil
    Idade
    23
    Posts
    434
    Agradecido
    17
    Agradeceu
    13
    Peso da Avaliação
    17

    Padrão [Ajax][Iniciante]Introdução ao Ajax

    Índice:

    - O que é AJAX?
    - O que preciso para programar?
    - Como iniciar o AJAX?
    - Compatibilidade com os navegadores
    - Propriedades do objeto AJAX
    - AJAX Post Method

    O que é Ajax?

    É um recurso do Java script que permite receber respostas do servidor sem a necessidade de recarregar a página

    O que é preciso para programar?
    - Um navegador atual
    - Um servidor rodando(para executar os script ServerSide)

    Como iniciar o AJAX?

    Para Firefox, opera, crhome, safari e IE7+ usamos o XMLHttpRequest();

    Código:
    <script>
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    </script>
    Para internet Explorer 5 ou 6 usamos um ActiveXObject:

    Código:
    <script>
    var xmlhttp;
    xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
    </script>
    Compatibilidade com os navegadores:

    Não podemos escolher apenas um método para iniciar o AJAX, pois o usuário pode usar um navegador sem suporte ao método que usamos, portanto, para juntar essas duas formas, usaremos condicionais.

    Código:
    <script>
    var xmlhttp;
    function ajax()
    {
        if(window.XMLHttpRequest)
        {
            xmlhttp = new XMLHttpRequest();
        } else if(window.ActiveXObject)
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else
        {
            alert('Este navegador não suporta AJAX');
        }
    }
    </scritp>
    Podemos ainda, criar uma função para definir o objeto, sem limitá-lo a uma variável fixa:

    Código:
    <script>
    function ajax()
    {
        var xmlhttp = getXmlHttpObject();
        if(xmlhttp == null)
        {
            alert('Este navegador não suporta XML HTTP REQUEST!');
        }
    }
    
    function getXmlHttpObject()
    {
        if(window.XMLHttpRequest)
        {
            return new XMLHttpRequest();
        } else if(window.ActiveXObject)
        {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }
    </script>
    Propriedades do objeto AJAX:

    xmlhttp é, agora, o nosso objeto, e ele tem propriedades essenciais para manipular a sua execução. São elas:

    Código:
    .onreadystatechange => Chama uma função toda vez que o status do processamento for modificado
    .readyStatus        => Captura o status atual do processamento
    .open         => Executa um script
    .send         => Envia os parâmetros ao script
    .responseText => Reposta do servidor
    onreadystatechange tem 5 valores, eles são:

    Código:
    0 => A solicitação não foi inicializada //pedido
    1 => A solicitação foi inicializada //pedido
    2 => A solicitação foi enviada //pedido
    3 => A solicitação está sendo processada //resposta
    4 => A solicitação foi processada //resposta
    Continuando pelo nosso script:

    Código:
    <script>
    function ajax()
    {
        var xmlhttp = getXmlHttpObject();
        if(xmlhttp == null)
        {
            alert('Este navegador não suporta XML HTTP REQUEST!');
        }
       
        xmlhttp.onreadystatechange=function()
        {
            alert('O status do processamento foi modificado');
        }
    }
    
    function getXmlHttpObject()
    {
        if(window.XMLHttpRequest)
        {
            return new XMLHttpRequest();
        } else if(window.ActiveXObject)
        {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }
    </script>

    Código:
    xmlhttp.onreadystatechange=function()
    {
        alert('O status do processamento foi modificado');
    }
    Toda vez que o status for modificado, ele exibirá este alerta, mas não é isso que nós queremos. Nós queremos a resposta dada pelo servidor.
    E modificando o código acima, nós conseguimos:

    Código:
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState == 4) //status 4 = completo
        {
            alert(xmlhttp.responseText);
        }
    }
    Toda vez que o status for modificado, ele executará essa condicional e, quando o status for 4(completo) ele dará um alerta na resposta daad pelo servidor.
    Mas para que onreadystatechange seja acionada, a execução de algum script server side deve ser executada, e isso é feito com as propriedades .open e .send

    O uso do open:
    Código:
    open(metodo, script, assincrono);
    Código:
    metodo => get ou post
    script => scritp que processára as informações
    assincrono => true ou false; diz se a execução será feita sem recarregar a página(true = sem recarregar; false = recarregando)
    ex:
    Código:
    xmlhttp.open("GET", "script.php", true);
    O uso do send:
    Código:
    send(parametros);
    parametros => parametros que devem ser passados ao servidor, caso o método seja post, se o metodo for get
    usamos:

    Código:
    send(null);
    Sabendo do uso do .open e do .send, nosso script ficará assim:

    Código:
    <script>
    function ajax()
    {
        var xmlhttp = getXmlHttpObject();
        if(xmlhttp == null)
        {
            alert('Este navegador não suporta XML HTTP REQUEST!');
        }
       
        xmlhttp.onreadystatechange=function()
        {
            if(xmlhttp.readyState == 4) //status 4 = completo
            {
                alert(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET", "hora.php", true);
        xmlhttp.send(null);
    }
    
    function getXmlHttpObject()
    {
        if(window.XMLHttpRequest)
        {
            return new XMLHttpRequest();
        } else if(window.ActiveXObject)
        {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }
    </script>
    
    <!-- Logo abaixo desse script colocaremos um botão que chama a função ajax(): -->
    
    <input type="button" onclick="return ajax();" value="HORA!">
    E nosso script hora.php é:

    Código:
    <?php
    echo date("H:i:s");
    ?>
    AJAX - Post Method

    O método que vimos até agora, foi o método post, que não suporta uma quantidade de caracteres grande, pois, ainda que a requisição não seja vista, ela é feita através da URL, que tem um tamanho máximo. No entanto, definindo alguns cabeçalhos no script e enviando as informações na função send(), podemos utilizar o método post.

    Abriremos um novo objeto XmlHttpRequest(), desta forma:

    Código:
    //variáveis do objeto
    var xmlhttp = new XMLHttpRequest();
    var url = "arquivo1.php";
    
    //parametros para serem passado por post
    var parametros = "nome=Giovanni&sNome=Paolo";
    
    //abrir conexão
    xmlhttp.open("POST", url, true);
    
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }
    
    //desta vez, send não teve parametro "null"
    //pois o método é POST
    xmlhttp.send(parametros);
    E o script PHP pode ser assim:

    Código:
    <?php
    echo "Olá, $_POST['nome'] $_POST['sNome']";
    ?>
    Tá, e daí? Não vi diferença, os dois fizeram a mesma coisa com a mesma eficiência.
    Não existe diferença aparente porque os parâmetros que eu passei foram curtos, mas se você quer pegar uma informação tal como um "texto" de um "TextArea", dependendo do tamanho desse texto, o texto pode chegar "cortado" no script PHP e você pode ter problemas com isso.

    Você pode adaptar esse script para interagir com um formulário. Basta declarar as variáveis - com seus respectivos valores - no evento onclick do botão que enviaria o formulário e depois, usar o getElementById('ELEMENTO') para colocar o responseTexto nele.

    E aqui, eu termino este tutorial.

    Espero que tenham gostado.

    Créditos:
    Aulto

    Fonte:
    Pro Code
    Última edição por FusioN; 07-08-2010 às 12:28 PM.

  2. #2

    Avatar de Mr.TwoHam
    Data de Ingresso
    Sep 2009
    Localização
    Microsoft ®
    Idade
    24
    Posts
    629
    Agradecido
    27
    Agradeceu
    19
    Peso da Avaliação
    16

    Padrão

    Ajax + C# + ASP.NET é oque ah !

 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. |Dúvida| login com ajax não salva a sessão
    Por bkpkbmu no fórum PHP
    Respostas: 4
    Último Post: 30-12-2015, 12:43 AM
  2. |Dúvida| (Ajax) abrir páginas?
    Por SpinXO no fórum Java
    Respostas: 12
    Último Post: 06-05-2015, 03:37 PM
  3. |Enquete| MuSite em Ajax
    Por 14biss no fórum Flood Livre
    Respostas: 7
    Último Post: 04-11-2013, 09:03 PM
  4. |Download| L2 acm com ajax
    Por fuckYEA no fórum WebSites
    Respostas: 0
    Último Post: 27-11-2011, 10:56 PM
  5. |Pedido| colocar ajax e javascript na web
    Por pedrobuck no fórum Dúvidas|Pedidos
    Respostas: 2
    Último Post: 21-09-2011, 02:51 PM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •