Requisitos minimos: ter noções básicas de HTML.
Requisitos recomendado: ter noções básicas de HTML, saber o que é funções javascript e como chama-las.
Quem não entender pode postar suas dúvidas que estarei respondendo às aqui mesmo.
Vou mostrar um exemplo onde você seleciona um estado e o ajax busca as cidades do estado.
O que é ajax?
Grande parte das pessoas que iniciam a programação na web se perguntam que linguagem de programação é essa? Calma filho ajax não é uma nova linguagem de programação é apenas uma técnica de usar o java script para fazer páginas dinâmicas ou seja atualizar os dados na tela sem precisar carregar a página toda novamente então vamos lá para um exemplo simples como todos já sabem só se começa pelo começo.
Primeiramente vamos criar o nosso script que pode ser criado em um arquivo .js ou declarar no cabeçalho da sua página (entre as TAG's <head><script>...</script></head> vou explicar um pouco mais logo abaixo.
<script>
var ajax;
var requeste;
function RequisicaoAjax(tipo,url,status){
// criamos o objeto
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else
{
if(window.ActiveXObject){
ajax = new ActiveXObject("Msxml2.XMLHTTP");
if(!ajax){
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
// verificamos se o objeto foi criado
if(ajax){
inicia(tipo,url,status); // chama a função que inicia o objeto
}else{
alert("Não possui suporte a AJAX");
}
}
// inicia o objeto e envia a requisição
function inicia(tipo,url,bool){
ajax.onreadystatechange=trataResponse;
ajax.open(tipo,url,bool);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
ajax.send(requeste);
}
function enviaDados(url){
criaQueryString();
RequisicaoAjax("POST",url,true);
}
function criaQueryString(){
requeste="";
var frm = document.forms[0];
var numElementos = frm.elements.length;
for(var i=0;i < numElementos;i++){
if(i< numElementos-1){
requeste += frm.elements[i].name+"="+
encodeURIComponent(frm.elements[i].value)+"&";
}else{
requeste += frm.elements[i].name+"="+
encodeURIComponent(frm.elements[i].value);
}
}
}
function trataResponse(){
if(ajax.readyState==4){
document.getElementById("aguarde").innerHTML="aguarde...";
if(ajax.status ==200){
document.getElementById("aguarde").innerHTML="";
document.getElementById("result").innerHTML = ajax.responseText;
}else{
document.getElementById("aguarde").innerHTML="Erro na requisição"+ajax.responseText;
}
}
}
function CapturaDados(form)// Função que pega todos os dados do formulário
{
var url = form.name; // pega o nome do formulário
//captura os dados dos select
elementosForm = form.getElementsByTagName("select");
for(i=0; i < elementosForm.length; i++){
if(elementosForm[i].value != ""){
url = url + elementosForm[i].name + "=" + elementosForm[i].value + "&";
}
}
// chama a requisição
RequisicaoAjax("GET",url,true);
}
</script>
Agora é só criar o formulário e pronto virão como é fácil <form name="AulaAjax.php?" method="post" action="javascript:void%200" onsubmit="return false;">
Estado:
<select onchange="CapturaDados(this.form)" name="estado">
<option value="">Selecione...</option>
<option value="AC">ACRE</option>
<option value="AL">ALAGOAS</option>
<option value="BA">BAHÍA</option>
</select>
Cidade:
<select id="result">
</select>
<br />
<input type="submit" onclick="CapturaDados(this.form)" value="Enviar" />
</form>
Veja exemplo funcionandoDowload do exemplo.
OBS: essa função não permite a requisição em páginas fora do seu domínio.
Em breve vou estar postando como utilizar JSON com PHP e AJAX.
Nenhum comentário:
Postar um comentário