[tutorial] XMLHttpRequest (ajax)

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

[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

» [tutorial] basico do mysql
» [tutorial] pesquisando dns nslookup e dig
» [tutorial] criar um player em flash
» [tutorial] instalar sqlite3 no windows
» [tutorial] programa delphi fullscreen