1. Introdução
Hoje, existem algumas aplicações web, como Backpack, Blinksale e Gmail, que integram tecnologia de banco de dados com AJAX. Essa integração tem um enorme impacto nas aplicações web e na experiência do usuário, fornecendo uma tecnologia poderosa para comunicação com o banco de dados sem atualizar o navegador – o que significa que os dados podem ser transferidos em tempo real enquanto o usuário continua outras interações.
Este artigo se concentrará no mecanismo de integração de tecnologia acima. O código-fonte de referência completo também é fornecido. Este exemplo é um aplicativo simples de registro de empregos onde cada cargo contém um título, uma descrição e uma data - permitindo aos usuários adicionar, editar e excluir cargos. Todas essas são as operações básicas que você executa ao trabalhar com dados de registro de banco de dados, mas este aplicativo vai um passo além. Um título de trabalho pode ser alterado para um formato editável - ele será salvo ou excluído do banco de dados e exibido em seu novo estado sem atualizar o navegador e interromper a operação do usuário.
Neste artigo, presumo que você tenha um conhecimento básico de AJAX, MySQL e PHP ou uma linguagem de servidor semelhante. Se você ainda não criou um objeto XML HTTP Request, consulte primeiro meu artigo "Como usar AJAX". A seguir, vamos primeiro discutir o problema do banco de dados.
2. Crie o banco de dados
A primeira coisa que você precisa fazer é criar tabelas de banco de dados para armazenar dados para essas posições. Criei uma tabela MySQL chamada informit_ajax - ela possui campos de ID, título, descrição e data - todas essas são variáveis que aparecerão repetidamente neste artigo. Aqui está o código para criar a tabela:
CREATE TABLE ′informit_ajax′ (
′id′ int(11) NOT NULL auto_increment,
'data' data e hora NÃO NULO padrão '0000-00-00 00:00:00',
'descrição' texto longo NÃO NULO,
′título′ varchar(100) NOT NULL padrão '',
CHAVE PRIMÁRIA (′id′)
) TYPE=MyISAM;
Você pode executar este código usando qualquer ferramenta de consulta MySQL ou linguagem usada para desenvolver o aplicativo. Depois que o banco de dados estiver preparado, a próxima etapa é criar os arquivos front-end que fazem solicitações ao backend PHP.
3. Faça uma solicitação
O arquivo HTML de índice aqui é um simples espaço reservado para dados - ele será analisado a partir do banco de dados. Este arquivo contém referências a arquivos JavaScript e CSS, contém também um manipulador onload que faz a primeira solicitação e três tags div:
Layout - usado para centralizar o
carregamento do conteúdo da página - carrega mensagens durante o carregamento dos dados solicitados, que serão recebidos pelo usuário. Objeto HTTPRequest
· posts - usado para exibir cada dado de trabalho analisado
<head>
＜title＞Como integrar um banco de dados com AJAX＜/title＞
＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
＜script src="js/post.js"＞＜/script＞
＜/cabeça＞
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="layout" alinhamento="center">
＜div id="postagens"＞＜/div＞
＜p＞＜input type="button" value="adicionar uma postagem" onmousedown="javascript:makeRequest('services/post.php?method=save');"
＜p＞＜div id="carregando"＞＜/div＞＜/p＞
＜/div＞
＜/body＞
A primeira solicitação é gerada quando a página é carregada. Esta requisição envia uma consulta get para uma classe PHP que criaremos posteriormente, mas primeiro precisamos criar métodos de análise para a resposta da requisição; O arquivo de solicitação JavaScript cuida de todo o trabalho básico, como criação de objetos, envio de solicitações e verificação do status de prontidão. Quando uma resposta é recebida do objeto Request, eu uso esse arquivo de tarefas JavaScript para lidar com a geração HTML dessas tarefas. O método onResponse é bastante poderoso porque lida com a geração de páginas HTML para cada cargo em versões de texto e formulário, e os coloca em suas próprias tags div personalizadas, desta forma podemos gerá-los facilmente durante a interação do usuário. Dessa forma, podemos alternar entre as versões de texto e formulário de cada postagem - isso pode ser feito clicando no link "editar esta postagem". A seguir está o código da página HTML criada para cada posição. Você pode ver a implementação completa do método no arquivo fonte de download correspondente deste artigo.
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "＜div class='título' id='título_"+ i +"'＞"+ _título +"＜/div＞"
+ "＜div class='descrição' id='descrição_"+ i +"'＞"+ _descrição +"＜/div＞"
+ "＜div class='data' id='data_"+ i +"'＞"+ _data +"＜/div＞"
+ "＜a href="javascript:toggle('"+ i +"');"＞editar este post＜/a＞＜br/＞"
+ "＜/div＞"
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +"＞"
+ "＜div class='title'＞＜input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div >"
+ "＜div class='descrição'＞＜textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'＞"+ _descrição +"＜/ área de texto＞＜/div＞"
+ "＜div class='data'＞"+ _data +"＜/div＞"
+ "＜input type='botão' nome='cancelar' valor='cancelar' onclick="javascript:toggle('"+ i +"');"＞"
+ "＜input type='button' name='delete' value='delete this post' onclick="javascript:deletePost("+ _id +");"＞"
+ "<input type='button' name='submit' value='salvar esta postagem' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+ "＜/div＞"
+ "＜p＞"nbsp;＜/p＞";
A versão em texto de cada postagem simplesmente exibe o título, a descrição e a data e um link "editar esta postagem". A versão em formulário de cada postagem possui três botões:
·"cancelar Botão " - simplesmente muda o status da postagem de volta para a versão em texto.
· Botão "excluir esta postagem" - envia o ID da postagem atual para o objeto PHP para excluí-lo do banco de dados.
· Botão "salvar esta postagem" - permite que o usuário O trabalho novo ou editado seja salvo no servidor.
Os métodos principais para lidar com a comunicação de solicitação do lado do servidor são os métodos onResponse, saveNewPost, deletePost e getPost; O método . fornece o valor do índice atual para esses métodos principais para que a posição correta possa ser atualizada com as informações corretas com base nesse índice. Aqui está um breve resumo de cada método principal (excluindo onResponse, já que analisamos sua funcionalidade antes). . Descrição e exemplo de código:
· O seguinte método saveNewPost salva a nova postagem coletando e enviando os valores de entrada do formulário para um objeto PHP e define o método getPost como o método de retorno de chamada onreadystatechange:
function saveNewPost(_id, _index){
var newDescription = document.getElementById("formDescription_"+ _index).value;
var novoTítulo = document.getElementById("formTitle_"+ _index).value;
setIndex(_index);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}
· O método getPost abaixo é um método de retorno de chamada - ele é responsável por atualizar um único post quando uma resposta é recebida do objeto PHP:
function getPost(){
if(checkReadyState(solicitação)) {
var resposta = request.responseXML.documentElement;
var _title = resposta.getElementsByTagName('title')[getIndex()].firstChild.data;
var _descrição = resposta.getElementsByTagName('descrição')[getIndex()].firstChild.data;
var _data = resposta.getElementsByTagName('data')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("descrição_"+ getIndex()).innerHTML = _descrição;
document.getElementById("data_"+ getIndex()).innerHTML = _data;
alternar(getIndex());
}
}
· O método deletePost abaixo envia o índice atual como uma solicitação ao objeto PHP, que irá deletar o registro no banco de dados e responder com uma posição atualizada:
function deletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
Surpreendentemente, a parte mais complicada já passou. Vamos analisar a parte mais crítica – a interação com o banco de dados.
4. Interaja com o banco de dados
Para interagir com o banco de dados, é necessário criar métodos de recuperação, inserção, substituição e exclusão de posições. Optei por criar uma pós-classe com métodos get, save e delete para lidar com essas interações. Esta classe também possui uma referência ao arquivo de conexão do banco de dados (usado para conectar ao banco de dados). Você deve substituir o login, a senha e o nome do banco de dados pelas informações do seu próprio banco de dados.
DEFINE('DB_USER', 'NOME DE USUÁRIO');
DEFINE('DB_SENHA', 'SENHA');
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_NAME', 'BANCO DE DADOS');
die
('Não foi possível conectar ao MySQL: ' . mysql_error() );
Seu construtor deve ser semelhante ao seguinte código:
function Post(){
require_once('mysql_connect.php');
$this->tabela = "informit_ajax";
}
O seguinte método dbConnect é responsável por criar a conexão - passando informações de login para o banco de dados; este método é reutilizado em todos os métodos principais antes de consultar o banco de dados:
function dbConnect(){
DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}
O método get a seguir percorre a tabela do banco de dados, cria uma string XML com base na linha do banco de dados e retorna a string ao solicitante:
function get(){
$this->dbConnect();
$query = "SELECT * FROM $this->table ORDER BY id";
$resultado = mysql_db_query (DB_NAME, $query, LINK);
$xml = "＜?xml versão="1.0" codificação="ISO-8859-1" ?＞n";
$xml .= "＜postagens＞n";
while($linha = mysql_fetch_array($resultado)) {
$xml .= "＜postagem＞n";
$xml .= "＜id＞" . $row['id'] .
$xml .= "＜data＞" . $row['data'] "＜/data＞n";
$xml .= "＜título＞＜![CDATA[" .
$xml .= "＜descrição＞＜![CDATA[" .
$xml .= "＜/postagem＞n";
}
$xml .= "＜/postagens＞";
mysql_close();
header("Tipo de conteúdo: aplicação/xml; charset=UTF-8");
eco $xml;
}
O seguinte método save atinge dois propósitos ao lidar com posições de atualização e inserção:
function save($id, $title, $description){
$this->dbConnect();
$query = "SELECT * FROM $this->table WHERE id='$id'";
$resultado = @mysql_query ($query);
if (mysql_num_rows($resultado) > 0)
{
$query = "ATUALIZAR $esta->tabela SET título='$título', descrição='$descrição', data=AGORA() WHERE id='$id'";
$resultado = @mysql_query($query);
}
outro
{
$query = "INSERT INTO $this->table (título, descrição, data) VALORES ('$título', '$descrição', AGORA())";
$resultado = @mysql_query($query);
}
mysql_close();
$this->get();
}
O método delete abaixo é responsável por deletar um local baseado no ID passado como parâmetro. Em seguida, chame o método get para retornar os novos dados ao arquivo de solicitação:
function delete($id){
$this->dbConnect();
$query = "DELETE FROM $this->table WHERE id='$id'";
$resultado = @mysql_query($query);
mysql_close();
$this->get();
}
5. Aplicação abrangente
Para integrar as partes acima, um arquivo simples precisa ser criado para servir como uma ponte de comunicação entre solicitações XML HTTP e objetos PHP. A página neste ponto não apenas cria objetos PHP, mas também recebe consultas e passa variáveis para métodos gerados dinamicamente – neste caso, obter, salvar ou excluir. Um exemplo de consulta abaixo inclui um método $ e as variáveis confiáveis $id, $title e $description.
require_once("../classes/Post.class.php");
$postagem = nova postagem();
$post->$method($id, $title, $description);
Discutiremos essas técnicas mais adiante. O desenvolvimento web de hoje parece jovem e dinâmico novamente, e temos sorte de fazer parte desta nova era tecnológica.