ok

Busca
Assine o Feed
Contato
Menu
FeedBurner PW
PW no Facebook
@pinceladasdaweb
github.com/pinceladasdaweb

Diogo Cezar em 16 de fevereiro de 2012

PHP

Aplicaes dinmicas com PHP e Ajax

Como seria possvel imaginar a vida sem a Internet? Atualmente um profissional que no est familiarizado com a web certamente est com sua carreira em risco. Isso porque
inevitavelmente o que estamos acompanhando nos ltimos tempos a convergncia dos produtos e servios para a Internet. A dimenso dessa transformaes pode ser
exemplificada quando tomamos como exemplo a indstria que distribui matrias audiovisual (emissoras de tv, distribuidoras de cds, dvds ou blue-rays).
Na dcada de 90, alugar um filme ou comprar um CD era a nica maneira de consumir um entretenimento especfico. Com a evoluo da Internet criou-se uma nova forma de
consumo, que inevitavelmente tomou o lugar dessa indstria. Isso se deve as inmeras vantagens que a web oferece para seu consumidor, as principais so que o contedo
na maioria das vezes gratuito, e possvel assistir quando e onde quiser.
Mas a Internet nem sempre foi o que hoje. Os recursos que acessamos hoje passaram por uma grande evoluo. lgico que com o aumento na velocidade de transmisso
de dados, tornou-se vivel o consumo de udio e vdeo, entretanto as tecnologias que envolvem tais recursos tambm passaram por uma grande evoluo.

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.

Cada navergador com sua interpretao

Um dos problemas recorrentes na rea de desenvolvimento para web que cada navegador interpreta o cdigo HTML de uma forma diferente. Isso um grande problema
para desenvolvedores que tem que deixar o site o mais compatvel possvel dentre os navegadores presentes. Mas Sse existe um padro criado pela W3C por que cada
navegador insiste em interpretar o cdigo a sua prpria maneira?
Quando o HTML 4.01 foi especificado, tags foram criadas e seus objetivos estipulados, entretanto nada foi documentado com relao a como os navegadores deveriam
interpretar essas tags, Isso deu origem a incompatibilidade da mesma codificao em navegadores diferentes; o que acontece que cada navegador tenta adivinhar como
interpretar determinada tag quando ela no est implementada de forma correta.
Outra questo que existe uma certa averso por parte de certas empresas em adotar os padres estabelecidos, mas o que nota-se uma convergncia para tal unificao.
Assim a maioria das empresas que desenvolvem navegadores esto adaptando seus produtos para o padro estabelecido pela W3C que atualmente j aponta para o HTML5.

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.

Como funciona o Ajax

A Internet funciona em um modelo de requisio resposta. Em sites, esse protocolo apresenta-se ineficiente. Isso porque necessrio carregar uma pgina completa a cada
requisio e ainda preciso esperar seu carregamento antes de liberar o usurio para a tomada de qualquer outra ao na pgina em questo.
O que a tecnologia Ajax permite uma comunicao assncrona, dessa forma uma pgina principal carregada, e quando um usurio interage em determinada seo doa site
uma nova requisio feita de forma transparente (sem que o usurio precise esperar uma nova pgina ser carregada) interagindo somente com aquele trecho do site.
Na Figura 1 observa-se uma representao de comunicao sncrona em uma pgina tradicional. Nota-se que para cada requisio (seta orientada para direita) existe uma
resposta (seta orientada para a esquerda).

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.

E como ficam os JavaScript?

Agora vamos analisar detalhadamente como toda a mgica acontece. Quando contextualizamos o incio da tecnologia Ajax citamos o objeto XMLHttpRequest criado pela
empresa Mozilla em 2002. E exatamente com esse objeto que vamos trabalhar.
A primeira funo a ser analisada no arquivo func.js a funo generateXMLHttp(). Essa funo tenta exaustivamente criar o objeto XMLHttpRequest. O que acontece que
pela incompatibilidade de alguns navegadores tenta-se criar o objeto padro, caso no seja possvel sua criao, tenta-se uma serie de outras verses semelhantes do prprio
objeto, implementada para diferentes navegadores. Todas essas verses esto armazenadas em um vetor nomeado de versions. Depois das tentativas se nenhum objeto
conseguir ser criado, retorna-se uma mensagem ao usurio dizendo que seu navegador incapaz de trabalhar com a tecnologia Ajax.
1. function generateXMLHttp() {
2.
if (typeof XMLHttpRequest != "undefined"){
3.
return new XMLHttpRequest();
4.
}
5.
else{
6.
if (window.ActiveXObject){
7.
var versions = ["MSXML2.XMLHttp.5.0",
8.
"MSXML2.XMLHttp.4.0",
9.
"MSXML2.XMLHttp.3.0",
10.
"MSXML2.XMLHttp",
11.
"Microsoft.XMLHttp"
12.
];
13.
}
14.
}
15.
for (var i=0; i < versions.length; i++){
16.
try{
17.
return new ActiveXObject(versions[i]);
18.
}catch(e){}
19.
}
20.
alert('Seu navegador no pode trabalhar com Ajax!');
21. }

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.

Ajax com jQuery

jQuery uma biblioteca escrita em JavaScript desenvolvida com o objetivo de simplificar a interao com os objetos HTML. Com a utilizao da biblioteca jQuery os
desenvolvedores podem se concentrar na construo lgica de suas aplicaes enquanto deixam para a biblioteca a misso de garantir a compatibilidade (discutida
anteriormente) entre os navegadores.
Outra grande vantagem em se utilizar JQuery, que esto disponveis na web uma infinidade de plug-ins que o utilizam como base e sua infinidade de recursos. Dentre suas
principais funcionalidades podemos destacar:
resoluo da incompatibilidade entre os navegadores;
reduo de cdigo;
reusabilidade do cdigo atravs de plug-ins;
implementao segura de recursos do CSS1, CSS2 e CSS3;
utilizao de uma vasta quantidade de plugins criados por outros desenvolvedores;
trabalha com AJAX e DOM.
A biblioteca jQuery no requer instalao. Por se tratar de um arquivo JavaScript formal, basta que voc crie um link para o arquivo, na seo head do documento onde o
script ir rodar, tal como faz com qualquer arquivo JavaScript tradicional.
1. <script type="text/javascript" src="../jquery.js"></script>

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.

<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 type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(event) {
var acao = $(this).attr("value");
$("#box").load('requisicao.php',{acc:acao},ready());
});
});
function ready(){
alert('Ajax terminou com sucesso.');
}
</script>
</head>
<body>
<p><input type="button" value="Exibir" /></p>
<p><input type="button" value="Editar" /></p>
<p><input type="button" value="Novo" /></p>
<p><input type="button" value="Deletar" /></p>
<div id="box"></div>
</body>
</html>

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;
}
?>

A Figura 4 mostra a tela de exemplo da aplicao criada utilizando a biblioteca jQuery.

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.";
}
?>

A Figura 6 mostra o exemplo depois da transferncia da informao digitada.

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

Ajax PHP MySQL Newsletter

Recentemente desenvolvi um script para cadastro de Newslestter que utiliza Ajax(com jQuery), PHP e MySQL. Resolvi ento disponibilizar o cdigo no meu Github. O cdigo
responsvel somente por gravar
30

set WebStandards

Upgrade your brain

Listas de discusso, fruns, blogs, redes sociais so um timo aperitivo para se manter atualizado. Por incrvel que parea, newsletters tambm so, pode parecer meio retr
isso, mas a cada
23

set JavaScript

Confesso: Minha vida virou o caos sem jQuery

Todo mundo sabe que legal utilizar jQuery, ele agiliza e ajuda muito no desenvolvimento web, mas ser que ele necessrio pra tudo mesmo? Aps eu ter entrado na
16

set CSS

CSS3 Perspective Carousel

Eu e Marco Bruno desenvolvemos inicialmente esse carousel para um produto da Locaweb. Para que o mesmo tivesse essa forma utilizamos CSS3 Transform, Rotate e
Transtitions e jQuery para efetuar

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

por Joo Pinho 2 de abril de 2012 @ 16:12 Responder

8.
Excelente artigo! Quem diz que o php morreu ta bem enganado!
por mestre dos sites 23 de maio de 2012 @ 09:50 Responder
1.
Exatamente :)
por Diogo Cezar 23 de maio de 2012 @ 17:46 Responder
2.
php morreu ? aonde vc tirou isso ???? php o que mais cresce
por Luiz 23 de setembro de 2012 @ 16:59 Responder
9.
parabens, nunca vi um artigo to didatico , direto e util como o seu
por agn 23 de maio de 2012 @ 17:25 Responder
1.
Obrigado amigo :)
por Diogo Cezar 23 de maio de 2012 @ 17:46 Responder
10.
timo artigo, gostaria de saber seguindo seu exemplo, como pegar os dados de um campo select. como devo agregar ele ao evento. como ficaria? meu
exemplo.
Selecione uma rodada:
1 Rodada
2 Rodada
3 Rodada
como ficaria a funcao js
$(document).ready(function() {
$(input[type=button]).click(function(event) {
var texto = $(#rodada).attr(value);
$.post(extrato-aposta-original.php,{txt:texto},
function call_back(data){
$(#dados).html(data);
Obrigado.
por Guilherme de lacerda martins 13 de junho de 2012 @ 10:32 Responder
1.
Eh por ai mesmo amigo. D uma olhada na documentao oficial do Jquery. L tem alguns exemplos com os selects :)
por Diogo Cezar 25 de junho de 2012 @ 23:54 Responder
11.
Parabns. Sem exagero, a melhor explicao sobre AJAX que encontrei at hoje. Simples na dose certa e um esclarecimento fantstico.
por Jovaks 26 de junho de 2012 @ 08:29 Responder
1.
Fico feliz :) Obrigado.
por Diogo Cezar 26 de junho de 2012 @ 10:00 Responder
12.
Parceiro, boa tarde
Perfeito o artigo, a didtica est excelente.
S uma dvida, ao executar o exemplo, o mesmo rodou normalmente mas no log de erro do morzila e do IE 7 est apontando um errinho. Ele no impede
nada mas o que pode ser?
veja:
Erro: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.statusText] nsresult:
080040111 (NS_ERROR_NOT_AVAILABLE) location: JS frame :: http://localhost/agenda/func.js :: anonymous :: line 75 data: no]
Arquivo-fonte: http://localhost/agenda/func.js
Linha: 75

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.

por Portugues 11 de fevereiro de 2014 @ 15:34 Responder

31.
Ol Lygia, quanto aos erro, fique vontade para list-los e envi-los por e-mail pra min ou para o editor do site :) Ningum perfeito, acredito que em um
artigo deste tamanho alguma coisa sempre passa mesmo. Se realmente te deixou incomodada, fique vontade para deixar a dica ;)
Quando fiz o artigo, todos os arquivos funcionavam, isso foi em 2012 ou seja a 2 anos, pode ser a verso do seu Php ou algo assim.
Eu infelizmente no tenho tempo para corrigir e resolver o problema de um por um, mas acredito que como a maioria das pessoas (que teceram elogios) o
artigo tem um objetivo maior, explicar o que os exemplos fazer, e por isso, consultando o google, fica fcil de resolver.
Forte abrao.
por Diogo Cezar 10 de fevereiro de 2014 @ 18:06 Responder
32.
Muito obrigado pela matria, com certeza um dos melhores artigos sobre Ajax em portugus.
Repassarei para amigos. Continue assim.
por Lucas 2 de abril de 2014 @ 11:44 Responder
33.
Ol! timo Post, me ajudou muito mesmo!! Parabns :)
por Joo Gustavo Balestrin dos Santos 7 de maio de 2014 @ 15:24 Responder
34. Pingback: Diogo Cezar Blog Archive Aplicaes dinmicas com PHP e Ajax
35.
Parabns, excelente artigo!
por Diogo 6 de agosto de 2014 @ 08:55 Responder

Deixe uma resposta

O seu endereo de email no ser publicado Campos obrigatrios so marcados *
Nome *
Email *
Site

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

Notificar-me de novos comentrios por e-mail

Assine o Feed
Contato