corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

Introdução ao Ajax para aplicações Web PHP

Este documento oferece uma introdução ao Ajax e demonstra alguns dos recursos do NetBeans IDE que permitem que você programe de forma mais rápida e eficaz ao trabalhar com tecnologias relacionadas ao Ajax. Enquanto aprende sobre a funcionalidade de baixo nível do Ajax, você constrói um aplicativo simples que usa autocompletar em um campo de texto. O conteúdo aqui foi adaptado do artigo e do aplicativo de amostra de Greg Murray Using Ajax with Java Technology.

Ajax significa Asynchronous JavaScript and XML. Na essência, o Ajax é uma forma eficaz para uma aplicação Web manipular interações do usuário com uma página da Web: uma forma que reduz a necessidade de fazer uma atualização da página ou uma recarga completa da página para cada interação do usuário. Isso permite um comportamento detalhado (similar ao de um aplicativo de área de trabalho ou aplicação Web baseada em plugin) no uso de um navegador. As interações do Ajax são manipuladas assincronamente em segundo plano. Quando isso acontece, um usuário pode continuar trabalhando com a página. As interações do Ajax são iniciadas pelo código JavaScript. Quando a interação do Ajax é concluída, o JavaScript atualiza o código-fonte HTML da página. As alterações são feitas imediatamente sem requerer uma atualização da página. As interações do Ajax podem ser usadas para fazer coisas como validar entradas do formulário (enquanto o usuário as está fazendo) usando lógica do lado do servidor, recuperar dados detalhados do servidor, atualizar dinamicamente os dados em uma página e enviar formulários parciais a partir da página.

Conteúdo

O conteúdo desta página se aplica ao IDE NetBeans 6.9 e 7.0

Para concluir este tutorial, você precisa dos seguintes recursos e softwares.

Software ou recurso Versão necessária
NetBeans IDE, pacote PHP 6.7, 6.8 ou 6.9
Java Development Kit (JDK) 6
Mecanismo PHP PHP5
Servidor Web Apache 2.2

Notas:

  • O ambiente de desenvolvimento do PHP geralmente é configurado usando-se um pacote *AMP, dependendo do seu sistema operacional. Isso inclui o mecanismo PHP e o servidor Web Apache. Para obter instruções sobre como configurar o ambiente, consulte a Trilha de aprendizado do PHP.
  • Este tutorial presume que você saiba trabalhar nas várias tecnologias que ele emprega (por ex., HTML, CSS, JavaScript e PHP). Ele tenta fornecer uma visão geral da funcionalidade fornecida pelo código, mas não explica como o código funciona linha por linha.
  • Se você precisar comparar seu projeto com uma solução que funciona, baixe o aplicativo de amostra. Utilize o assistente Novo projeto do IDE (Ctrl-Shift-N; Ä‚Ë�Ĺšďż˝-Shift-N no Mac) e selecione o PHP com tipo de projeto Códigos-fonte existentes. No assistente, aponte para os códigos-fonte de download no computador.

Visão geral do aplicativo

Imagine uma página da Web em que um usuário pode procurar informações sobre compositores de música. A página inclui um campo onde o usuário pode indicar o nome do compositor. No aplicativo de exemplo, o campo de entrada possui um recurso autocompletar. Em outras palavras, o usuário pode digitar parte do nome do compositor, e a aplicação Web tenta completar o nome, listando todos os compositores cujo nome ou sobrenome começa com os caracteres indicados. O recurso autocompletar poupa o usuário de ter que lembrar o nome completo do compositor e pode fornecer um caminho mais intuitivo e direto para a informação procurada.

Aplicação de amostra exibida no navegador

Implementar autocompletar em um campo de pesquisa é algo que pode ser feito por meio do Ajax. O Ajax funciona através do uso de um objeto XMLHttpRequest para passar solicitações e respostas assincronamente entre o cliente e o servidor. O diagrama seguinte ilustra o fluxo do processo da comunicação que acontece entre o cliente e o servidor.

Diagrama de fluxo do processo Ajax

O fluxo do processo do diagrama pode ser descrito pelas seguintes etapas:

  1. O usuário aciona um evento, por exemplo, liberando uma tecla ao digitar um nome. Isso resulta em uma chamada do JavaScript a uma função que inicializa um objeto XMLHttpRequest.
  2. O objeto XMLHttpRequest é configurado com um parâmetro de solicitação que inclui o ID do componente que acionou o evento, e qualquer valor que o usuário indicou. O objeto XMLHttpRequest faz uma solicitação assíncrona ao servidor Web.
  3. No servidor Web, um objeto tal como um servlet ou ouvinte manipula a solicitação. Os dados são recuperados do armazenamento de dados, e é preparada uma resposta contendo os dados do formulário em um documento XML.
  4. Finalmente, o objeto XMLHttpRequest recebe os dados XML usando uma função de retorno de chamada, processa-o e atualiza o HTML DOM (Document Object Model) para exibir a página que contém os novos dados.

Este tutorial demonstra como construir o cenário de autocompletar, seguindo o fluxo do processo indicado no diagrama acima. Primeiro você cria os arquivos do lado do cliente para a apresentação e a funcionalidade necessária para gerar o objeto XMLHttpRequest. Em seguida, defina o lado do servidor criando o armazenamento de dados e a lógica comercial usando tecnologia baseada em PHP. Finalmente, você retorna ao lado do cliente e implementa callback(), e outra funcionalidade JavaScript para atualizar o HTML DOM.


Programando o lado do cliente: Parte 1

Comece criando um novo projeto de aplicativo PHP no IDE.

  1. Escolha Arquivo > Novo projeto. Em Categorias, selecione PHP. Em Projetos, selecione Aplicativo PHP e, em seguida, clique em Próximo.
  2. Na etapa 2: Nome e localização, nomeie o projeto MyAjaxApp. O campo Pasta de códigos fonte permite que você especifique o local do projeto no seu computador. Deixe as outras opções como padrão e clique em Próximo.
    Assistente para Novo projeto PHP - Painel Nome e localização
  3. Na etapa 3: no painel Configuração de execução, especifique como você deseja implantar o aplicativo. Se tiver definido o ambiente de desenvolvimento do PHP configurando um pacote *AMP, deverá selecionar Site da Web local da lista suspensa e especificar o URL do projeto, como ele aparecerá em um navegador.
  4. Selecione a opção Copiar arquivos da pasta de códigos-fonte para outra localização. Em seguida, no campo Copiar para pasta, digite o caminho para o local de deployment no servidor. (No Apache, é o diretório htdocs padrão.)
    assistente Novo projeto PHP: painel Executar configuração
  5. Clique em Terminar. O IDE cria a pasta do projeto em seu sistema de arquivos e o projeto se abre no IDE.

    Também é possível utilizar o assistente Projeto para adicionar suporte à estrutura Symphony para o projeto (fornecido na etapa 4 do assistente).

    Uma página de índice index.php padrão é gerada e aberta no editor do IDE. Além disso, seu projeto aparece na janela Projetos.

    Janela Projeto contendo projeto recém criado
  6. Antes de começar a codificar, tente rapidamente executar o aplicativo para garantir que a configuração entre o IDE, seu servidor e o navegador esteja configurada corretamente.

    No editor do IDE, adicione uma instrução echo à página de índice: 
    <?php
    // coloque o código aqui
    echo "<h2>Olá mundo!</h2>";
?>
  7. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Executar. O IDE abre o navegador padrão e exibe a mensagem Olá mundo que você acabou de criar em index.php.

    Nota: se tiver dificuldade em configurar o projeto ou estabelecer comunicação entre o IDE, o servidor e o navegador, consulte Configurando um projeto PHP para uma descrição mais aprofundada. A Trilha de aprendizado do PHP pode oferecer mais informações sobre como configurar o ambiente.

Usando o editor HTML

Paleta exibindo elementos HTML

Agora que você tem certeza de que seu ambiente está configurado corretamente, comece desenvolvendo a interface de autocompletar que será vista pelos usuários. Como a página de índice que criaremos não requer nenhum elemento de script do lado do servidor, comece criando uma página HTML e configurando como ponto de entrada do aplicativo.

Uma das vantagens do uso de um IDE é que o editor em que você trabalha normalmente fornece autocompletar de código, o que, se você aprender a aplicar quando codifica, pode aumentar rapidamente a sua produtividade. O editor do IDE geralmente se adapta à tecnologia que você está usando, assim se você estiver trabalhando em uma página HTML, ao pressionar a combinação de teclas de autocompletar de código (Ctrl-Espaço) serão produzidas sugestões para atributos e marcas HTML. Como será mostrado mais tarde, o mesmo se aplica a outras tecnologias, tais como CSS e JavaScript.

Um segundo recurso que você pode usar é a Paleta do IDE. A Paleta fornece modelos fáceis de usar para elementos que são aplicados comumente na tecnologia em que você está codificando. Você simplesmente clica em um item e arrasta-o para um local no arquivo aberto no editor de código-fonte.

Você pode visualizar ícones grandes (como exibido aqui) clicando com o botão direito do mouse na Paleta e escolhendo Mostrar ícones grandes.


  1. Na janela Projetos, clique com o botão direito do mouse no nó MyAjaxApp do projeto e selecione Novo > Arquivo HTML.
  2. No assistente de arquivo HTML, nomeie o arquivo index e, em seguida, clique em Terminar. O novo arquivo index.html é aberto no editor.
  3. Substitua o conteúdo existente para os arquivos como a seguir. 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Auto-Completion using AJAX</title>
    </head>
    <body>
        <h1>Auto-Completion using AJAX</h1>
    </body>
</html>
  4. Adicione algum texto explicatório para descrever a finalidade do campo de texto. Você pode copiar e colar no texto seguinte no ponto logo abaixo das marcas <h1>: 
    <p>Este exemplo mostra como criar autocompletar em tempo real usando interações Ajax (Asynchronous JavaScript and XML).</p>

<p>No formulário abaixo, indique um nome. Os nomes possíveis a serem completados são exibidos abaixo do formulário. Por exemplo, tente digitar "Bach,&quot "Mozart" ou "Stravinsky," em seguida, clique em uma das seleções para ver os detalhes do compositor.</p>
  5. Adicione um formulário HTML à página. Faça isso usando os elementos listados na Paleta do IDE. Se a Paleta não estiver aberta, escolha Janela > Paleta no menu principal. Em seguida, em Formulários HTML, clique e arraste um elemento Formulário para a página para um ponto abaixo das marcas <p> que você acabou de adicionar. A caixa de diálogo Inserir formulário se abre. Especifique o seguinte:

    • Ação: autocomplete.php
    • Método: GET
    • Nome: autofillform
    Caixa de diálogo Inserir formulário

    Clique em OK. As marcas HTML <form> são inseridas na página que contém os atributos especificados. (GET é aplicado por padrão e, portanto, não é declarado explicitamente.)

  6. Adicione uma tabela HTML à página. Sob a categoria HTML na Paleta, clique em um elemento Tabela e arraste-o para um ponto entre as marcas <form>. A caixa de diálogo Inserir tabela se abre. Especifique o seguinte:

    • Linhas: 2
    • Colunas: 2
    • Tamanho da borda: 0
    • Preenchimento de células: 5
    Caixa de diálogo Inserir tabela
  7. Clique com o botão direito do mouse no Editor de código-fonte e escolha Formatar. Isso limpa o código. Seu formulário agora deve ser semelhante ao abaixo: 
    <form name="autofillform" action="autocomplete.php">
  <table border="0" cellpadding="5">
    <thead>
      <tr>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</form>
  8. Na primeira linha da tabela, digite o seguinte texto na primeira coluna (alterações em negrito): 
    <td><strong>Nome do compositor:</strong></td>
  9. Na segunda coluna da primeira linha, em vez de arrastar um campo Entrada de texto da Paleta, digite o código abaixo manualmente. 
    <input type="text"
    size="40"
    id="complete-field"
    onkeyup="doCompletion();">
    Enquanto digita, tente usar o suporte a autocompletar de código interno do IDE. Por exemplo, digite <i, em seguida, pressione Ctrl-Espaço. Uma lista de opções sugeridas é exibida abaixo do seu cursor, e uma descrição do elemento selecionado aparece em uma caixa acima. De fato, você pode pressionar Ctrl-Espaço a qualquer momento em que estiver codificando no editor de código-fonte para ter acesso às opções possíveis. Além disso, caso só haja uma opção possível, pressionar Ctrl-Espaço completará automaticamente o nome do elemento.
    autocompletar de código exibido no editor de código-fonte
    O atributo onkeyup que você digitou acima aponta para uma função JavaScript chamada doCompletion(). Essa função é chamada toda vez que uma tecla é pressionada no campo de texto do formulário, e mapeia para a chamada JavaScript representada no fluxograma do Ajax acima.
  10. Antes de prosseguir para trabalhar no editor JavaScript, faça com que o novo arquivo index.html substitua o arquivo index.php como ponto de entrada do aplicativo.

    Para fazê-lo, clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Propriedades. Selecione a categoria Executar configuração e, em seguida, insira index.html no campo Arquivo de índice. Janela Propriedades do projeto - Executar configuração
  11. Clique em OK para salvar as alterações e sair da janela Propriedades do projeto.
  12. Execute o projeto para ver como é em um navegador. Clique no botão Executar projeto ( botão Executar projeto ). O arquivo index.html exibe no navegador padrão.
    Página de índice exibida no navegador

Utilizando o editor JavaScript

O novo editor JavaScript do IDE fornece muitos recursos de edição avançados, tais como autocompletar de código inteligente, realce de semântica, renomeação instantânea e recursos de refatoração, assim como muitos outros recursos. Consulte Editando JavaScript para uma introdução e http://wiki.netbeans.org/JavaScript para uma especificação detalhada.

O autocompletar de código JavaScript é automaticamente fornecido quando você codifica em arquivos .js, assim como em marcas <script> quando trabalha com outras tecnologias (ou seja, HTML, RHTML, JSP, PHP). Quando você usa o editor JavaScript, o IDE fornece informações sobre compatibilidade do navegador, dependendo dos tipos de navegador e as versões especificadas no painel Opções de JavaScript. Abra o painel Opções de JavaScript, escolhendo Ferramentas > Opções (NetBeans > Preferências no Mac), em seguida, Miscelânea > JavaScript.

Painel Opções de JavaScript

O IDE fornece suporte imediato para Firefox, Internet Explorer, Safari e Opera. No painel Opções de JavaScript, você também pode especificar a versão do mecanismo JavaScript a qual autocompletar de código se aplica.

Adicione um arquivo JavaScript ao aplicativo e comece a implementar doCompletion().

  1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Novo > arquivo JavaScript. (Se o arquivo JavaScript não estiver listado, escolha Outro. Em seguida, escolha o arquivo JavaScript na categoria Outro no assistente para Novo arquivo.)
  2. Nomeie o arquivo como javascript e clique em Terminar. O novo arquivo JavaScript aparece na janela Projetos e é aberto no editor.
  3. Digite o código abaixo em javascript.js. 
    var req;
var isIE;

function init() {
    completeField = document.getElementById("complete-field");
}

function doCompletion() {
        var url = "autocomplete.php?action=complete&id=" + escape(completeField.value);
        req = initRequest();
        req.open("GET", url, true);
        req.onreadystatechange = callback;
        req.send(null);
}

function initRequest() {
    if (window.XMLHttpRequest) {
        if (navigator.userAgent.indexOf('MSIE') != -1) {
            isIE = true;
        }
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

    O código acima executa uma verificação simples de compatibilidade do navegador para o Firefox 3 e para o Internet Explorer versões 6 e 7). Se desejar incorporar um código mais robusto para questões de compatibilidade, considere usar este script de detecção de navegador disponível em http://www.quirksmode.org.

  4. Volte para index.html e adicione uma referência ao arquivo JavaScript entre os marcadores <head>. 
    <script type="text/javascript" src="javascript.js"></script>

    Você pode alternar rapidamente entre as páginas abertas no editor pressionando Ctrl-Tab.

  5. Insira uma chamada a init() na marca de abertura <body>. 
    <body onload="init()">
    Isso garante que init() é chamada toda vez que a página é carregada.

A função de doCompletion() é:

  • crie uma URL que contenha dados que possam ser reutilizados pelo lado do servidor,
  • inicialize um objeto XMLHttpRequest, e
  • solicite que o objeto XMLHttpRequest envie uma solicitação assíncrona para o servidor.

O objeto XMLHttpRequest é o coração do Ajax e se tornou o padrão de fato para permitir que dados XML sejam passados assincronamente por meio de HTTP. Interação assíncrona implica em que o navegador pode continuar a processar eventos na página depois que a solicitação é enviada. Os dados são passados em segundo plano, e podem ser carregados automaticamente na página exigindo uma atualização da página.

Observe que o objeto XMLHttpRequest é realmente criado por initRequest(), que é chamada por doCompletion(). A função verifica se XMLHttpRequest pode ser entendido pelo navegador e, se for o caso, cria um objeto XMLHttpRequest. Caso contrário, ela verifica ActiveXObject (o XMLHttpRequest equivalente do Internet Explorer 6) e cria um ActiveXObject, se identificado.

Três parâmetros são especificados quando você cria um objeto XMLHttpRequest: uma URL, o método HTTP (GET ou POST), e se a interação é assíncrona ou não. No exemplo acima, os parâmetros são:

  • A URL autocomplete.php e o texto inserido no campo de conclusão pelo usuário: 
    var url = "autocomplete.php?action=complete&id=" + escape(completeField.value);
  • GET, significando que as interações HTTP usam o método GET, e
  • true, significando que a interação é assíncrona: 
    req.open("GET", url, true);

Se a interação for definida como assíncrona, uma função callback deve ser especificada. A função callback dessa interação é definida com a instrução:

req.onreadystatechange = callback;

e uma função callback() deve ser definida mais tarde. A interação HTTP começa quando XMLHttpRequest.send() é chamada. Essa ação mapeia para a solicitação HTTP que é enviada para o servidor Web no fluxograma acima.


Programando o lado do servidor

O NetBeans IDE fornece um suporte abrangente para desenvolvimento na web usando PHP. Você pode configurar o ambiente de desenvolvimento usando um pacote *AMP, que permite que você edite e implante do IDE com rapidez e eficiência. O IDE permite a configuração do ambiente com um servidor local, assim como remotamente, utilizando FTP ou SFTP. Também é possível configurar um depurador externo, como Xdebug, e configurar o teste único com PHPUnit da janela de opções PHP do IDE (Escolha Ferramentas > Opções; NetBeans > Preferências no Mac e, em seguida, selecione a aba PHP.) O editor do PHP fornece recursos de edição padrão como autocompletar de código, realce de sintaxe, ocorrências de marca, refatoração, modelos de código, pop-up de documentação, navegação em código, avisos de editor e, para NetBeans 6.9, emblemas de erro para sintaxes mal formadas. Consulte a página Tutoriais e demonstrações do NetBeans para screencasts de suporte PHP.

Em aplicativos que requerem um banco de dados, o IDE oferece amplo suporte à maioria dos bancos de dados de base, especialmente o MySQL. Consulte o screencast dos recursos NetBeans MySQL e Integração de banco de dados para obter mais detalhes.

A lógica corporativa para o aplicativo de autocompletar que você está criando precisa processar requisições recuperando dados do armazenamento de dados e, em seguida, preparar e enviar a resposta. Isso é implementado aqui usando-se um arquivo PHP chamado autocomplete. Antes de começar a codificar o arquivo, defina o armazenamento de dados e a funcionalidade exigidos pelo arquivo para acessar os dados.

Criando o armazenamento de dados

Para este aplicativo simples, será criada uma classe chamada Composer que habilita a lógica corporativa a recuperar dados das entradas contidas em uma matriz composers. Então, será criada uma classe chamada ComposerData que retém dados do compositor utilizando a matriz.

  1. Clique com o botão direito do mouse no nó do projeto MyAjaxApp na janela Projetos e escolha Novo > Classe PHP.
  2. Nomeie a classe como Compositor e clique em Terminar. A classe é criada e aberta no editor.
  3. Cole no código a seguir dentro da classe (alterações em negrito). 
    <?php

class Composer {

    public $id;
    public $firstName;
    public $lastName;
    public $category;

    function __construct($id, $firstName, $lastName, $category) {
        $this->id = $id;
        $this->firstName = $firstName;
        $this->lastName = $lastName;
        $this->category = $category;
    }
}

?>

Crie a classe ComposerData.

  1. Clique com o botão direito do mouse no nó do projeto MyAjaxApp na janela Projetos e escolha Novo > Classe PHP.
  2. Nomeie a classe como ComposerData e clique em Terminar. A classe é criada e aberta no editor do IDE.
  3. Adicione uma instrução de requisito para o topo da classe para especificar que a classe requer a classe Composer.php criada (alterações em negrito). 
    <?php

require "Composer.php";

class ComposerData {

}
  4. No editor, cole no código a seguir dentro da classe (alterações em negrito). 
    <?php

require "Composer.php";

class ComposerData {

    public $composers;

    function __construct() {
        $this->composers = array(
            new Composer("1", "Johann Sebastian", "Bach", "Baroque"),
            new Composer("2", "Arcangelo", "Corelli", "Baroque"),
            new Composer("3", "George Frideric", "Handel", "Baroque"),
            new Composer("4", "Henry", "Purcell", "Baroque"),
            new Composer("5", "Jean-Philippe", "Rameau", "Baroque"),
            new Composer("6", "Domenico", "Scarlatti", "Baroque"),
            new Composer("7", "Antonio", "Vivaldi", "Baroque"),

            new Composer("8", "Ludwig van", "Beethoven", "Classical"),
            new Composer("9", "Johannes", "Brahms", "Classical"),
            new Composer("10", "Francesco", "Cavalli", "Classical"),
            new Composer("11", "Fryderyk Franciszek", "Chopin", "Classical"),
            new Composer("12", "Antonin", "Dvorak", "Classical"),
            new Composer("13", "Franz Joseph", "Haydn", "Classical"),
            new Composer("14", "Gustav", "Mahler", "Classical"),
            new Composer("15", "Wolfgang Amadeus", "Mozart", "Classical"),
            new Composer("16", "Johann", "Pachelbel", "Classical"),
            new Composer("17", "Gioachino", "Rossini", "Classical"),
            new Composer("18", "Dmitry", "Shostakovich", "Classical"),
            new Composer("19", "Richard", "Wagner", "Classical"),

            new Composer("20", "Louis-Hector", "Berlioz", "Romantic"),
            new Composer("21", "Georges", "Bizet", "Romantic"),
            new Composer("22", "Cesar", "Cui", "Romantic"),
            new Composer("23", "Claude", "Debussy", "Romantic"),
            new Composer("24", "Edward", "Elgar", "Romantic"),
            new Composer("25", "Gabriel", "Faure", "Romantic"),
            new Composer("26", "Cesar", "Franck", "Romantic"),
            new Composer("27", "Edvard", "Grieg", "Romantic"),
            new Composer("28", "Nikolay", "Rimsky-Korsakov", "Romantic"),
            new Composer("29", "Franz Joseph", "Liszt", "Romantic"),

            new Composer("30", "Felix", "Mendelssohn", "Romantic"),
            new Composer("31", "Giacomo", "Puccini", "Romantic"),
            new Composer("32", "Sergei", "Rachmaninoff", "Romantic"),
            new Composer("33", "Camille", "Saint-Saens", "Romantic"),
            new Composer("34", "Franz", "Schubert", "Romantic"),
            new Composer("35", "Robert", "Schumann", "Romantic"),
            new Composer("36", "Jean", "Sibelius", "Romantic"),
            new Composer("37", "Bedrich", "Smetana", "Romantic"),
            new Composer("38", "Richard", "Strauss", "Romantic"),
            new Composer("39", "Pyotr Il'yich", "Tchaikovsky", "Romantic"),
            new Composer("40", "Guiseppe", "Verdi", "Romantic"),

            new Composer("41", "Bela", "Bartok", "Post-Romantic"),
            new Composer("42", "Leonard", "Bernstein", "Post-Romantic"),
            new Composer("43", "Benjamin", "Britten", "Post-Romantic"),
            new Composer("44", "John", "Cage", "Post-Romantic"),
            new Composer("45", "Aaron", "Copland", "Post-Romantic"),
            new Composer("46", "George", "Gershwin", "Post-Romantic"),
            new Composer("47", "Sergey", "Prokofiev", "Post-Romantic"),
            new Composer("48", "Maurice", "Ravel", "Post-Romantic"),
            new Composer("49", "Igor", "Stravinsky", "Post-Romantic"),
            new Composer("50", "Carl", "Orff", "Post-Romantic"),
        );
    }
}

?>

Criando a lógica comercial

Implemente a lógica para manipular o URL autocompletar que é recebida pela requisição de entrada. Em vez de criar um novo arquivo PHP utilizando o assistente Arquivo como demonstrado na seção anterior, modifique o arquivo index.php existente para esse propósito.

  1. Na janela Projetos, clique no nó de arquivo index.php. O nome do arquivo se torna editável, habilitando a modificação do nome.
    Janela Projeto exibindo nome de arquivo editável
  2. Nomeie o arquivo autocompletar e, em seguida, pressione Enter. Clique duas vezes no novo arquivo autocomplete.php para que ele seja exibido no editor.
  3. Substitua o código do arquivo existente com o script a seguir. 
    <?php

require_once("ComposerData.php");

session_start();

$composerData = new ComposerData();
$composers = $composerData->composers;

$results = array();
$namesAdded = false;

// correspondência simples para o início do nome, do sobrenome ou ambos
if(isset($_GET['action']) && $_GET['action'] == "complete") {
    foreach($composers as $composer) {
        if(!is_numeric($_GET['id']) &&

            // se o id corresponder ao nome
            (stripos($composer->firstName, $_GET['id']) === 0 ||

            // se o id corresponder com o sobrenome
            stripos($composer->lastName, $_GET['id']) === 0) ||

            // se o id corresponder com todo o nome
            stripos($composer->firstName." ".$composer->lastName, $_GET['id']) === 0) {

                $results[] = $composer;
        }
    }

    // preparar dados xml
    if(sizeof($results) != 0) {
        header('Content-type: text/xml');
        echo "<composers>";
        foreach($results as $result) {
            echo "<composer>";
            echo "<id>" . $result->id . "</id>";
            echo "<firstName>" . $result->firstName . "</firstName>";
            echo "<lastName>" . $result->lastName . "</lastName>";
            echo "</composer>";
        }
        echo "</composers>";
    }
}

// se o usuário escolher a partir da caixa de pop-up
if(isset($_GET['action']) && isset($_GET['id']) && $_GET['action'] == "lookup") {
    foreach($composers as $composer) {
        if($composer->id == $_GET['id']) {
            session_register("id");
            session_register ("firstName");
            session_register ("lastName");
            session_register ("category");

            $HTTP_SESSION_VARS ["id"] = $composer->id;
            $HTTP_SESSION_VARS ["firstName"] = $composer->firstName;
            $HTTP_SESSION_VARS ["lastName"] = $composer->lastName;
            $HTTP_SESSION_VARS ["category"] = $composer->category;

            header("Location: composerView.php");
        }
    }
}

?>

Como você pode ver, não há nada realmente novo que precise ser aprendido para escrever código no servidor para processamento em Ajax. O tipo de conteúdo da resposta precisa ser definido como text/xml para casos em que você deseje trocar documentos XML. Com o Ajax, você também pode trocar texto sem formatação ou até mesmo trechos de código de JavaScript, que podem ser avaliados ou executados pela função callback function no cliente. Observe também que alguns navegadores podem armazenar em cache os resultados, portanto, talvez seja necessário definir o cabeçalho Cache-Control HTTP como no-cache.

Neste exemplo, o arquivo autocomplete.php gera um documento XML que contém todos os compositores com um primeiro ou último nome começando com os caracteres digitados pelo usuário. Este documento mapeia para os dados XML ilustrados no fluxograma acima. Aqui está um exemplo de um documento XML que é retornado para o objeto XMLHttpRequest:

<composers>
    <composer>
        <id>12</id>
        <firstName>Antonin</firstName>
        <lastName>Dvorak</lastName>
    </composer>
    <composer>
        <id>45</id>
        <firstName>Aaron</firstName>
        <lastName>Copland</lastName>
    </composer>
    <composer>
        <id>7</id>
        <firstName>Antonio</firstName>
        <lastName>Vivaldi</lastName>
    </composer>
    <composer>
        <id>2</id>
        <firstName>Arcangelo</firstName>
        <lastName>Corelli</lastName>
    </composer>
</composers>

Programando o lado do cliente: Parte 2

Você deve definir a função callback para manipular a resposta do servidor, e adicionar qualquer funcionalidade necessária para refletir alterações na página visualizadas pelo usuário. Isso requer a modificação do HTML DOM. Finalmente, você pode trabalhar no editor CSS do IDE para adicionar uma folha de estilo simples na apresentação.

Adicionando a funcionalidade Retorno de chamada

A função callback é chamada assincronamente em pontos específicos durante a interação HTTP quando a propriedade readyState do XMLHttpRequest é alterada. No aplicativo que você está construindo, a função callback é callback(). Você lembra que em doCompletion(), callback foi definida como a propriedade XMLHttpRequest.onreadystatechange para uma função. Agora, implemente a função callback da seguinte forma.

  1. Abra javascript.js no editor e digite o código abaixo. 
    function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            parseMessages(req.responseXML);
        }
    }
}

