InícioPortalCalendárioFAQBuscarMembrosGruposRegistrar-seConectar-se
Últimos assuntos
» Que presente você daria a pessoa acima?
Dom Set 18, 2016 11:25 pm por Sasuke

» [tutorial] minecraft: computercraft - 1º parte
Qui Dez 17, 2015 9:07 am por kodo no kami

» cade todo mundo?
Dom Nov 01, 2015 11:59 am por Sasuke

» O Melhor Anime/Mangá
Qui Maio 28, 2015 8:17 am por kodo no kami

» [artigo] o que é deepweb
Qui Maio 21, 2015 5:47 am por kodo no kami

» Come ou vomita
Ter Maio 19, 2015 2:17 am por Hellman's

» Oque á de baixo da mesa?
Ter Maio 19, 2015 2:16 am por Hellman's

» Chroma Squad- A new heroes
Seg Maio 18, 2015 12:30 am por Mestre

» [tutorial] desligando o pc de forma automatica
Sex Maio 15, 2015 6:18 am por kodo no kami

Tools

musica no perfil nome ninja

Buscar
 
 

Resultados por:
 

 


Rechercher Busca avançada
Parceiros
Fórum grátis

Compartilhe | 
 

 [tutorial] XMLHttpRequest (ajax)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
kodo no kami
Admin
Admin
avatar

Mensagens : 60
Pontos : 140
Reputação : 4
Data de inscrição : 09/03/2015
Idade : 25
Localização : mov eax,315; push eax; call kodo

MensagemAssunto: [tutorial] XMLHttpRequest (ajax)   Sex Mar 13, 2015 1:53 am

e ae galera faz um tempo sem escrever tutorial entao to fazendo esse aqui sobre ajax, bom o ajax é uma forma do navegador fazer uma requisição sem sair da pagina atual, com isso nao precisamos ser redirecionado para um script para enviar um formulario ou simplesmente retornar o codigo da pagina, para fazer isso em javascript podemos usar o objeto XMLHttpRequest porem antes de tudo vamos criar uma pagina basica para o exemplo

Código:
<html>
<head>
   <script type="text/javascript">
   </script>
</head>
<body>
</body>
</html>

agora instanciamos o nosso objeto XMLHttpRequest

Código:
<html>
<head>
   <script type="text/javascript">
      var kodo = new XMLHttpRequest();
   </script>
</head>
<body>
</body>
</html>

para usar esse objeto usamos o metodo open para configurar a url onde vamos fazer a requisição, nesse metodo passamos como argumento o metodo de envio (GET, POST), a url e se ele vai ser assincrono ou nao

Código:
<html>
<head>
   <script type="text/javascript">
      var kodo = new XMLHttpRequest();
     kodo.open("GET","login.php?usu=kodo&senha=fts",false);
   </script>
</head>
<body>
</body>
</html>

agora usamos o metodo send para enviar a requisição

Código:
<html>
<head>
   <script type="text/javascript">
      var kodo = new XMLHttpRequest();
     kodo.open("GET","login.php?usu=kodo&senha=fts",false);
     kodo.send();
   </script>
</head>
<body>
</body>
</html>

para a gente pegar a resposta da requisição podemos usar o metodo responseText

Código:
<html>
<head>
   <script type="text/javascript">
      var kodo = new XMLHttpRequest();
     kodo.open("GET","login.php?usu=kodo&senha=fts",false);
     kodo.send();
     document.write(kodo.responseText);
   </script>
</head>
<body>
</body>
</html>

o arquivo php onde eu to fazendo a requisição é esse

Código:
<?php
   $u = $_REQUEST["usu"];
   $s = $_REQUEST["senha"];
   if(!strcmp($u,"kodo") && !strcmp($s,"fts")){
      echo "acesso permitido, bem vindo";
   }
   else{
      echo "acesso negado";
   }
?>

como podemos ver na imagem abaixo ainda estamos na mesma pagina porem ele fez a requisição na outra



mais um exemplo porem agora usando um botao e a funçao XMLHttpRequest ta dentro de uma função (tambem usei um div para escrever a resposta)

Código:
<html>
<head>
   <script type="text/javascript">
      function kodo_ajax(){
        var kodo = new XMLHttpRequest();
       var usu = document.getElementById("usuario");
       var sen = document.getElementById("senha");
       var texto = document.getElementById("kodo_texto");
        kodo.open("GET","login.php?usu="+usu.value+"&senha="+sen.value,false);
        kodo.send();
        texto.innerHTML = kodo.responseText;
     }
   </script>
</head>
<body>
   usuario: <input type="text" id="usuario"><br>
   senha: <input type="password" id="senha">
   <input type="button" value="checar" onclick="kodo_ajax()">
   <div id="kodo_texto">
   </div>
</body>
</html>



para usar ele de forma assincrona basta especificar true no metodo open, dessa forma podemos usar o evento onreadystatechange que apenas chama determinada funçao caso tiver uma mudança

Código:
<html>
<head>
   <script type="text/javascript">
      function kodo_ajax(){
        var kodo = new XMLHttpRequest();
       var usu = document.getElementById("usuario");
       var sen = document.getElementById("senha");
       var texto = document.getElementById("kodo_texto");
        kodo.open("GET","login.php?usu="+usu.value+"&senha="+sen.value,true);
        kodo.send();
       kodo.onreadystatechange = function(){
          texto.innerHTML = kodo.responseText;
       }
     }
   </script>
</head>
<body>
   usuario: <input type="text" id="usuario"><br>
   senha: <input type="password" id="senha">
   <input type="button" value="checar" onclick="kodo_ajax()">
   <div id="kodo_texto">
   </div>
</body>
</html>

podemos usar o atributo status para especificar o estado da pagina (200 - normal, 404 - pagina nao existe etc)

Código:
<html>
<head>
   <script type="text/javascript">
      function kodo_ajax(){
        var kodo = new XMLHttpRequest();
       var usu = document.getElementById("usuario");
       var sen = document.getElementById("senha");
       var texto = document.getElementById("kodo_texto");
        kodo.open("GET","loginkodo.php?usu="+usu.value+"&senha="+sen.value,true);
        kodo.send();
       kodo.onreadystatechange = function(){
         if(kodo.status == 200){
            texto.innerHTML = kodo.responseText;
         }
         else if(kodo.status == 404)
         {
            texto.innerHTML = "essa pagina nao esta disponivel";
         }
       }
     }
   </script>
</head>
<body>
   usuario: <input type="text" id="usuario"><br>
   senha: <input type="password" id="senha">
   <input type="button" value="checar" onclick="kodo_ajax()">
   <div id="kodo_texto">
   </div>
</body>
</html>



bom galera isso é so o basico do que se pode fazer com ajax ^^

by kõdo no kami




Citação :
Conheça o sistema e manipule ele, se limite ao sistema e seja manipulado por ele ~kodo no kami

Voltar ao Topo Ir em baixo
Ver perfil do usuário
 
[tutorial] XMLHttpRequest (ajax)
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Fazendo seu aplicador de Static Grass - Tutorial em português
» Tutorial, como potar vídeos a partir do youtube !
» Tutorial diorama carro !
» Tutorial de moldagem em borracha de silicone
» [Venda] Cenário 12 casas para Cloth Myth - Liquidação 85,00 - Áries, Touro, Virgem e Escorpião Pronta Entrega

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: Outros :: Informatica :: Programação / Webdesign-
Ir para: