![[tutorial] XMLHttpRequest (ajax) Tumblryy](https://2img.net/r/ihimg/scaled/large/854/tumblryy.png)
Início
![[tutorial] XMLHttpRequest (ajax) QdhdIA2](https://i.imgur.com/qdhdIA2.png)
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
agora instanciamos o nosso objeto XMLHttpRequest
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
agora usamos o metodo send para enviar a requisição
para a gente pegar a resposta da requisição podemos usar o metodo responseText
o arquivo php onde eu to fazendo a requisição é esse
como podemos ver na imagem abaixo ainda estamos na mesma pagina porem ele fez a requisição na outra
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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
podemos usar o atributo status para especificar o estado da pagina (200 - normal, 404 - pagina nao existe etc)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
bom galera isso é so o basico do que se pode fazer com ajax ^^
by kõdo no kami
- 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
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
bom galera isso é so o basico do que se pode fazer com ajax ^^
by kõdo no kami
