[tutorial] XMLHttpRequest (ajax)

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] XMLHttpRequest (ajax)

Post by Kodo no Kami » Sun May 03, 2015 9:27 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

Code: Select all

<html>
<head>
   <script type="text/javascript">
   </script>
</head>
<body>
</body>
</html>
agora instanciamos o nosso objeto XMLHttpRequest

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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

Code: Select all

<?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

Image

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)

Code: Select all

<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>
Image

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

Code: Select all

<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)

Code: Select all

<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>
Image

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

by kõdo no kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”