Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Busca
Assine o Feed
Contato
Menu
FeedBurner PW
PW no Facebook
@pinceladasdaweb
github.com/pinceladasdaweb
PHP
A evoluo da Internet
A Internet no foi concebida para tomar a dimenso que tomou. Sua ideia inicial era promover acessos a dados em uma rede de computadores, e o que temos hoje muito
mais que isso.
Nos testes iniciais da Internet por volta do incio da dcada de 90, cientistas tinham o intuito de compartilhar dados ao redor do mundo, e para isso no precisavam de muito
mais que o compartilhamento de texto puro e eventuais grficos e/ou imagens.
Na internet so trafegados diversos protocolos, entre eles temos o HTTP (HyperText Transfer Protocol). Esse, um protocolo que transporta uma pgina em HTML
(HyperText Markup Language) que gerada em um servidor. O cliente, ao receber uma pgina em HTML invoca um programa (navegador) interpreta o protocolo HTTP e
extrai o cdigo HTML para sua exibio.
A linguagem HTML permitia que esses textos e imagens fossem organizados em um documento de texto atravs da utilizao de tags (etiquetas). Essas seriam interpretadas por
um programa especfico e exibiria informaes de uma maneira agradvel. A linguagem HTML era suficiente para suprir as necessidades da poca, pois cumpriu com eficincia
a tarefa a que se props.
Nota: Tags em HTML so estruturas da linguagem que consistem em breves instrues, tendo uma marca de incio e outra de fim, cada uma dessas instrues tem uma funo
especfica na formatao de um documento web. Por exemplo <h1>Exemplo</h1> marca a palavra Exemplo como um ttulo
O grande problema foi que os objetivos da Internet se alteraram mas a linguagem de marcao no acompanhou essas alteraes. Entre a verso 1 do HTML e a verso 3 no
houveram mudanas considerveis. O HTML 4.0 foi convencionado em 1997 pela W3C (World Wide Web Consortium). A W3C consrcio formado por instituies
comerciais e educacionais que tm como objetivo definir os padres para escrita de documentos que trafegam pela web. A grande diferena notada na verso 4.0 do HTML
foi a insero de objetos dinmicos. Desta forma, tornou-se possvel modificar elementos da pgina HTML sem a necessidade de obter um novo documento. Surge ento o
DHTML (Dynamic HyperText Markup Language) que foi a juno das tecnologias JavaScript, CSS e DOM (Document Object Model). O DOM a organizao dos
elementos de um HTML, ele os mapeia os elementos HTML em formato de rvore, e assim, a linguagem JavaScript pode manipular um nodo n (uma folha da rvore)
independentemente de toda a estrutura.
Em 2000 a W3C prope uma modificao nos conceitos trabalhos at ento. A nova proposta uni a linguagem de marcao HTML com as regras de marcao da linguagem
XML, estava ento criado o XHTML 1.0. Sua principal proposta era orientar o desenvolvedor a escrever o documento HTML de forma correta, utilizando para isso as regras
DTD (Document Type Definition) especificadas no cabealho do documento.
A grande questo foi que o XHTML 1.0 precisava de alguma alternativa que suprisse as necessidades dos usurios carentes por algo a mais que textos e imagens. Como a
linguagem nativa no era capaz de suprir essas vontades, deu-se incio a agregao de plug-ins como alternativa a necessidade audiovisual.
Adobe Flash, Microsoft SilverLight e Sun com JavaFx foram usados como alternativa para suprir essa necessidade. Aparentemente o problema estava resolvido, mas
entretanto sua utilizao apresentavam algumas desvantagens, como: no seguem um padro, no so nativos, so particulares e no tem a codificao aberta.
Em 2004, os representantes das empresas Mozilla, Apple e Opera se reuniram e decidiram criar um grupo paralelo a W3C, em que comearam a desenvolver padres de
marcao em paralelo a W3C, estava formado o The Web Hypertext Application Technology Working Group (WHAT-WG). A ideia era tomar como base a evoluo e no a
revoluo (assim como uma tentativa fracassada da W3C em construir o XHTML 2.0). Mudanas drsticas poderiam corromper muito do que j estava funcionando na
Internet. Os sites que utilizavam as linguagens especificadas em 1999 e 2000 continuariam funcionando, entretanto novos conceitos seriam implicados. O grupo WHAT-WG
deu incio ao desenvolvimento do HTML5, que hoje j foi incorporado pelas diretrizes da W3C.
O incio do Ajax
Em 1998, um membro da equipe da Microsoft, ao se deparar com o DHTML (utilizao de JavaScript integrado com HTML), implementou uma funo que daria vida ao
AJAX(Asynchronous Javascript And XML) o XMLHTTP. Essa funo permitia uma comunicao entre cliente e servidor de forma assncrona, descontinuando a necessidade
de enviar uma solicitao para receber uma resposta. Essa descoberta foi revolucionria, mas na poca no teve destaque, pois no ficou claro para os desenvolvedores como
se implementaria a comunicao assncrona.
Em 2002 a empresa Mozilla percebeu a potencialidade desse recurso e implementou a funo XMLHttpRequest, que se tornou o padro para comunicao assncrona nos
principais navegadores como (FireFox, Opera, Safari, Chrome), mas foi somente em 2004 que essa nova funcionalidade teve destaque, com os recursos inovadores
apresentados pelo Google, em sua aplicao Gmail, que construindo o conceito de programao chamado Ajax.
At ento, no era possvel ter uma ideia da capacidade do AJAXAjax. Em 2005 que o Google lana o Google Maps, a primeira aplicao web com caractersticas de uma
aplicao desktop, que contava com conceitos de clicar e arrastar (drag and drop), zoom ao scrool do mouse, uma interface intuitiva e outros recursos das aplicaes desktop.
A utilizao dessa tecnologia se tornou cada vez mais visada, no to somente para a construo de sites, mas para a criao de aplicativos que pudessem rodar inteiramente na
Internet.
Na representao da Figura 2 nota-se que a pgina principal carregada uma vez e pequenas requisies transparentes ao usurio so feitas ao servidor e devolvem o
contedo solicitado.
importante salientar que a tecnologia Ajax uma tecnologia que vem sido muito utilizada, pois oferece conforto ao usurio, entretanto necessrio ponderar sua utilizao.
Recomenda-se sua utilizao em aplicaes web que sofrem com o modelo requisio-resposta, tais como: aplicaes com menus, com interatividade em tempo real, com
modelos de aplicaes grficas (desktop) entre outros. Entretanto no necessrio sua utilizao em casos que a informao desejada ser carregada apenas uma vez e no
ter alteraes, como por exemplo: uma tabela de informaes para impresso.
Colocando a mo na massa
Nesse artigo utiliza-se as tecnologias MySQL, PHP, e HTML. Para testar o exemplo necessrio ter instalado em seu computador um servidor web com suporte a PHP e
MySQL. Para os iniciantes recomendo a utilizao de programas como o XAMPP ou Wamp que proporcionam em poucos cliques um servidor web completo e de fcil
configurao.
Para iniciarmos o entendimento bsico do funcionamento do Ajax, precisamos de alguma aplicao web. Para isso utiliza-se um exemplo de agenda de contatos. Para
armazenar os dados dessa agenda vamos utilizar o banco de dados MySQL em sua verso 5.x.
Os campos a serem armazenados so: id, nome, email e telefone. O seguinte cdigo demonstra a criao da tabela contatos:
1. CREATE TABLE contatos (
2.
id int(11) NOT NULL AUTO_INCREMENT,
3.
nome varchar(45) DEFAULT NULL,
4.
email varchar(200) DEFAULT NULL,
5.
telefone varchar(45) DEFAULT NULL,
6.
PRIMARY KEY (id)
7. ) DEFAULT CHARSET=latin1;
Note que o campo id um campo que armazena um inteiro e est marcado como um campo que se auto incrementa, dessa forma no precisamos nos preocupar com o
gerenciamento das identificaes dos registros.
Depois dos campos criados deve-se dar destaque ao arquivo HTML que servir de interface para o acesso remoto das informaes. O seguinte cdigo apresenta j algumas
caractersticas do HTML5 como a utilizao de tags como header ou ainda a construo de um cabealho mais simplificado.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8>
<title>Desenvolvimento com Ajax
</meta>
</head>
<body>
<script type="text/javascript" src="func.js">
<div id="container">
<header>
<h1>Iniciando com o desenvolvimento com ajax</h1>
</header>
<h2>Carregar dados:</h2>
<div id="readData">
<div id="label_id">Carregar id:</div>
<input name="id" id="id" type="text" />
<input value="Ok" onclick="getById()" type="button" />
</div>
<hr />
<h2>Inserir dados:</h2>
<form action="index.php">
<div id="label_nome">Nome:</div>
<input name="nome" type="text" />
<div id="label_email">E-mail:</div>
<input name="email" type="text" />
<div id="label_telefone">Telefone:</div>
<input name="telefone" type="text" />
<input value="Ok" onclick="insertData()" type="button" />
</form>
<hr />
<h2>Registros:</h2>
<div id="result"></div>
</div>
</body>
</html>
Analisando o cdigo HTML acima podemos notar que logo aps definirmos o ttulo do documento, dentro da tagb <body>, invocamos um arquivo JavaScript (func.js) que ir
conter funes para manipulao do HTML.
Na construo dos blocos, temos um bloco principal chamado container. Manter esse bloco importante pois com ele que conseguimos melhorias estticas, tais como o
tamanho (largura e altura) que a aplicao ter, o espaamento da borda superior da pgina, entre outros.
Alguns cabealhos (h1, h2) so adicionados para separar e nomear os blocos da pgina.
Nota: Pretende-se aqui explicar como se d o funcionamento da tecnologia Ajax, logo explicaes de CSS ou esttica de construo do HTML esto fora de escopo, e ficam
para uma prxima oportunidade.
O arquivo HTML possui trs sesses sees bsicas:
1. carregar dados: apresenta um input do tipo text um boto ok. Aqui o usurio pode procurar na base de dados um registro, por uma identificao especfica, caso
nenhuma identificao seja inserida, retorna-se todos os registros da base de dados;
2. inserir dados: esto dispostos trs inputs do tipo text referentes aos dados para cadastro de um novo registro. Ao clicar em ok o registro armazenado e uma resposta
de sucesso ou fracasso retornada para o usurio;
3. registros: Ao procurar por um registro especfico, todos os registros ou inserir um novo, sua resposta ser exibida nessa sesso, dentro da div result.
Nota-se que os botes ok no so botes do tipo submit e sim botes do tipo button, isso porque cada um deles chama uma funo JavaScript especfica. Como estamos
trabalhando com Ajax no podemos contar com a prtica tradicional de enviar um formulrio pelo boto submit, agora teremos que tratar cada caso separadamente por
funes da linguagem JavaScript.
Depois de escrito, pode-se salvar esse HTML como index.html, assim ele ser o arquivo principal a ser acessado por seus usurios.
A Figura 3 mostra um exemplo de como deve ficar seu HTML depois de pronto.
A prxima funo a ser analisada a funo getById(). Essa funo captura o que foi digitado pelo usurio e armazena em uma varivel id. Cria-se o XMLHttp que armazena
um objeto do tipo XMLHttpRequest. Algumas propriedades desse objeto devem ser analisadas.
XMLHttp.open: recebe 3 parmetros:
1. Tipo de requisio: o tipo da requisio a forma com que ser montado o protocolo HTTP, aqui pode-se passar uma das duas strings samblagens get ou post.
Em um primeiro momento vamos analisar como se d o funcionamento do Ajax utilizando as variveis de get e posteriormente analisar um prximo exemplo com as
variveis do tipo post.
2. URL: aqui devemos inserir o arquivo de destino, ou seja, o arquivo que ir realizar as manipulaes do lado do servidor. Como estamos utilizando a linguagem PHP
para manipulao do banco de dados, anexa-se aqui um arquivo php que faz a consulta em um banco de dados. Note tambm que, como nosso tipo de requisio foi
setado como get, passamos logo depois do nome do arquivo uma varivel de get (id) recuperada pelo JavaScript;
3. Async: Esse parmetro o que liga ou desliga a assincronicidade da funo, ento setamos como true pois desejamos que essa chamada seja feita de forma
assncrona;
XMLHttp.onreadystatechange: um mtodo do objeto XMLHttpRequest que fica monitorando uma propriedade chamada readyState. Assim que essa propriedade alterada
esse mtodo executado, ento no exemplo, atribumos a ele uma funo.
XMLHttp.readyState: uma lista de estados, definida por:
1. 0 (no iniciado): o objeto j foi criado mas o mtodo open() no foi invocado at o momento;
2. 1 (carregando): o mtodo open() j foi invocado mas a requisio ainda no foi enviada;
3. 2 (carregado): a requisio foi enviada;
4. 3 (incompleto): apenas uma parte da resposta do servidor foi recebida;
5. 4 (completo): todas as informaes foram recebidas e a conexo foi encerrada com sucesso.
Note que com tais informaes e um pouco de criatividade fcil montar um aviso de carregando para o usurio.
XMLHttp.status: uma lista de estados proveniente do protocolo HTTP, definida por:
1. 200 (OK): arquivo encontrado com sucesso;
2. 304 (NOT MODIFIED): o arquivo no foi modificado desde o ultimo request;
3. 401 (UNAUTHORIZED): cliente no tem autorizao para acessar o arquivo;
4. 403 (FORBIDDEN): cliente falhou na autorizao;
5. 404 (NOT FOUND): quando o arquivo no existe na localizao informada.
Com essas informaes tambm possvel fazer um tratamento mais refinado para possveis erros.
XMLHttp.responseText: Esse o texto proveniente da execuo com sucesso do arquivo chamado em open(); esse retorno que deve ser manipulado para exibir o resultado
desejado.
XMLHttp.statusText: Esse o texto de retorno do status, normalmente utilizado para saber qual foi o erro, quando algo no aconteceu como o esperado.
XMLHttp.send: o mtodo que envia a requisio propriamente dita, ao utiliza um requisio por GET no precisamos passar nenhum parmetro, entretanto quando utilizamos
POST devemos passar uma lista de variveis que sero anexadas ao protocolo HTTP, essa lista ser melhor explicada quando exemplificarmos a utilizao do POST.
1. function getById() {
2.
var id
= document.getElementById("id").value;
3.
var result = document.getElementById("result");
4.
var XMLHttp = generateXMLHttp();
5.
XMLHttp.open("get", "getData.php?id=" + id, true);
6.
XMLHttp.onreadystatechange = function(){
7.
if (XMLHttp.readyState == 4)
8.
if (XMLHttp.status == 200){
9.
result.innerHTML = XMLHttp.responseText;
10.
} else {
11.
result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
12.
}
13.
};
14.
XMLHttp.send(null);
15. }
Analisando agora todos os mtodos e operadores do objeto XMLHttpRequest podemos notar a seguinte sequncia de aes:
1. Cria-se um objeto do tipo XMLHttpRequest;
2. Abre-se a conexo com o tipo de operador get apontando para uma pgina em PHP chamada getData.php?id=%id%, sendo que %id% uma varivel obtida pelo
input id em nosso HTML. Ainda marca-se como true uma conexo assncrona;
3. Atribui-se uma funo que executada a qualquer mudana de estado, e no momento em que obtm-se os cdigos de que as informaes foram recebidas com
sucesso e a conexo foi fechada (XMLHttp.readyState == 4) e o arquivo foi encontrado com sucesso (XMLHttp.status == 200) ento atribui-se ao div com id result a
resposta fornecida pela pgina em questo, caso contrrio mostra-se uma mensagem de erro;
4. Envia-se a requisio atravs do mtodo send, passando null como parmetro, pois estamos usando uma requisio do tipo GET.
Antes de analisarmos as demais funes do arquivo func.js vamos ver como foi construdo o arquivo invocado pela funo getById().
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<?php
$id = $_GET['id'];
$sql = "";
if(empty($id)){
$type = "all";
$sql = "SELECT * FROM contatos";
}
else{
$type = "id";
$sql = "SELECT * FROM contatos WHERE id = " . mysql_real_escape_string($id);
}
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
$user = "root";
$pass = "";
$host = "localhost";
$base = "agenda";
mysql_connect($host, $user, $pass);
mysql_select_db($base);
$result = mysql_query($sql);
if($type == "all"){
$return = "";
while($data = mysql_fetch_array($result)){
$return .= "Nome: " .
$data['nome'] .
"<br />";
$return .= "E-mail: " . $data['email'] .
"<br />";
$return .= "Telefone: " . $data['telefone'] . "<br />";
$return .= "
";
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
}
}
else{
if($data = mysql_fetch_array($result)){
$return .= "Nome: " .
$data['nome'] .
"<br />";
$return .= "E-mail: " . $data['email'] .
"<br />";
$return .= "Telefone: " . $data['telefone'] . "<br />";
}
else{
$return .= "No foi possvel listar o registro com id: " . $id;
}
}
echo $return;
?>
Esse arquivo recupera uma varivel passada por GET e atribui a uma varivel $id. Uma rpida verificao feita para verificar se a id est vazia. Lembrando que nossa
aplicao deve retornar todos os registros caso nenhum registro especfico seja selecionado. Ento montamos as sentenas SQL e iniciamos uma conexo com o banco de
dados. Logo aps exibimos atravs do comando echo as informaes obtidas do banco de dados. Note que so exatamente essas informaes sero colocadas em nossa
pgina principal.
Vamos agora analisar uma maneira de inserir os dados utilizando uma requisio do tipo POST.
O primeiro passo para construir a insero de dados por Ajax est relacionado a construo de uma funo que ir construir uma string que ser passada como parmeto da
funo send do objeto XMLHttpRequest. Essa string semelhante aos parmetros passados depois passados de uma url quando trabalhamos com variveis de GET. Sua
formatao dada por variavel1=valor1&variavel2=valor2&...variavelN=valorN. Segue a funo que analisa os campos do formulrio passado como funo e gera essa string.
1. function generateFieldsValues(formInsert){
2.
var strReturn = new Array();
3.
4.
for(var i=0; i < formInsert.elements.length; i++){
5.
var str = encodeURIComponent(formInsert.elements[i].name);
6.
str
+= "=";
7.
str
+= encodeURIComponent(formInsert.elements[i].value);
8.
strReturn.push(str);
9.
}
10.
return strReturn.join("&");
11. }
A funo simplesmente pega o cada elemento do formulrio e gera uma samblagem no formato citado acima.
Agora vamos analisar a funo que faz a insero propriamente dita. Em primeiro lugar gera-se uma string com a funo anteriormente descrita. Os prximos passos so
semelhantes aos descritos para a utilizao da funo getById(). A nica diferena est na utilizao da requisio POST post ao invs de GET, e na passagem das variveis no
mtodo send.
1. function insertData(){
2.
var formInsert = document.forms[0];
3.
var fieldsValues = generateFieldsValues(formInsert);
4.
var result
= document.getElementById("result");
5.
6.
var XMLHttp = generateXMLHttp();
7.
XMLHttp.open("post", 'insertData.php', true);
8.
XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
9.
10.
XMLHttp.onreadystatechange = function (){
11.
if(XMLHttp.readyState == 4)
12.
result.innerHTML = XMLHttp.responseText;
13.
else
14.
result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
15.
};
16.
XMLHttp.send(fieldsValues);
17. }
O arquivo insertData.php um arquivo PHP que faz uma simples insero no banco de dados. Ateno para como se recuperam as informaes. Aqui, utilizamos a varivel
global $_POST ao invs de $_GET.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<?php
$nome
= $_POST['nome'];
$email
= $_POST['email'];
$telefone = $_POST['telefone'];
$sql = "INSERT INTO contatos (id, nome, email, telefone) VALUES ('', '$nome', '$email', '$telefone')";
$user = "root";
$pass = "";
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
$host = "localhost";
$base = "agenda";
mysql_connect($host, $user, $pass);
mysql_select_db($base);
if($result = mysql_query($sql)){
$return = "O registro foi inserido com sucesso!";
}
else{
$return = "Erro ao inserir o registro no banco de dados.";
}
echo $return;
?>
Nota: A utilizao dos arquivos PHP demostram apenas um exemplo de como o Ajax pode funcionar, lembrando que a linguagem pode ser substituda utilizando os mesmos
conceitos aqui explicados.
O exemplo da agenda um exemplo bsico, utilizando os conceitos bsicos e nativos da tecnologia Ajax. Na prtica existem muitas ferramentas ou frameworks que auxiliam
em sua utilizao. Vamos analisar agora a utilizao de Ajax com a ferramenta JQuery.
O modo com que se utiliza a biblioteca jQuery acontece de forma diferenciada que as implementaes em JavaScript. Como a ideia do jQuery simplificar, sua utilizao
concentrada em um nico lugar, evitando que se espalhem diferentes chamadas e funes por todo o cdigo.
Sua estrutura bsica :
1. $(document).ready(function() {
2. // faa alguma coisa quando o DOM estiver pronto
3. });
Assim, logo aps o documento estar carregado todas as funcionalidades descritas aqui sero aplicadas aos elementos HTML. Imagine por exemplo que se queira adicionar
uma funcionalidade a um boto, ento poderamos utilizar:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<html>
<head>
<title>Get Text</title>
<script language="javascript" src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$('#botao').click(function(){
alert($('#texto').attr('value'));
});
});
</script>
</head>
<body>
Digite seu nome:
<input id="texto" name="texto" type="text" maxlength="50" />
<input name="botao" type="button" id="botao" value="Ok"/>
</body>
</html>
Note que, o elemento boto no est ligado diretamente a nenhuma ao do JavaScript, isso fica por conta do que foi definido em $('#botao').click(function(){}); O objetivo
do artigo no entrar em detalhes da biblioteca de jQuery, mas focar na utilizao de seus recursos para a construo de sites com a tecnologia Ajax.
Existem diferentes formas para se trabalhar com Ajax utilizando a biblioteca jQuery, basicamente todas seguem a mesma lgica, mas sua sintaxe e recursos so diferentes.
A primeira forma de utilizar JQuery com Aajax atravs da funo load(). Nela observamos 3 parmetros:
1. url: o arquivo ao qual ser solicitada a requisio;
2. parmetros: so os parmetros a serem enviados para a pgina de destino;
3. callback: qual ser a funo de retorno a ser utilizada aps a execuo da pgina de destino, com os parmetros passados;
O prximo exemplo demonstra como seria possvel utilizar a tecnologia Ajax para criar um sistema CRUD (Create, Retrieve, Update e Delete) em uma aplicao web.
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
Note que nesse caso utilizamos a importao da biblioteca jQuery diretamente do servidor onde ela est hospedada, uma prtica interessante caso no se queira deixar uma
biblioteca junto de seus arquivos. Nesse exemplo utilizamos a biblioteca JQuery para aplicar uma determinada funo a todos os botes da pgina, isso pois procura-se pelo
seletor $("input[type=button]"). Para cada um desses botes, a funo click alterada e cria-se uma varivel chamada acao. Essa varivel recebe a string referente ao atributo
value do elemento HTML. Depois disso, utiliza-se a propriedade load() em um seletor que busca pelo div de id box. importante destacar que essa funo carrega
automaticamente o contedo retornado ao elemento que a estiver chamando, nesse caso um seletor que aponta para um div. Note que o primeiro parmetro o nome do
arquivo a ser executado, requisicao.php o segundo parmetro tem uma caracterstica especial utilizada pela biblioteca JQuery, onde formata-se {var:valor}. Dessa forma
possvel capturar atravs de uma varivel de POST dentro do arquivo PHP uma varivel com o nome var com o valor descrito. Ainda temos uma funo que chamada
depois que a solicitao terminou, a funo ready() foi criada logo abaixo das invocaes JQuery, justamente para demonstrar que possvel fazer uma mesclagem com a
linguagem JavaScript tradicional.
Abaixo temos o arquivo PHP que apenas filtra a ao passada (de acordo com o boto clicado) e para cada uma delas exibe uma mensagem.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<?php
$acao = $_POST['acc'];
switch($acao){
case 'Editar':
echo 'A ao selecionada editar';
break;
case 'Novo':
echo 'A ao solicitada criar';
break;
case 'Exibir':
echo 'A ao solicitada exibir';
break;
case 'Deletar':
echo 'A ao solicitada deletar';
break;
}
?>
Uma outra caracterstica interessante do mtodo load() a capacidade de filtrar o contedo a ser exibido. Colocando uma string contendo #nome_da_div que ser exibida
logo aps o nome do arquivo escolhido, temos um filtro automtico que ir buscar no contedo retornado somente a div especificada.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax com jQuery</title>
<style type="text/css">
#box {border:1px solid #ccc; padding:5px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(event) {
var acao = $(this).attr("value");
$("#box").load('dados.html #' + acao);
});
});
</script>
</head>
<body>
<p><input type="button" value="parte1" /></p>
<p><input type="button" value="parte2" /></p>
<p><input type="button" value="parte3" /></p>
<p><input type="button" value="Deletar" /></p>
<div id="box"></div>
</body>
</html>
Nesse exemplo usamos diferentes botes que carregam um contedo de acordo com o nome do boto que acionado.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div id="parte1">
<h1>Parte 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna ali
</div>
<div id="parte2">
<h1>Parte 2</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna ali
</div>
<div id="parte3">
<h1>Parte 3</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna ali
</div>
A Figura 5 mostra o carregamento de uma parte depois que o boto parte_1 acionado:
Alm do mtodo load() a biblioteca JQuery ainda oferece outras opes para utilizao de Ajax, a estrutura bem semelhante a que vimos do load():
$.post(url, parmetros, funo_retorno(data));
$.get(url, parmetro, funo_retorno(data));
Aqui os parmetros tambm so formatados especialmente, com uma lista de {variavel1: valor1, variavel2, valor2, ..., variavelN, valor}.
A principal diferena que ao invs de se colocar o contedo diretamente em um div selecionado, temos a opo de implementar uma funo que tratar os dados de retorno.
Nota-se que a diferena entre o $.post e o $.get est somente na questo de como os dados sero tratados no arquivo que receber a requisio.
1.
2.
3.
4.
5.
6.
7.
8.
9.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax com jQuery</title>
<style type="text/css">
#box {border:1px solid #ccc; padding:5px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
$(document).ready(function() {
$("input[type=button]").click(function(event) {
var texto = $('#txt').attr("value");
$.post('requisicao.php',{txt:texto},
function call_back(data){
$("#box").html(data);
});
});
});
</script>
</head>
<body>
<p><input type="text" id="txt" /></p>
<p><input type="button" value="Ok" /></p>
<div id="box"></div>
</body>
</html>
Note que o terceiro parmetro da invocao $.post a declarao de uma nova funo, chamada call_back e que apresenta um varivel data. Por definio essa varivel o
retorno da requisio efetuada.
1.
2.
3.
4.
5.
6.
7.
8.
9.
<?php
$txt = $_POST['txt'];
if(!empty($txt)){
echo "Voc digitou: " . $txt;
}
else{
echo "Campo est vazio.";
}
?>
Concluso
A tecnologia Ajax est presente na maioria dos grandes sites: Google, Twitter, Facebook, entre outros. Com a evoluo da Internet houve a necessidade de implementar algum
recurso que suprisse a a deficincia do modelo requisio-resposta do protocolo HTTP. Por esse motivo, quando se fala em Ajax, tm-se a ideia de algo novo, relacionado
com as novidades que compem a Internet 2.0.
O primeiro exemplo tenta demonstra em baixo nvel como realmente funciona uma implementao em Ajax, explorando suas propriedades. Desta forma, conceitua-se como
funcionamento do modelo requisio-resposta de forma assncrona.
O segundo exemplo utiliza a biblioteca JQuery e demonstra a utilizao de seus recursos para a implementao utilizando Ajax. Desta forma, fica claro que a primeira
implementao funciona bem para pequenos sistemas, entretanto ao se deparar com projetos maiores, tm-se a necessidade de alguma ferramenta que encapsule a camada de
Ajax, assim como o JQuery faz.
Existem ainda ferramentas que auxiliam no desenvolvimento com Ajax em um nvel mais abstrato, como por exemplo o Sajax para a linguagem PHP. O framework composto
por uma classe e uma srie de regras que em resumo transformam uma funo escrita na prpria linguagem PHP em uma funo JavaScript. Uma de suas desvantagens a
quantidade se sujeira gerada na pgina em que o Sajax funciona, para mapear a funo ele precisa escrever uma srie de outras funes em JavaScript que mascaram toda a
camada Ajax.
Por fim, importante salientar que Ajax uma tecnologia que pode ser vinculada a qualquer linguagem de programao para web. A parte inicial demonstrada nesse artigo,
bastante parecida para todas as linguagens, mas existem inmeras ferramentas e frameworks especficos para as linguagens que ajudam em sua utilizao.
Faa aqui o download dos arquivos de exemplo utilizados nesse post.
Escrito por:
Diogo Cezar
Graduado em Tecnologia em Informtica pela Universidade Federal do Paran (UTFPR). Professor na UTFPR ministrando as disciplinas: Programao para Web (XHTML,
CSS, HTML5, PHP, JavaScript, JQuery e Ajax), Programao Comercial (Plataforma .NET), Informtica Bsica (Suite Office 2007) e Projeto Integrador de Banco de
Dados.
Gostou? Compartilhe!
9
20
Curtir
2
Share
21
Tw eetar
Categorias
Acessibilidade
Ajax
Arquitetura de Informao
Asp.NET
Browsers
Cheat Sheets
CMS
Cores
Cotidiano
CSS
E-books
Editores
Feeds
FirefoxOS
Flash
Fontes
Guia CSS
HTML5
JavaScript
Links
Linux
Metodologias
Microformats
NoSQL
Oportunidades
Photoshop
PHP
Ruby on Rails
Semntica
SEO
Themes
Usabilidade
Web 2.0
WebStandards
Windows
WordPress
XHTML
Leia tambm:
03
fev PHP
set WebStandards
set JavaScript
set CSS
Comentrios
1.
Demais esse texto.
Gostei bastante da abordagem utilizada para introduzir o HTML. Eu poderia us-lo para fins didticos?
por Maykel 28 de fevereiro de 2012 @ 08:25 Responder
1.
Clao que poderia fique a vontade :) Esse um material que eu tambm utilizo para dar aulas.
Qualquer dvida por favor entre em contato.
por Diogo Cezar 28 de maro de 2012 @ 08:05 Responder
2.
Interressante.
por -W- 29 de fevereiro de 2012 @ 10:45 Responder
3.
Artigo perfeito, a partir daqui comeo meus estudos no AJAX.
Obrigado pelo contedo, foi de grande importancia para mim.
por Raphael Agneli 7 de maro de 2012 @ 14:42 Responder
1.
Obrigado amigo, fico feliz.
por Diogo Cezar 28 de maro de 2012 @ 08:06 Responder
4. Pingback: 10 Blogs que tenho em meu Leitor de Feeds | Escola Sites
5.
Ola Diogo
Fiquei se palavras ao ler tanta matria til. No sei se tenho capacidade para aprender tudo istoComo sou nova nos Blogs j li muitos trabalhos dos
colegas na tentativa de aprender, este artigo o mximo. Obrigada e parabns.
por Gregoria Correia 21 de maro de 2012 @ 16:11 Responder
1.
Obrigado Gregoria, fico feliz que tenha gostado. Mas no tenha medo de aprender. Coloque a mo na massa.
Fico a disposio para esclarecimento de qualquer dvida. Obrigado.
por Diogo Cezar 28 de maro de 2012 @ 08:07 Responder
6.
Parabns cara, tima matria.
por Cristher 2 de abril de 2012 @ 11:38 Responder
1.
Obrigado :)
por Diogo Cezar 2 de abril de 2012 @ 11:45 Responder
7.
Tu morreu? O blog acabou? rsrsrsrs
vlw
por Cleber Santos 28 de junho de 2012 @ 17:20 Responder
1.
Voc modificou algo? Fui procurar a linha 75 e no achei por aqui :P
por Diogo Cezar 2 de julho de 2012 @ 11:42 Responder
13.
Depois de ler todo o artigo com calma, diferentemente de outras vezes que fao quando leio algo na internet, dessa vez resolvi comentar. Simplesmente com o
intuito de que, se voc no me cobrou nada por me proporcionar esse contedo de qualidade muito rara, devo ao menos agradec-lo, com um msero
comentrio e lhe dizer que a sua qualidade muito boa. Entendi o bsico do ajax como nunca.
Parabns Diogo Cezar.
por Gustavo 3 de agosto de 2012 @ 06:13 Responder
1.
Muito obrigado amigo :)
por Diogo Cezar 12 de agosto de 2012 @ 23:16 Responder
14.
timo script.. Parabns!
Porm estou com problema de acentuao na hora de salvar no BD.
se eu insiro nos campos no BD salva como
Inseri no index.php:
Inseri na chamada do script dentro do index.php isto:
>
Inseri tambm no arquivo insertData.php isto:
header(Content-Type: text/html; charset=UTF-8, true);
Ms, sem sucesso.. continua salvando no BD com caracteres especiais
Algum tem uma soluo?????
por marcelo 12 de agosto de 2012 @ 23:14 Responder
1.
Ol amigo, uma prtica comum transformar os caracteres em utf8 ao enviar para o ajax e depois destransformar no PHP. D uma procurada na
funo que faz isso em PHP e uma compatvel em JS.
Abraos.
por Diogo Cezar 12 de agosto de 2012 @ 23:18 Responder
15.
Caramba, no faltou nada nessa AULA !
por Alexandro Maceiras 1 de setembro de 2012 @ 19:40 Responder
1.
Obrigado Alexandro.
por Diogo Cezar 1 de setembro de 2012 @ 19:42 Responder
16.
Excelente artigo! Muito didtico e preciso, me ajudou bastante a compreender quanto conhecimento tenho, em relao ao que gostaria de ter. Parabns.
por Danilo 8 de setembro de 2012 @ 12:04 Responder
1.
Obrigado Danilo :)
por Diogo Cezar 8 de setembro de 2012 @ 12:18 Responder
17.
Nossa!!!
Excelente didtica, meus parabns.
por Elton 3 de outubro de 2012 @ 09:17 Responder
1.
Muito obrigado Elton.
por Diogo Cezar 3 de outubro de 2012 @ 10:06 Responder
18.
Nota 10 para o professor. Parabns,
esse o artigo mais claro que j li.
Felicidades para voc.
por jailson 28 de outubro de 2012 @ 13:45 Responder
1.
Obrigado Jailson :)
por Diogo Cezar 16 de novembro de 2012 @ 08:22 Responder
19.
Sem artigo DEZ!!!
Aprendi a fazer muitas coisas: cadastros, logins, alterao de senhas..etc.
Mas estou engasgado na questo dos radio buttons.
Eis a questo:
1) Pgina principal:
Selecionar o radio masculino ou feminino
2) PHP
Processar o valor do radio marcado na pgina principal
Conferir com a resposta no banco mysql se est certa ou errada
3) mysql
Tabelas com nomes de vrias pessoas e com campo sexo.
Minha dvida:
A questo do PHP e do banco de dados eu j fiz, s no consigo pegar o valor do radio button marcado na pgina principal e envi-lo para a pgina PHP.
Desde j agradeo pela ateno.
Obrigado
por Nilton Fontes 28 de novembro de 2012 @ 10:02 Responder
20.
Parabens! Excelente artigo! Onde voce da aula, para eu poder assistir, muito parabens!
por Thiago Duarte 19 de fevereiro de 2013 @ 17:36 Responder
1.
Ol amigo, atualmente dou aula apenas na Ps Graduao em Java (Matria JSP e Servlets) na Universidade Tecnolgica Federal do Paran
(UTFPR).
Abraos.
por Diogo Cezar 19 de fevereiro de 2013 @ 21:30 Responder
21.
timo artigo. Muitos desenvolvedores no fazem idia do que ocorre em uma requisio via Ajax, pois usam somente o jQuery pra isso.
Acredito que o jQuery esteja prejudicando um pouco o aprendizado do JavaScript, pois a facilidade algo tentador.
por Marlon Pacheco 3 de maro de 2013 @ 14:34 Responder
1.
Ol Marlon, o jQuery muito til, realmente. Mas tem essa desvantagem, no sabemos o que se passa por trz de suas funes, por isso importante
estudar como fazar as coisas da maneira nativa tambm.
Abraos.
por Diogo Cezar 3 de maro de 2013 @ 17:26 Responder
22.
Nossa adorei o tutorial, estou procurando saber mais sobre essa tecnologia e adorei o que encontrei aqui. Meus parabns mesmo.
por Miike 2 de abril de 2013 @ 13:41 Responder
23.
timo artigo parabns continue postando, tem um outro site que eu recomendo tambem Scriptcase.
por ricardo 11 de julho de 2013 @ 17:45 Responder
24.
Me surpreendeu. vlw
por fabio 21 de agosto de 2013 @ 22:14 Responder
25.
Adorei o material, muito bom mesmo, eu j tinha lido um livro sobre ajax mas seu artigo desmestificou muitas duvidas minhas, obrigado mesmo amigo!
por Jhonas Nascimento 7 de outubro de 2013 @ 06:07 Responder
26.
belo post amigo muito completo
por paulo robson 3 de janeiro de 2014 @ 09:07 Responder
1.
ta de parabens
por paulo robson 3 de janeiro de 2014 @ 09:08 Responder
27.
Nossa cara demais , consegui ter aquela noo inicial da coisa , na verdade comeei a procurar sobre o assunto por uma necessidade que eu tive que eu
preciso fazer um update no bd ao fechar o navegador ai td mundo falava usa AJAX ai eu ia procura s vinha aquelas coisas ferradas com todos comandos
com mais de 10 letras que ngm explicava nada hasuhsuahua ou seja ficava boiando no entendia nada saia sem entender e achando que era um bixo de 7
cabeas e desestimulado a procurar mais sobre o assunto ai achei esse seu artigo ai resolvi lelo com calma porque vi que tinha bastante coisa e o titulo que
voce deu foi bem objetivo ento ja imaginei que encontraria o noo basica do que eu queria ento me ajudou muito eu realmente consegui ter essa noo ,
continue fazendo artigos assim ta de parabns XD
por Renan 13 de janeiro de 2014 @ 19:14 Responder
28.
Preciso converter um sistema Desktop para Web vou precisar de tudo isso e mais um pouco.
Post muito til parabns.
por Renato 23 de janeiro de 2014 @ 16:27 Responder
29.
Excelente artigo, muito bom mesmo . Aprendi bastante. Parabns pela iniciativa.
por Sergio 1 de fevereiro de 2014 @ 09:44 Responder
30.
Ol, realmente timo artigo. Apenas voc, autor, deveria verificar toda a escrita porque tem muitos errinhos de portugus, at mesmo nos cdigos, tem
algumas coisas erradas. Eu que estou tentando aprender, seguindo os cdigos que possuem PHP, acima do artigo do JQuery, esse exemplo que voc deu tem
alguma coisa errada porque no funcionou. Por exemplo, quando eu clico no boto Ok para carregar id, aparece a seguinte mensagem Warning:
mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\wamp\www\SistemaManutencao\trunk\teste\teste_AJAX\getData.php on line 24.
E se eu tenho inserir dados aparece a mensagem Erro ao inserir o registro no banco de dados.. O que devo fazer para consertar essas linhas de cdigo?
por Lygia 10 de fevereiro de 2014 @ 17:51 Responder
1.
kkkkkkkk com todo respeito , eu acho que errinhos de portugus no so nada mesmo porque portugus algo inventado por ns para poder se
comunicar ento se ele conseguiu exercer a funo de se comunicar do que que importa se h um erro de portugues ?? se eu falar necessrio ou falar
nesesario voce entende do mesmo geito o que eu estou querendo dizer ento pra que ficar falando que um erro de protugues , mesmo proque(escrevi
proque de proposito pra ver como voce consegue entender que estou querendo dizer porque) eu posso inventer minha lingua em que todas palavras
comeam com s e isso vai estar certo mas a grande realidade que isso no faz o menor diferena no casso da programao diferente se eu escrever
mysql_fetch_array() vai ta certo agora mysql_fetch_arrai() vai ta errado porque o pc interpreta isso por 0 e 1 codigos binarios o pc no tem um crebro
capaz de identificar que voce ta querendo dizer mysql_fetch_array() ento ai no caso voc tem que escrever certo mas agora para nos que temos um
crebro capaz de dissernir isso pra que ficar falando que tem erro de portugues , eu posso falar que esse erro no um erro simplesmente uma
variao do portugues que eu inventei mesmo proque foi uma pessoa como voce como eu que inventou isso ento dando para se comunicar ta bom mas
que as pessoas hoje em dia so muito alienadas e presas ao condicionamento da sociedade , veja bem : voc tem que ir de terno para trabalhar mas
no nesesario pra absolutamente nada o terno , at proque vivemos em um pais de clima tropical mas insistimo de imitar os europeus , terno foi feito
pra europa que tem clima frio no para nos que temos clima tropical , mas como as pessoas so alienadas simplesmente fazem e no questionam no
querem nem saber simplesmente falam que esta certo e isso do terno s um exemplo basico porque assim com tudo
,enfim querida , falo isso com base sinceramente sou doutorado em matematica e grande mestre em xadrez , no fique ofendida com isso simplesmente
leia e reflita desculpe fugir um pouquinho do assunto.
Comentrio
Voc pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code>
<del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Publicar comentrio
Assine o Feed
Contato