quarta-feira, 1 de maio de 2013

Usando AJAX com ASP - [ComboBox | DropDownList | Select ]

Em ASP (Active Server Pages) o uso do AJAX (Asynchronous JavaScript e XML) serve para realizarmos processamentos em paralelo em outra página ASP, ou seja, a partir de uma página ASP usando AJAX iniciar um processamento de outra pagina ASP na qual o resultado é redirecionado para página chamadora.

Vemos na imagem abaixo:

Para o uso do AJAX que é um JavaScript Assíncrono, devemos utilizar um objeto JavaScript chamado XMLHttpRequest;
Temos no trecho de código abaixo que o JavaScript irá realizar [ xmlhttp.send(); ] uma requisição usando Assíncrona com POST de um processamento que ocorrerá na página "Processa.asp" [ xmlhttp.open("POST","Processa.asp",true); ].
Ao término do processamento [ xmlhttp.onreadystatechange...com...(xmlhttp.readyState==4 && xmlhttp.status==200) ]é recomentado realizar alguma ação com base no resultado [ xmlhttp.responseText ] do processamento.


var xmlhttp;
//Criando o Objeto AJAX
if (window.XMLHttpRequest){
    //IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//Quando terminar o processamento
var resultado = "";
xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        resultado = xmlhttp.responseText;
    }
};

//Chamada do processamento Assíncrono
xmlhttp.open("POST","Processa.asp",true);
xmlhttp.send();

Antes de realizarmos o carregamento de uma combo precisamos saber o que escrever de código na nossa página Processa.asp de modo que a variável resultado contenha alguma informação;
A resposta é simples: Tudo que for escrito através de [ Response.write ];

Neste exemplo temos no html do asp a seguinte estrutura:


    Estados do Sul do Brasil: <select id='selUFSul' name='selUFSul'></select>

E em nossa página ASP Processa.asp o seguinte trecho

    //Pagina Processa.asp
    Reponse.Write "<option value=PR>Paraná</option>" 
    Reponse.Write "<option value=SC>Santa Catarina</option>" 
    Reponse.Write "<option value=RS>Rio Grande do Sul</option>" 
Em resumo quando AJAX chama a pagina Processa.asp, tudo que é armazenado em memória do buffer (Response.Write) é capturado por xmlhttp.responseText onde esse dado pode ser uma estrutura html podendo o programador popular com combo select conforme codigo abaixo:

xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        resultado = xmlhttp.responseText;
        documento.getElementById('selUFSul').innerHTML = resultado;
    }
Enfim teremos a combo populada.

Nenhum comentário:

Postar um comentário