Vilarejo PK2P
Bem-vindo ao fórum Vilarejo PK2P! O fórum oficial do canal Press Key to Play do Youtube!

Grupo para reunir as pessoas que acompanham os vídeos no canal Press Key to Play e discutir os assuntos abrangidos pelo Blog PK2P.


Você não está conectado. Conecte-se ou registre-se

[tutorial] XMLHttpRequest (ajax)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

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

Ver perfil do usuário https://eofclub.in/forum

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum