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

Participe do fórum, é rápido e fácil

Vilarejo PK2P
Bem-vindo ao fórum Vilarejo PK2P! O fórum oficial do canal Press Key to Play do Youtube!
Vilarejo PK2P
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

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

Últimos assuntos

» RPG de Mesa: A fronteira Volume 4: O Castelo Owlrick. (D&D5e)
por Ariano 10/12/2020, 23:18

» [tutorial] hash em C/C++ com openssl
por kodo no kami 21/9/2020, 13:37

» ping lista grafico
por kodo no kami 24/7/2020, 07:53

» [Discord] Campanha de RPG D-cyber
por Jonatan15 17/7/2020, 11:11

» [tradução] 1869 (msdos)
por kodo no kami 26/6/2020, 13:43

» [source] exemplo filtro mediano
por kodo no kami 1/6/2020, 00:24

» [tutorial] criar filtro nas imagens (python)
por kodo no kami 22/5/2020, 19:29

» Wireless IDS Sagemcom
por kodo no kami 22/4/2020, 23:50

» [source] detectar dispositivos no wifi (sagemcom)
por kodo no kami 9/3/2020, 20:25

» [tutorial] wla assemblador (65xx, 68xx, z80, 8008, 8080 e huc6280)
por kodo no kami 2/2/2020, 16:42


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

[tutorial] XMLHttpRequest (ajax)

Ir para baixo  Mensagem [Página 1 de 1]

kodo no kami

kodo no kami

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

[tutorial] XMLHttpRequest (ajax) F012rq

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>

[tutorial] XMLHttpRequest (ajax) 35a4swh

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>

[tutorial] XMLHttpRequest (ajax) 24npq4l

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

by kõdo no kami

https://eofclub.in/forum

Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos