kodo no kami Admin
Mensagens : 60 Pontos : 140 Reputação : 4 Data de inscrição : 09/03/2015 Idade : 31 Localização : mov eax,315; push eax; call kodo
| Assunto: [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 | |
|