Um readyState "4" significa a conclusão da interação HTTP. A API de XMLHttpRequest.readState indica que há 5 valores possíveis que podem ser definidos. Dentre eles estão:

Valor readyState Definição do status do objeto
0 não inicializado
1 carregando
2 carregado
3 interativo
4 completo

Observe que a função parseMessages() somente é chamada quando o XMLHttpRequest.readyState é "4" e o status -- a definição do código de status HTTP da solicitação -- é "200", significando um êxito. Você definirá parseMessages() em seguida em Atualizando o HTML DOM.

Atualizando o HTML DOM

A função parseMessages() manipula os dados XML de entrada. Fazendo isso, ele conta com várias funções auxiliares, tais como appendComposer(), getElementY() e clearTable(). Você também deve introduzir novos elementos na página de índice, tal como uma segunda tabela HTML que serve como a caixa autocompletar, e os IDs dos elementos de forma que eles possam ser referenciados em javascript.js. Finalmente, crie novas variáveis que correspondam a ID's para os elementos em index.php, inicialize-as na função init() implementada anteriormente e adicione alguma funcionalidade que seja necessária sempre que index.php for carregado.

Observação: As funções e elementos que você cria nas etapas seguintes funcionam de forma independente. Recomendamos que você percorra esta seção, em seguida, examine o código quando tudo estiver no lugar.

  1. Abra index.html no editor e digite o código abaixo para a segunda linha da tabela HTML criada anteriormente. 
    <tr>
    <td id="auto-row" colspan="2">

    <td/>
