[xanburzum]

O que é AJAX ???

AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais tarde por diversas associações.

Descrição

AJAX não é somente um novo modelo, é também uma iniciativa na construção de aplicações Web mais dinâmicas e criativas. AJAX não é uma tecnologia, mas um conjunto de tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX incorpora em seu modelo:

* Apresentação baseada em padrões, usando XHTML e CSS;
* Exposição e interação dinâmica usando o DOM;
* Intercâmbio e manipulação de dados usando XML e XSLT;
* Recuperação assíncrona de dados usando o objeto XMLHttpRequest e XMLHttpResponse;
* JavaScript fazendo a junção entre os elementos.

O modelo clássico de aplicação web trabalha assim: a maioria das ações do usuário na interface dispara uma solicitação HTTP para o servidor web. O servidor processa algo, recuperando dados, realizando cálculos, conversando com vários sistemas legados, e então retorna uma página HTML para o cliente. É um modelo adaptado do uso original da Web como um agente de hipertexto, porém o que faz a web boa para hipertexto não necessariamente a faz boa para aplicações de software.

Esta aproximação possui muito dos sentidos técnicos, mas não faz tudo que um usuário experiente poderia fazer. Enquanto o servidor está fazendo seu trabalho, o que o usuário estará fazendo? O que é certo, esperando. E a cada etapa em uma tarefa, o usuário aguarda mais uma vez.

Obviamente, se nós estivéssemos projetando a Web a partir do zero para aplicações, não faríamos com que os usuários esperassem em vão. Uma vez que a interface está carregada, por que a interação do usuário deveria parar a cada vez que a aplicação precisasse de algo do servidor? Na realidade, por que o usuário deveria ver a aplicação ir ao servidor toda vez?

A maior vantagem das aplicações AJAX é que elas rodam no próprio navegador web.

O desenvolvimento do AJAX foi muito importante para o desenvolvimento da Web 2.0 a partir de 2005, levando à Internet funções inesperadas, que passariam por ficção há pouco tempo atrás.
[editar] Os quatro princípios de Ajax

O modelo clássico de aplicação baseado em páginas está relacionado com muitas das estruturas que nós usamos, e também em nossas maneiras de pensar. Vamos fazer uma análise de alguns minutos para descobrir o que são estas suposições essenciais e como necessitamos repensar estas idéias para entendermos Ajax suficientemente.
[editar] O navegador hospeda uma aplicação, e não conteúdo

Numa aplicação web clássica baseada em páginas, o navegador é efectivamente um terminal burro. Ele não sabe nada sobre o que o utilizador está realmente realizando em suas ações conseqüentes. Todas essas informações são retidas no servidor web, tipicamente na sessão do utilizador. Sessões de utilizador no lado servidor são comuns atualmente. Se a aplicação foi escrita em PHP, Plataforma Java, .NET, Ruby on Rails ou outra linguagem utilizada no desenvolvimento de aplicações para Web, a sessão no lado servidor faz parte da API padrão, assim como o controle de solicitações, respostas, e tipos de conteúdo (MIME).

Quando o utilizador entra ou de outra maneira inicia uma sessão, vários objetos são criados no servidor, representando, por exemplo, a cesta de compras e as credenciais de cliente do utilizador. Ao mesmo tempo, a página inicial é servida ao navegador, em um fluxo de marcações HTML que mistura um anúncio de apresentação padrão e dados específicos do utilizador juntos com o conteúdo, como por exemplo, uma lista de itens exibidos recentemente.

Toda vez que o utilizador interage com o sítio, um outro documento é enviado para o navegador, contendo a mesma mistura de cabeçalhos e dados. O navegador retira o documento anterior e exibe o novo, porque ele não sabe que o outro documento produz um resultado muito semelhante.

