Como funciona o AJAX?

Qual é a essência do AJAX? Por exemplo, quero ter um link na minha página de forma que, quando um usuário clicar nesse link, algumas informações sejam enviadas ao meu servidor sem recarregar a página atual. Isso é AJAX?

Consegui obter esse comportamento usando isoframes. Em mais detalhes coloquei um link (digamos uma pequena imagem) em um pequeno isoframe. Quando o usuário clica neste link, o navegador recarrega apenas a página no isoframe.

No entanto, acho que não é uma forma elegante de atingir a meta. Acho que tenho que usar AJAX. Como funciona? O uso de XHTML pode resolver o problema considerado de uma maneira elegante? Ou preciso usar JavaScripts?

Eu não preciso de muito. Só quero um pequeno link que (após clicar) envia algumas informações para o servidor. Digamos que eu tenha uma "imagem de estrela" perto de uma mensagem. Se um usuário clicar na estrela (ele gosta da mensagem), a estrela muda de cor e meu banco de dados de atualização do servidor (para lembrar que o usuário gostou da mensagem).

Se você é totalmente novo em AJAX (que significa Asynchronous Javascript And XML), a entrada AJAX na wikipedia é um bom ponto de partida:

Como DHTML e LAMP, AJAX não é uma tecnologia em si, mas um grupo de tecnologias. AJAX usa uma combinação de:

• HTML e CSS para marcar e estilizar informações.
• O DOM acessado com JavaScript para exibir e interagir dinamicamente com as informações apresentadas.
• Um método para trocar dados de forma assíncrona entre o navegador e o servidor, evitando recarregamentos de página. O objeto XMLHttpRequest (XHR) geralmente é usado, mas às vezes um objeto IFrame ou uma tag adicionada dinamicamente é usada em seu lugar.
• Um formato para os dados enviados ao navegador. Os formatos comuns incluem XML, HTML pré-formatado, texto simples e JavaScript Object Notation (JSON). Esses dados podem ser criados dinamicamente por alguma forma de script do lado do servidor.

Como você pode ver, de um ponto de vista puramente tecnológico, não há nada realmente novo aqui. A maioria das peças AJAX já estavam lá em 1994 (1999 para o XMLHttpRequestobjeto). A verdadeira novidade era usar essas peças em conjunto, como o Google fez com o GMail (2004) e o Google Maps (2005). Na verdade, ambos os sites contribuíram fortemente para a promoção do AJAX.

Uma imagem que vale mais que mil palavras, abaixo de um diagrama que ilustra a comunicação entre o cliente e o servidor remoto, bem como as diferenças entre os aplicativos clássicos e AJAX:

Para a parte laranja, você pode fazer tudo manualmente (com o XMLHttpRequestobjeto) ou pode usar bibliotecas JavaScript famosas como jQuery , Prototype , YUI , etc. para "AJAXify" no lado do cliente de seu aplicativo. Essas bibliotecas têm como objetivo ocultar a complexidade do desenvolvimento de JavaScript (por exemplo, a compatibilidade entre navegadores), mas pode ser um exagero para um recurso simples.

No lado do servidor, alguns frameworks também podem ajudar (por exemplo, DWR ou RAJAX se você estiver usando Java), mas tudo que você precisa fazer é basicamente expor um serviço que retorna apenas as informações necessárias para atualizar parcialmente a página (inicialmente como XML / XHTML - o X em AJAX - mas JSON é frequentemente o preferido hoje em dia).

A essência do AJAX é esta:

Suas páginas podem navegar na web e atualizar seu próprio conteúdo enquanto o usuário faz outras coisas .

Ou seja, seu javascript pode enviar solicitações GET e POST assíncronas (geralmente por meio de um XMLHttpRequestobjeto) e, em seguida, usar os resultados dessas solicitações para modificar sua página (por meio da manipulação do Document Object Model ).

O AJAX normalmente envolve o envio de solicitações HTTP do cliente para o servidor e o processamento da resposta do servidor, sem recarregar a página inteira. (De forma assíncrona).

Javascript geralmente faz o envio e recebe a resposta de dados do servidor (tradicionalmente XML, muitas vezes outros formatos menos verbosos como JSON)

O Javascript então pode atualizar o DOM da página dinamicamente para atualizar a visualização do usuário.

Portanto, 'Asychronous Javascript And XML'.

Existem outras opções para atualizar a visualização do usuário sem recarregar a página, coisas como Flash e Applets, mas essas não parecem boas soluções para o seu caso. Parece que o Javascript é o caminho a percorrer. Existem muitos bons suportes de biblioteca, como jQuery como é usado neste site, então você não precisa realmente escrever muito Javascript.

Ajax é mais do que recarregar apenas uma parte da página. Ajax significa Asynchronous Javascript And Xml.

A única parte do Ajax necessária é o objeto XMLHttpRequest do javascript. Você tem que usá-lo para carregar e recarregar uma pequena parte do seu html como um div ou qualquer outra tag.

Leia esse exemplo e você será profissional antes do que pensa!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX significa Asynchronous Javascript and XML. AJAX oferece suporte a atualizações parciais de páginas sem a necessidade de postar a página inteira de volta no servidor.

Existem muitas opções para AJAX. Os dois mais notáveis ​​(indiscutivelmente) são ASP.NET AJAX da Microsoft (anteriormente Atlas) e jQuery.

ASP.NET AJAX é relativamente fácil de configurar se você já estiver familiarizado com ASP.NET. jQuery é bom se você já conhece javascript, e permite um controle muito granular sobre a consulta e atualização de sua página.

HTH

Se você estiver interessado, a IBM tem uma série de 10 (possivelmente mais) partes do Ajax: Mastering Ajax parte 1

Embora com alguns anos agora seja uma boa introdução, (mesmo que você apenas leia a primeira parte!)

Acho que toda a série deveria ser listada aqui , embora o site esteja um pouco lento para mim no momento ...

Resumo:

Ajax, que consiste em HTML, tecnologia JavaScript ™, DHTML e DOM, é uma abordagem excelente que ajuda a transformar interfaces da Web desajeitadas em aplicativos Ajax interativos. O autor, um especialista em Ajax, demonstra como essas tecnologias funcionam juntas - de uma visão geral a uma aparência detalhada - para tornar o desenvolvimento da Web extremamente eficiente uma realidade fácil. Ele também revela os conceitos centrais do Ajax, incluindo o objeto XMLHttpRequest.

isso é ajax. você não pode usar ajax sem javascript. você deve olhar para jquery e exemplos de protótipo para ter uma idéia de uso.

O que você está tentando fazer é tecnicamente ajax. Ajax cria transações de fragmento xhtml para atualizar seções de uma página. Javascript torna essas solicitações de recebimento legais e organizadas.