</tr>
    Essa nova linha, que pode ser identificada como 'auto-row', serve como manipuladora para o código JavaScript, para inserir uma nova tabela HTML que formará a caixa de autocompletar.
  2. Abra javascript.js no editor e as três variáveis a seguir na parte superior do arquivo. 
    var completeField;
var completeTable;
var autoRow;
  3. Adicione as seguintes linhas (em negrito) na função init(). 
    function init() {
    completeField = document.getElementById("complete-field");
    completeTable = document.createElement("table");
    completeTable.setAttribute("class", "popupBox");
    completeTable.setAttribute("style", "display: none");
    autoRow = document.getElementById("auto-row");
    autoRow.appendChild(completeTable);
    completeTable.style.top = getElementY(autoRow) + "px";
}
    Uma finalidade de init() é tornar os elementos que estão dentro de index.html acessíveis para outras funções que modificarão o DOM da página de índice. Acima, o script cria uma nova tabelaHTML, adiciona a classe popupBox e modifica o estilo do elemento para display: none. Finalmente, atinge o elemento cuja id é auto-row e insere a nova tabela nele. Em outras palavras, o HTML modificado tem a aparência a seguir quando o código é executado. 
    <tr>
    <td id="auto-row" colspan="2">
        <table class="popupBox" style="display: none"></table>
    <td/>
