Ajax (Puro)
Este artigo vou falar sobre Ajax com javascript ‘Puro’, sem usar nenhuma library.
primeiro passo: vamos fazer um arquivo .php, por exemplo: ajax.php
com o Codigo Abaixo:
/**
* Quando é feito aquisição
* para o ajax.php com a seguinte URL ajax.php?id="+value
* e passado por $_GET o id, aqui abaixo coloquei
* um jeito simples de entender se a id for igual á 1
* ele faz o select
* */
if($_GET['id'] == 1){
echo "";
}
if($_GET['id'] == 2){
echo "";
}
if($_GET['id'] == 3){
echo "
}
Após feito o arquivo ajax.php citado acima iremos fazer o html
nomeando o mesmo de index.html
e Finalmente chegamos na parte mais legal Javascript aonde será feito a requisição ajax
function buscaOs(value)
{
if(value != ''){
// Instancia o XMLHttpRequest
var http = new XMLHttpRequest();
// Aqui sera passado o Metodo para onde sera direcionado a aquisição
http.open("GET","ajax.php?id="+value, true);
// Cabeçalho
http.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
// Estações do Ajax Lembrando que são 4
http.onreadystatechange = function() {
// Primeira Estação Carregando a solicitação
if(http.readyState == 1){
// Gif de Loading
document.getElementById('distOs').innerHTML = '
'
}
// 4 estação já concluida e o status 200 como tudo OK 404 erro
if(http.readyState == 4 && http.status == 200) {
// tira o none do display CSS
document.getElementById('distOs').style.display='block';
// Faz um innerHTML para a resposta que veio da requesição ajax.php
document.getElementById('distOs').innerHTML = http.responseText;
}
}
http.send(null);
} else {
// Se estiver vazio propriedade css NONE
document.getElementById('distOs').style.display='none';
}
}
Abaixo segue um exemplo do tutorial
Download do Arquivo
Espero que tenham gostado
GOD BLESS YOU