Quando o utilizador efetua a saída ou fecha o navegador, a aplicação sai e a sessão é destruída. Qualquer informação que o utilizador necessite ver na próxima vez que ele entrar terá que ser passada para a camada de persistência de dados em cada visita. Já em uma aplicação AJAX, parte da lógica da aplicação é movida para o navegador.

Neste novo cenário, quando o utilizador entra, um documento mais complexo é entregue ao navegador, uma grande proporção do qual é código JavaScript. Este documento permanecerá com o utilizador por toda a sessão, ainda que ele resolva provavelmente alterar sua aparência consideravelmente, enquanto o utilizador está interagindo com ele. Ele sabe como responder às informações inseridas pelo utilizador e é capaz de decidir se manipula a entrada do utilizador ele mesmo ou se passa uma solicitação para o servidor web (o qual tem acesso ao banco de dados do sistema e outros recursos), ou ainda, se faz uma combinação de ambos.

Ele também pode armazenar o estado, porque o documento continua persistindo sobre toda a sessão do usuário. Por exemplo, o conteúdo de uma cesta de compras pode ser armazenado no navegador, em vez de ser armazenado na sessão do servidor.
[editar] O servidor fornece dados, e não conteúdo

Como observamos, uma aplicação web clássica oferece a mesma mistura de alegorias, conteúdos e dados em todos os passos. Quando nosso usuário adiciona um item na cesta de compras, tudo que precisamos realmente é responder com o valor atualizado da cesta ou informar se alguma coisa deu errado.

Um carrinho de compra baseado em Ajax pode comportar-se de forma mais inteligente, por meio de remessas de solicitações assíncronas ao servidor. O cabeçalho, o histórico de navegação, e outras características do layout da página estão todas carregadas, portanto o servidor necessita enviar de volta somente os dados relevantes.

Uma aplicação AJAX poderia fazer isto de vários modos, como por exemplo, devolver um fragmento de JavaScript, um fluxo de texto simples, ou um pequeno documento XML. Nós mostraremos em detalhes as vantagens e desvantagens de cada um, mais a frente. É suficiente dizer por agora que qualquer um destes formatos será muito menor que a misturada de informações devolvida pela aplicação web clássica.

Em uma aplicação Ajax, o tráfego tem sua maior intensidade no início, com um largo e complexo cliente sendo entregue em uma única explosão, quando o usuário entra. As comunicações subseqüentes com o servidor são muito mais eficientes, de qualquer forma. Para uma aplicação breve, o tráfego cumulativo pode ser menor em uma aplicação de página web convencional. Mas conforme o tamanho médio do tempo de interação aumentar, o custo de largura de banda da aplicação Ajax torna-se menor do que sua aplicação clássica equivalente.
[editar] A interação do utilizador com a aplicação pode ser flexível e contínua

Um navegador web oferece duas maneiras de enviar entradas de dados para um outro computador: com os enlaces e formulários HTML.

Os hyperlinks podem ser carregados com parâmetros CGI (Common Gateway Interface – Interface de Comunicação Comum) apontando para páginas dinâmicas ou servlets. Eles podem estar vinculados com imagens e folhas de estilo (CSS) para oferecer uma pequena melhoria na interface, como por exemplo, definir efeitos quando o mouse estiver sobre eles.

Os controles de formulário oferecem um subconjunto básico de componentes padrões de interface com o usuário: caixas de texto, caixas de checagem e botões de rádio, além de listas de seleção. Entretanto estes controles não são suficientes. Não existem controles de seleção em árvores, grades para edição, ou caixas de combinação. Os formulários, assim como os hyperlinks, apontam para URLs residentes no servidor.

Alternativamente, os hyperlinks e os controles de formulário podem apontar para funções JavaScript. Isto é uma técnica comum em páginas web para prover uma validação de formulário rudimentar em JavaScript, verificando por campos vazios, valores fora de intervalo, e assim por diante, antes de submeter os dados para o servidor. Estas funções JavaScript existem somente enquanto a própria página existe e é substituída quando a página efetuar o seu envio.

Enquanto a página está sendo enviada, o usuário aguarda a sua resposta. A página anterior pode ainda estar visível por algum tempo, e o navegador pode até permitir que o usuário clique em qualquer um dos links visíveis, mas se assim for feito, produzirá resultados imprevisíveis e até entornar em uma confusão com a sessão no servidor. O usuário está normalmente aguardando a página ser atualizada que, frequentemente, possuem quase que as mesmas informações que lhes foram apanhadas instantes atrás. Adicionando um par de calças à cesta de compras não é razoável modificar as categorias em um nível acima por “roupas masculinas”, “roupas femininas”, “infantis” e “acessórios”.

Voltemos ao exemplo do carrinho de compras novamente. Devido ao facto de que nosso carrinho de compras em Ajax pode enviar dados assíncronamente, os utilizadores podem soltar os objectos dentro dele tão rápido quanto eles podem clicar. Se o código de nosso carrinho no lado cliente for robusto, ele tratará esta tarefa facilmente, e os usuários podem continuar com o que eles estão fazendo.

É claro que não existe nenhum carrinho para colocarmos as coisas, somente um objeto em sessão no servidor. Mas os usuários não querem saber sobre objetos de sessão enquanto estão fazendo compras, e a metáfora do carrinho provê uma descrição do mundo real mais confortável do que está acontecendo. Troca de contextos entre a metáfora e o acesso direto ao computador é uma distração para usuários. Aguardar uma página ser atualizada levará o usuário à realidade de estar sentado em um computador por um curto tempo, e nossa implementação em Ajax evita que isto ocorra. Fazer compras é uma atividade transitória, mas se considerarmos um domínio de negócios diferente, por exemplo, um cenário de assistência e atendimento intensivo ou uma tarefa de planejamento complexa, então o custo de interrupção da seqüência de trabalho em alguns poucos segundos, com uma atualização de página, é algo inviável.

A segunda vantagem de Ajax é que podemos associar eventos a um maior número de ações do usuário. Os conceitos mais sofisticados de interface com o usuário, assim como "arrastar e soltar", se tornam praticáveis, trazendo as experiências dessas interfaces em pé de igualdade com os controles de aplicações desktop. Da perspectiva de usabilidade, esta liberdade não é importante somente porque ela permite exercer nossa imaginação, mas porque ela nos permite combinar a interação do usuário e as solicitações ao servidor de maneira mais completa.

Para comunicar com o servidor em uma aplicação web clássica, necessitamos clicar em um hyperlink ou submeter um formulário, e então aguardar. No entanto, este método interrompe a interação com o usuário. Em contraste, a possibilidade de se comunicar com o servidor em resposta a um movimento ou arraste do mouse, ou até quando digitamos, habilita o servidor a trabalhar juntamente com o usuário. O Google Suggest é um exemplo muito simples e efetivo disto: responder às teclas pressionadas enquanto ele digita dentro da caixa de pesquisa, e então, comunicar com o servidor para recuperar e exibir uma lista de possíveis finalizações para as expressões, baseada nas pesquisas feitas por outros usuários do mecanismo de busca em todo o mundo.
[editar] Real codificação requer disciplina

Neste momento, as clássicas aplicações web fazem uso de JavaScript em certas ocasiões, para adicionar características avançadas e exageradas de um programa, agregando-as nas páginas. O modelo baseado em páginas previne qualquer uma destas melhorias que consista em um atraso longo demais, o qual limita as utilidades para as quais elas podem ser oferecidas. Isto fez com que JavaScript recebesse injustamente, uma reputação de algo banal – por má sorte da linguagem – e não sendo bem vista pelos desenvolvedores sérios.

Codificar uma aplicação Ajax é algo completamente diferente. O código que você fornece quando os usuários iniciam a aplicação deve executar até que eles encerrem-na, sem interrupção, sem diminuição de velocidade, e sem produção de escapes de memória. Se estivermos mirando no mercado de aplicações poderosas, então temos em vista muitas horas de intenso uso. Para atingirmos este objetivo, devemos escrever códigos de alto-desempenho, e manuteníveis, usando a mesma disciplina e entendimento que é aplicado com sucesso às camadas do servidor.