</tr>
  4. Adicione appendComposer() a javascript.js. 
    function appendComposer(firstName,lastName,composerId) {

    var row;
    var cell;
    var linkElement;

    if (isIE) {
        completeTable.style.display = 'block';
        row = completeTable.insertRow(completeTable.rows.length);
        cell = row.insertCell(0);
    } else {
        completeTable.style.display = 'table';
        row = document.createElement("tr");
        cell = document.createElement("td");
        row.appendChild(cell);
        completeTable.appendChild(row);
    }

    cell.className = "popupCell";

    linkElement = document.createElement("a");
    linkElement.className = "popupItem";
    linkElement.setAttribute("href", "autocomplete.php?action=lookup&id=" + composerId);
    linkElement.appendChild(document.createTextNode(firstName + " " + lastName));
    cell.appendChild(linkElement);
}
    Essa função cria uma nova linha da tabela, insere um link em um compositor usando os dados passados para a função através de seus três parâmetros, e insere a linha no elemento complete-table da página de índice.
  5. Adicione clearTable() a javascript.js. 
    function clearTable() {
    if (completeTable.getElementsByTagName("tr").length > 0) {
        completeTable.style.display = 'none';
        for (loop = completeTable.childNodes.length -1; loop >= 0 ; loop--) {
            completeTable.removeChild(completeTable.childNodes[loop]);
        }
    }
}
    Essa função define a exibição do elemento complete-table como 'none', (ou seja, o torna invisível), e remove quaisquer entradas de nome de compositor existentes que tenham sido criadas.
  6. Adicione getElementY() a javascript.js. 
    function getElementY(element){

    var targetTop = 0;

    if (element.offsetParent) {
        while (element.offsetParent) {
            targetTop += element.offsetTop;
            element = element.offsetParent;
        }
    } else if (element.y) {
        targetTop += element.y;
    }
    return targetTop;
}
    Essa função é aplicada para localizar a posição vertical do elemento pai. Isso é necessário porque a posição atual do elemento, quando ele é exibido, freqüentemente depende do tipo e da versão do navegador. Observe que o elemento complete-table, quando exibido contendo nomes de compositor, é deslocado para o lado inferior direito da tabela em que ele está. O posicionamento correta da altura é determinado por getElementY().

    Observação: Consulte esta explicação de deslocamento em http://www.quirksmode.org/.

  7. Modifique a função callback() para que chame clearTable() cada vez que novos dados forem recebidos do servidor. Quaisquer entradas do compositor que já existem na caixa autocompletar são, portanto, removidas antes que esta seja preenchida com novas entradas. 
    function callback() {

    clearTable();

    if (req.readyState == 4) {
        if (req.status == 200) {
            parseMessages(req.responseXML);
        }
    }
}
  8. Adicione parseMessages() a javascript.js. 
    function parseMessages(responseXML) {

    // nenhuma correspondência retornou
    if (responseXML == null) {
        return false;
    } else {

        var composers = responseXML.getElementsByTagName("composers")[0];

        if (composers.childNodes.length > 0) {
            completeTable.setAttribute("bordercolor", "black");
            completeTable.setAttribute("border", "1");

            for (loop = 0; loop < composers.childNodes.length; loop++) {
                var composer = composers.childNodes[loop];
                var firstName = composer.getElementsByTagName("firstName")[0];
                var lastName = composer.getElementsByTagName("lastName")[0];
                var composerId = composer.getElementsByTagName("id")[0];
                appendComposer(firstName.childNodes[0].nodeValue,
                    lastName.childNodes[0].nodeValue,
                    composerId.childNodes[0].nodeValue);
            }
        }
    }
}

A função parseMessages() recebe como um parâmetro uma representação de objeto do documento XML retornado pelo arquivo autocomplete.php. A função atravessa programaticamente o documento XML, extraindo firstName, lastName e id de cada entrada, em seguida, passa esses dados para appendComposer(). Isso resulta em uma atualização dinâmica do conteúdo do elemento complete-table. Por exemplo, uma entrada que é gerada e inserida em complete-table deve ter a seguinte aparência:

<tr>
    <td class="popupCell">
        <a class="popupItem" href="autocomplete?action=lookup&id=12">Antonin Dvorak</a>
    </td>
</tr>

A atualização dinâmica do elemento complete-table representa a etapa final do fluxo do processo de comunicação que acontece durante a comunicação por meio do Ajax. Essa atualização mapeia para os dados HTML e CSS que estão sendo passados para a apresentação no fluxograma acima.

Anexando uma folha de estilo

Neste estágio, você concluiu todo o código necessário para a funcionalidade do aplicativo. Para ver os resultados dos seus esforços, tente executar o aplicativo agora.

  1. Execute o projeto para ver como é em um navegador. Clique no botão Executar projeto ( botão Executar projeto ). O arquivo index.html é exibido no navegador padrão.
    Aplicativo exibido no navegador sem folha de estilo

