Desde quando desenvolvo para Web eu sempre utilizei AJAX, principalmente o "embutido" na plataforma .Net(Microsoft), cujo framework absorveu de forma impressionante este conceito.
AJAX não é uma linguagem de programação, um script, um componente, nem uma nova tecnologia.
É simplesmente um conceito que se utiliza de tecnologias já existentes e conhecidas, de forma integrada: HTML, JavaScript e XML.
Com qual linguagem Web eu posso trabalhar com Ajax? Qualquer uma: php, Asp, Asp.Net, etc.
A linguagem-servidor independe. O que importa é a "resposta" que a aplicação dá às requisições feitas via JavaScript.
Para mostrar que Ajax é um conceito e não uma linguagem de programação e pode ser usado com qualquer linguagem(porque é apenas um conceito), vou fornecer um exemplo básico, somente utilizando HTML e JavaScript(sem code-behind).
Basta copiar o código abaixo para um editor de texto, e salvar o arquivo com extensão html.
Exemplo: index.html
index.html
<html>
<head>
<script type="text/javascript">
function Exemplo(pagina,Div) {
var ajaxObj;
try {
// Firefox, Opera 8.0+, Safari...
ajaxObj=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
ajaxObj=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Seu navegador não possui suporte ao AJAX!");
return false;
}
}
}
ajaxObj.onreadystatechange=function() {
if(ajaxObj.readyState==4) {
document.getElementById(Div).innerHTML=ajaxObj.responseText;
}
}
ajaxObj.open("GET",pagina,true);
ajaxObj.send(null);
}
</script>
</head>
<body>
Exemplo Básico de AJAX
<form name="exemplo">
<a href="#" onclick="Exemplo('pagina.html','Conteudo');" ><font color=blue><b>Clique aqui para carregar o conteúdo!</b></font></a>
</form>
<br>
<div id="Conteudo"></div>
</body>
</html>
pagina.html
<h3>Bem-vindo ao AJAX</h3>
No código-fonte da index.html foi criada uma função JavaScript chamada Exemplo, com dois parâmetros: pagina e div.
Pagina é a url(no nosso exemplo, pagina.html) que será executada e que retornará "dados" para o chamador da função na index.html
Div corresponde ao Id da div na qual gostaríamos que o conteúdo da página requisitada fosse exibido. No exemplo, a div Conteudo.
Pagina.html contém todo o conteúdo que se quer exibir.
Pronto!!!
Ao clicar no link na index.html a div é "preenchida" com as informações de outra página(pagina.html). Percebam que houve essa modificação no conteúdo da página(index.html)
sem o recarregamento da mesma.
Bem-vindo ao AJAX!!!
A partir desses conceitos básicos pode-se criar exemplos extremamente complexos, gerando
soluções impressionantes.
Não me ative neste post aos detalhes e objetos contidos na função Exemplo criada, porque não é intenção no momento de se aprofundar em alguns detalhes.
Uma dica legal, para "brincar" um pouco, é criar páginas na linguagem que está familiarizado(php, asp, asp.net,etc...) que recebam parâmetros na url. Faça referência a esta página na chamada da função na index.html passando os parâmetros que desejar.
Na página chamada você poderá abrir conexão e "puxar" dados de um Database qualquer, dentre muitas outras coisas.
E tudo isso pode ser feito sem que o usuário que está acessando a index.html perceba, pois não há refresh de página.
Bom, está aí um exemplo básico. Espero que seja útil a muitos que estão iniciando e espero ir aumentando a complexidade com todos, em todos os posts deste blog.
Um grande abraço a todos!!!
Poxa vida, parabéns, foi simples e objetivo, deu para entender perfeitamente.
ResponderExcluirValeu...^^