A base de código será tipicamente mais ampla que qualquer código escrito para uma aplicação web clássica. Boas práticas na construção da base de código se tornam muito importantes. O código deve tornar-se, de preferência, responsabilidade de uma equipe do que apenas um indivíduo, criando edições de manutenibilidade, separações de interesses, e estilos e padrões de codificação comum. Uma aplicação Ajax, portanto, é uma porção de código funcionalmente complexa que comunica eficientemente com o servidor enquanto o usuário continua com seu trabalho. Ela é claramente uma descendência da aplicação clássica baseada em páginas.

Esse tutorial cria um aplicativo exemplo básico que usa recursos do AJAX do ASP.NET.Você pode ler mais sobre recursos do AJAX no ASP.NET, o técnico problemas esses recursos são projetados para resolver, e que os componentes do AJAX importantes são nos seguintes documentos introdutórios:

*

ASP.NET AJAX Overview
*

Adicionando AJAX e recursos de cliente

Neste tutorial você irá criar um aplicativo que exibe páginas de dados do funcionário a partir do banco de dados de exemplo AdventureWorks.O aplicativo usa o Controlarar de UpdatePanel para atualizar somente a parte da página que foi alterado, sem o flash de página que ocorre com um postback.Isso é conhecido como uma atualização parcial de página.O aplicativo de exemplo usa também o controle UpdateProgress para exibir uma mensagem de status enquanto está processando a atualização parcial de página.
Pré-requisitos

Para implementar os procedimentos no seu próprio ambiente de desenvolvimento você precisa:

*

Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express Edition.
*

Um site da Web ASP.NET habilitado para AJAX.
*

O banco de dados de exemplo AdventureWorks.Você pode Baixar e instalar o banco de dados AdventureWorks de http://go.microsoft.com/fwlink/?linkid=67325 do Centralizar de Baixar da Microsoft.(Procure por "Exemplos SQL Server 2005 e bancos de dados de exemplo (dezembro de 2006)").

Criando um site da Web ASP.NET

Sites da Web que você cria no ASP.NET por padrão incluem suporte para a funcionalidade do AJAX.
Walkthrough: Criando um site da Web ASP.NET com AJAX-ativado

1. Inicie o Visual Studio
2. No menu Arquivo, clique em Novo Site da Web.

A caixa de diálogo New Web Site é exibida.

3. Em Modelos Instalados do Visual Studio, selecione ASP.NET Web Site.
4. Insira um local e um idioma e em seguida, clique em OK.

Adicionar um controle UpdatePanel a uma página da Web

Depois de criar um site da Web do ASP.NET, você crie uma página da Web do ASP.NET que inclui um Controlarar UpdatePanel.Antes de adicionar um Controlarar de UpdatePanel para a página, você deve adicionar um Controlarar de ScriptManager.O Controlarar de UpdatePanel depende do Controlarar de ScriptManager para gerenciar atualizações de página parcial.
Crie uma nova página da Web do ASP.NET.

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no nome do site, e clique Adicionar Novo Item.

A caixa de diálogo Add New Item é exibida.

2. Em Modelos instalados do Visual Studio, escolha Formulário Web.
3. Nomeie a nova página Employees.aspx e desmarque a caixa de seleção Colocar o código em arquivo separado.
4. Selecione o idioma que deseja usar.
5. Clique em Adicionar.
6. Alternar para modo Design.
7. Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.
8. Arraste um controle UpdatePanel da caixa de ferramentas e solte-o abaixo do controle ScriptManager.


Adicionando conteúdo a um Controle UpdatePanel

O controle UpdatePanel executa atualizações parciais de página e identifica o conteúdo que é atualizado independentemente do restante da página.Nesta parte do tutorial, você adicionará um controle vinculado a dados que exiba dados de banco de dados AdventureWorks.
Adicionando conteúdo a um Controle UpdatePanel

1. Na guia Dados da caixa de ferramentas, arraste um controle GridView para a área editável do controle UpdatePanel.
2. No menu Tarefas GridView, clique em Formatar automaticamente.
3. No painel Formatar automaticamente, em Selecionar um esquema, selecione Colorido e em seguida, clique em OK.
4. No menu Tarefas GridView, selecione < Nova fonte de dados > da lista Escolher fonte de dados.

O assistente Configração da Fonte de Dados é exibido.

5. Em O aplicativo obterá dados de, selecione Banco de Dados e, em seguida, clique em OK.
6. No assistente Configurar Fonte de Dados, para a etapa Escolha a Conexão de Dados, configure uma conexão ao banco de dados AdventureWorks e, em seguida, clique em Avançar.
7. Para a etapa Configurar a Declaração Select, selecione Especificar uma instrução SQL personalizada ou procedimento armazenado e, em seguida, clique em Avançar.
8. Na guia SELECT da etapa Definir Declaração personalizada ou Procedimentos Armazenados, digite a seguinte instrução SQL:

CÓDIGO

    SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName

9. Clique em Next.
10. Clique em Finish.
11. No menu Tarefas GridView, selecione a caixa de seleção Habilitar paginação.
12. Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

Observe que não há nenhuma página flash quando você seleciona diferentes páginas de dados.Isso ocorre porque a página não está executando um postback e atualizando a página inteira sempre.

Adicionando um Controle UpdateProgress à Página

O controle UpdateProgress exibe uma mensagem de status enquanto o novo conteúdo para um controle UpdatePanel está sendo solicitado.
Adicionando um Controle UpdateProgress à Página

1. Da guia Extensões Ajax da caixa de ferramentas, arraste um controle UpdateProgress até a página e solte-o sob o controle UpdatePanel.
2. Selecione o controle UpdateProgress e na janela Propriedades, defina a propriedade AssociatedUpdatePanelID como UpdatePanel1.

Isto associa o controle UpdateProgress com o controle UpdatePanel que você adicionou anteriormente.

3. Na área editável do Controlarar UpdateProgress, tipo obtendo funcionários... .
4. Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

Se houver um atraso enquanto a página executa a consulta SQL e retorna os dados, o controle UpdateProgress exibe a mensagem que você inseriu no controle UpdateProgress.

Adicionando um Atraso ao Aplicativo de Exemplo

Se seu aplicativo atualiza cada página de dados rapidamente, você não poderá ver o conteúdo do controle UpdateProgress na página.O controle UpdateProgress suporta uma propriedade DisplayAfter que permite que você defina um atraso antes do controle ser exibido.Isso impede que o controle fique piscando no navegador se a atualização ocorrer muito rápido.Por padrão, o atraso é definido como 500 milissegundos (0,5 segundo), o que significa que o controle UpdateProgress não será exibido se a atualização levar menos da metade de um segundo.

Em um ambiente de desenvolvimento, você pode adicionar um atraso falso ao seu aplicativo para certificar-se que o controle UpdateProgress esteja funcionando conforme o esperado.Esta é uma etapa opcional e é somente para testar seu aplicativo.
Adicionando um Atraso ao Aplicativo de Exemplo

1. Dentro do controle UpdatePanel, selecione o controle GridView.
2. Na janela Propriedades, clique no botão Eventos.
3. Clique duas vezes no evento PageIndexChanged para criar um manipulador de eventos.
4. Adicione o seguinte código para o manipulador de eventos PageIndexChanged para criar um atraso de três segundos artificialmente:

CÓDIGO

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

#
Observação:

O manipulador para o evento PageIndexChanged introduz intencionalmente um atraso para este tutorial.Na prática, você poderia não introduzir um atraso.Em vez disso, o atraso deve ser o resultado do tráfego do servidor ou do código que demora para processar, como uma consulta ao banco de dados de execução demorada .
#

Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

Porque há agora um atraso de três segundos toda vez que você mover para uma nova página de dados, você poderá ver o controle UpdateProgress.

CÓDIGO

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

Exemplo de uma simples requisição usando XmlHttpRequest, que retorna o conteúdo de uma página do mesmo domínio.

CÓDIGO

// Esta função será chamada pelo componente XmlHttpRequest
function processReqChange ()
{
   var s = 'Status: \t' + request.status + '\n';
   s += 'StatusText: \t' + request.statusText + '\n';
   s += 'ResponseText: \t' + request.responseText;
   // codigo 4 para 'status complete'
   if (request.readyState == 4 && request.status == 200)
       alert(s);
}
// Se o endereco que se deseja acessar assincronamente
// for um script, ele poderá receber parâmetros,
// e uma forma simples de enviar parâmetros é pela própria url
// var url = 'meu_script.php?var1=par1'
// Se você tentar acessar uma página de outro domínio (e.g: http://mozilla.org)
// o firefox vai levantar uma exeção, "Permission denied".
var url = 'index.html';
var request = new XMLHttpRequest();
request.onreadystatechange = processReqChange;
request.open("GET", url, true);
request.send("");

Outro exemplo

Arquivo ajax.js:

CÓDIGO

function pagina(url){
    var mreq;
    // Procura o componente nativo do Mozilla/Safari para rodar o AJAX
    if(window.XMLHttpRequest){
        // Inicializa o Componente XMLHTTP do Mozilla
        mreq = new XMLHttpRequest();
    // Caso ele não encontre, procura por uma versão ActiveX do IE
    }else if(window.ActiveXObject){
        // Inicializa o Componente ActiveX para o AJAX
        mreq = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        // Caso não consiga inicializar nenhum dos componentes, exibe um erro
        alert("Seu navegador não tem suporte a AJAX.");
    }

    // Carrega a função de execução do AJAX
    mreq.onreadystatechange = function() {
        if(mreq.readyState == 1){
            // Quando estiver "Carregando a página", exibe a mensagem
            document.getElementById('minha_div').innerHTML = 'Carregando';            
        }else if(mreq.readyState == 4){
            // Quando estiver completado o Carregamento
            // Procura pela DIV com o id="minha_div" e insere as informações
            document.getElementById('minha_div').innerHTML = mreq.responseText;
        }
    };
    // Envia via método GET as informações
    mreq.open("GET",url,true);
    mreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1")
    mreq.send(null);
}

Arquivo index.html:

CÓDIGO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Exemplo de AJAX</title>
    <script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<center>
<h2><a href="java script:pagina('pagina.html')">Clique aqui</a> para Abrir a página em AJAX</h2>
<div id="minha_div" style="border:1px #CCCCCC solid;width:500px;height:300px;">Conteúdo</div>
</center>
</body>
</html>

Arquivo pagina.html:

CÓDIGO

<h3>P&aacute;gina de Teste Carregada</h3>
Aqui vai texto,  imagens, conte&uacute;do em geral.

No Javascript (AJAX) tem toda a explicação do que cada linha de comando faz, abra os arquivos ajax.js e index.html no DreamWeaver por exemplo, e confira, já o HTML é bem simples, a unica coisa que você inicialmente precisa fazer é chamar dentro da TAG <HEAD> do HTML o arquivo esse ajax.js, assim:

CÓDIGO

<script src="http://www.webartz.com.br/wp-admin/ajax.js" type="text/javascript"></script>

E depois ter a DIV onde será carregada a página por AJAX, chamada "minha_div", e depois crie um link com a seguinte URL: java script:pagina(’pagina.html’); onde esse "pagina.html" será o arquivo a ser carregado.

[EuSouAmador]

Muito bom seu artigo!