Para anexar uma folha de estilo ao seu aplicativo, simplesmente crie um arquivo CSS (Cascading Style Sheet) e vincule-o a partir da(s) página(s) da sua apresentação. Ao trabalhar em arquivos CSS, o IDE fornece o suporte autocompletar de código, assim como vários outros recursos que podem ajudar na produção de regras de folha de estilo. Entre eles se incluem:

  • Construtor de estilo CSS: uma interface criada para permitir que você crie regras utilizando uma seleção de controles e assistentes. (Janela > Outro > Construtor de estilo CSS)
  • Visualização de CSS: uma janela de visualização que, quando você coloca o cursor em uma regra, exibe o texto de amostra renderizado de acordo com o bloco de declaração dessa regra. (Janela > Outro > Visualização CSS)
  • Editor de regras de estilo: uma caixa de diálogo que permite que você crie regras com base em classes, IDs e elementos HTML e que defina sua posição na hierarquia do documento. (Criar botão regra ( Editor de estilo de regra ), localizado na região superior esquerda da barra de ferramentas do editor CSS)

O NetBeans 6.9 fornece o suporte Encontrar utilidades e refatoração de renomeação. Esse suporte está disponível não somente em arquivos css, mas em todos os arquivos contendo código CSS incorporados (exemplo, HTML, PHP). Classes CSS, id's e elementos de tipo podem ser refatorados em todos os arquivos de projeto. Para fazer uso desse suporte de refatoração, pressione Ctrl-R em um elemento CSS fornecido e utilize a caixa de diálogo fornecida para efetuar a ação de renomear. Também é possível visualizar alterações antes de efetuar a ação de renomear. Para utilizar o suporte de Encontrar utilidades, clique com o botão direito do mouse em um elemento CSS e escolha Encontrar utilidades. Consulte NewAndNoteworthy69m1 para mais detalhes.

Efetue as etapas a seguir para anexar uma folha de estilo ao aplicativo.

  1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Novo > Folha de estilo em cascata (caso Folha de estilo em cascata não esteja listado, escolha Outro. Em seguida, escolha Folha de estilo em cascata na categoria Outro no assistente Novo arquivo.)
  2. No campo de texto Nome do arquivo CSS, digite stylesheet.
  3. Clique em Terminar. O novo arquivo é adicionado à janela Projetos, e aberto no editor do IDE.
  4. Em stylesheet.css, digite as seguintes regras. Você pode usar o suporte a autocompletar de código do IDE, pressionando Ctrl-Espaço nos pontos em que desejar acionar sugestões. 
    body {
   font-family: sans-serif;
   font-size: smaller;
   padding: 50px;
   color: #555;
   width: 650px;
}

h1 {
   letter-spacing: 6px;
   font-size: 1.6em;
   color: #be7429;
   font-weight: bold;
}

h2 {
   text-align: left;
   letter-spacing: 6px;
   font-size: 1.4em;
   color: #be7429;
   font-weight: normal;
   width: 450px;
}

table {
   width: 550px;
   padding: 10px;
   background-color: #c5e7e0;
}

td {
   padding: 10px;
}

a {
  color: #be7429;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.popupBox {
  position: absolute;
  top: 170px;
  left: 140px;
}

.popupCell {
   background-color: #fffafa;
}

.popupCell:hover {
  background-color: #f5ebe9;
}

.popupItem {
  color: #333;
  text-decoration: none;
  font-size: 1.2em;
}

    Verifique se o seu código CSS é válido, clicando com o botão direito do mouse no editor CSS e escolhendo Verificar CSS. Quaisquer erros encontrados são exibidos na janela Saída (Janelas > Saída).

  5. Abra a janela Visualização de CSS, escolhendo Janela > Outro > Visualização de CSS.
  6. Coloque o seu cursor em uma regra que faça ajustes no texto e na cor (por exemplo, h1). A janela Visualização de CSS gera uma exibição de amostra que mostra como o texto será renderizado em um navegador.
    Janela Visualização de CSS exibindo o texto de amostra da regra h1
  7. Alterne para a página index.html no editor e adicione uma referência à folha de estilos entre os marcadores <head>. 
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  8. Execute o aplicativo novamente. A página de índice é exibida no navegador utilizando a folha de estilo recém criada. Toda vez que você digita um caractere, uma requisição assíncrona é enviada para o servidor e retornada com dados XML que foram preparados por autocomplete.php. Conforme você indica mais caracteres, o número de nomes de compositor diminui para refletir a nova lista de correspondências.

Conclusão

Isto conclui a Introdução ao Ajax. Esperamos que agora você saiba que o Ajax é simplesmente trocar informações por meio de HTTP em segundo plano, e atualizar essa página dinamicamente com base nos resultados.

Você talvez note que o aplicativo que construiu possui vários problemas, por exemplo, nada acontece quando o nome de um compositor é selecionado na caixa autocompletar! Fique à vontade para baixar o aplicativo de exemplo para ver como ele pode ser implementado usando-se a tecnologia PHP. Além disso, você pode querer investigar a validação que impede que um usuário solicite um nome que não existe no armazenamento de dados. Você pode aprender mais sobre estas técnicas seguindo outros tutoriais na Trilha de aprendizado do NetBeans PHP.


Consulte também

Para obter mais informações sobre a tecnologia Ajax e PHP em netbeans.org, consulte os seguintes recursos: