Jump to content


Photo

Pra Quem Ainda Não Entende Ajax.


  • Faça o login para participar
106 replies to this topic

#1 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 11/05/2006, 12:37

*
POPULAR

Bom, sobre o AJAX eu não sou nem TRUE e nem FALSE, eu sou NULL, por isso não perguntem se eu sei usa-lo da melhor forma, se eu recomendo, ou se sou contra. Não sei, nunca fiz nenhuma aplicação de grande porte que necessitasse, portanto não vou comentar, simplesmente NULL. E quem garante que eu sei o que é AJAX ?? Nunca ouviram a frase: "Quem sabe faz, quem não sabe ensina!" ??

Antes de COMEÇAR a ler este post você se compromete aos seguintes termos:
- Eu tenho conhecimento pleno em HTML.
- Eu conheço JavaScript.
- Eu já usei um pouco algumas coisas de DOM.
- Sei o que é XML.
- Também sei que AJAX só funciona com requisições http, ou seja, não vou acessar assim: c://Documents and Settings/eu_mesmo/meu primeiro ajax.js e muito menos file:/// ...
- Sei que isso não é um código completo e não vou perguntar: "Como mudo 'isso' pra 'churisso' e coloco no meu site de video games ?? PLZzzorRR !!11!"

Eu avisei...

Esse post não é mais um dos vários exemplos de como utilizar o AJAX para fazer 2 selects, cadastrar alguma informação e etc.. porque vejo que normalmente são usuários que não tem tanto conhecimento sobre Javascript que utilizam os códigos dos tutoriais e querem fazer alterações, sem ao menos saber o porque daqueles 'comandos' dentro da função. Ou estou errado ?? Todo mundo que tem uma aplicação AJAX que seja no site sabe o porque do número 4 no "var.readyState == 4" ??? Garanto que quem fez o código do tutorial sabe, mas quem copiou o código e colou no dreamweaver salvando com o mesmos nomes não sabe. Pensando nisso eu vou dar um breve comentário sobre algumas coisas que fazem parte das funções mais conhecidas.

Primeiro de tudo você tem que inicar a requisição ao navegador. Para isso vamos inicar uma instância do objeto XMLHttpRequest. Mas como todo mundo tá careca de saber tem as diferenças de navegador. A família Safari, Mozilla usa de uma forma os os IElike usam de outra. Tá explicado o porque de:

var variavel;
if (window.XMLHttpRequest) {
variavel = new XMLHttpRequest();
} else if (window.ActiveXObject) {
variavel = new ActiveXObject("Microsoft.XMLHTTP");
}


No quote acima eu crio uma variavel com o nome de 'variavel', depois eu testo o objeto XMLHttpRequest(pra a família Mozilla, Safari), se ele retornar TRUE a variavel vai criar o objeto, senão vai pra proxima tentativa que é pra família IE. É comum ser usado junto com a inicialização do objeto o try..catch, que é uma função do Javascript (tá aí o porque era bom saber um pouco de Javascript). O try..catch serve para pegar o erro e não mostrar pro usuario aquela janelinha "There's an error, do you wish to debug ?". Apesar que o try..catch só é suportado a partir do IE5+ e Mozilla 1+ (Se você pensa que vai segurar o erro quando o cara estiver usando o IE4 pode esquecer, use onerror). O try..catch funciona assim, imagine que eu queria dar um alert e sem querer errei a digitação:

var msg;
function mostraAlerta(){
try{
aalert("Olá");
}
catch(erro)
{
msg = "Ocorreu um erro na página. \n";
msg+ = "Clica no OK pra continuar";
alert(msg);
}
}


Chega de try..catch, não é o objetivo do post. Bom, vamos ver agora os métodos do XMLHttpRequest. Estão nesse formato:

Nome = Descrição. Meu comentário.

abort() = Aborta a atual requisição. Precisa de comentários ? Então tá bom, você pode usar caso fique com medo do seu servidor demorar para devolver a requisição. Crie na função que manda a requisição um TimeStamp, caso ela demore muito você aborta e dá uma mensagem de erro.

open("método", "URL"[, assíncrono [, "usuario"[, "senha"]]]) = Define a URL, o método e os parâmetros adicionais da requisição a ser enviada. Provavelmente esse é o método que você mais verá, junto com o send(). ELe é responsável por definir os parâmetros da requisição. Os métodos podem ser POST ou GET, e o 'assíncrono' que tem na sintaxe do método é o que define se a execução do script é feita imediatamente após o método send() ser chamado ou se aguarda por uma resposta. Use as flags TRUE ou FALSE. O problema de usar o FALSE é que se o seu servidor ficar sem responder a tela do navegador vai ficar congelada, mais ou menos quando trava tudo no PC. Os outros parâmetros são opcionais.

send(conteúdo) = Transmite a requisição, opcionalmente com dados postados ou dados DOM. É isso mesmo, esse método que vai enviar a requisição. Se você usar GET e passar os dados pela URL use send(null), se usar POST é só colocar o conteúdo a ser passado aí dentro. Mas usando o POST você tem que enviar alguns cabeçalhos junto. Veja mais no outro método.

setRequestHeader("label","valor") = Define um label/valor para o cabeçalho que será enviado junto com a requisição. Nem traduzi o label porque fica feio.

Olhe os 2 exempos abaixo e veja se entende melhor:

var.onreadystatechange = functionPraTrabalharARequisicao;
var.open("GET", url, true);
var.send(null);


var.open("POST", url, true);
var.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
var.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
var.setRequestHeader("Pragma", "no-cache");
var.onreadystatechange = functionPraTrabalharARequisicao;
var.send("Nome=" + Nome);


Eu defini nos cabeçalhos que os dados serão enviados como se fossem um formulário normal. E no outro eu defini que não é pra armazenar as informações em cache, porque as vezes acontece de devolver a mesma requisição, ou outros problemas.

Agora vamos ver as propriedades. Neste formato:

Nome = Descrição. Meu comentário.

readyState = Número inteiro com o status da requisição. Devolve como um número inteiro o status da sua requisição. Só isso.
0 = Não inicializado
1 = carregando
2 = carregado
3 = Interagindo
4 = Completo

onreadystatechange = Gerenciador de eventos a cada mudança de estado. Agora ferrou hein ??. Nada mais é que uma função que será responsável por checar se a requisição já foi processada. Por isso a comparação "readyState == 4", toda vez que mudar de estado uma função que você definir será responsável por essa verificação, então no seu código quando o estado for 4 você continua. A menos que você queria seguir no 1 ...

var.onreadystatechange = workSend;
var.open("GET", url, true);
var.send(null);


No exemplo acima eu defini que a função workSend() será a responsável por trabalhar com os valores retornados por readyState. É comum ver nessas funções somente a comparação "var.readyState == 4", mas nada impede de ser assim:

var.readyState == 0 -> Peraí que já vai começar
var.readyState == 1 -> Aee, seguuurraaa peãaaoo
var.readyState == 2 -> UUUhhhhhuuuuu, vamo que vamo
var.readyState == 3 -> Vamo lá cabloco, tá chegano
var.readyState == 4 -> Aqui você trabalha seu resultado

responseText = Versão 'string' dos dados devolvidos pelo servidor após processar a requisição. É somente isso que ela faz, nada mais. Simples e cru.

responseXML = Idêntica a de cima, mas devolve os dados no modelo DOM.

status = Código numérico retornado pela requisição ao servidor. É diferente do readyState, esse código é 200, 404, etc.. que no caso um 200 é que a página foi encontrada e está tudo OK, o 404 é que não achou .. etc..

statusText = Mensagem que acompanha o código do status. Você pode usar para exibir ao usuário a mensagem de erro retornada. Ex.:

if (var.status == 200) {
// ...se funfar você faz aqui suas paradas...
} else {
alert("Ouve um problema com sua requisição:\n" + var.statusText);
}


Bom, é isso ae, acho que agora fica mais fácil pra quem ainda tinha dúvidas sobre AJAX para já ir resolvendo alguns dos seus problemas sozinhos, dá pra esclarecer um pouco sobre os comandos e como utiliza-los. Não são todos os métodos e propriedades, tem muito mais por esse mundo afora.

T+

Edição feita por: bimonti, 29/07/2006, 16:04.

WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#2 pgnall

pgnall

    Enable

  • Usuários
  • 383 posts
  • Sexo:Masculino
  • Localidade:http://eduardo.sganzerla.net

Posted 23/07/2006, 10:52

Valeu cara, exatamente o que eu precisava...
Parabens !
Eduardo Sganzerla
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀


www.Eu Sei Escrever.com.br - Adote esta campanha!

#3 carneiro

carneiro

    programador web

  • Usuários
  • 155 posts
  • Sexo:Não informado
  • Localidade:cascavel - pr
  • Interesses:programação e design para web

Posted 26/07/2006, 15:38

Parabéns mesmo.. Nota 10..
Não basta fazer funcionar, tenque entender o código...

Parabéns novamente...
Descrição
Alexandre Magno Semmer
www.alexandresemmer.com
Programador Web

Programação
ASP, PHP, JavaScript, CSS, SQL, JAVA, C, Paschal, Ajax, XML
Usuário
Posted Image
Links
Ajax Online - FireBug (Firefox) - Documentação PHP - Documentação Prototype - Documentação jQuery - Script.Aculo.Us

#4 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 27/07/2006, 07:52

Eita, depois de alguns meses acharam o tópico, eu tinha ficado triste que ninguem tinha comentado. Lendo por cima de novo eu achei algumas partes que tem informações omissas .... depois eu dou um tapa no post.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#5 Paulo Freitas

Paulo Freitas

    ××××××× LRU #456504 ××××××× ××××××× LRM #364686 ×××××××

  • Ex-Admins
  • 5612 posts
  • Sexo:Masculino
  • Localidade:Campinas - SP

Posted 29/07/2006, 10:48

Gostei da ditática, vou pendurar aqui por enquanto (será criada uma seção para AJAX posteriormente). ;)

[]’s :D Até mais

#6 Regis CMU

Regis CMU

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Não informado

Posted 27/09/2006, 15:17

tentei usar ess script mas não funcionou nem a primeira linha.....

o que será que estou fazendo de errado ??? sou novato no php e tbem preciso pegar os usuários do windows para acessar minha intranet.... :angry:

#7 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 27/09/2006, 17:12

Jura que não funcionou ??? Será que é porque não tem nenhum script aí ?? :P

São somente trechos de scripts para demonstrar o uso de algumas propriedades e métodos do XMLHttpRequest, bem no começo do tópico tem algumas informações úteis, pra fazer funcionar alguma coisa você tem que ler o tópico inteiro e ir montando o seu próprio script baseado no que entender.

Qualquer coisa volte a postar.

PS.: Fiquei de arrumar o post mas ainda não deu tempo, mas tá na lista aqui.
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#8 braulio

braulio

    Normal

  • Usuários
  • 117 posts
  • Sexo:Não informado
  • Localidade:Belo Horizonte - MG

Posted 29/10/2006, 17:22

Parabens!
Muito bom, apesar de light !
Vlw!

#9 Silverfox é hipnos

Silverfox é hipnos

    Turista

  • Usuários
  • 29 posts
  • Sexo:Masculino

Posted 05/11/2006, 23:03

Essa parte deveria corrigir acentos pórem num corrige nada
var.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");

Cara caso vc use metodo POST no "open" vc naum prescisa dessa parte,
por q o POST ignora o cache
var.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
var.setRequestHeader("Pragma", "no-cache");

Eu postei um tópico relacionado sobre esses "setRequestHeader" gostaria q vc me ajuda-se:
http://forum.wmonlin...howtopic=164228

Valew

Ajax é muito bom

  • Depois de refletir se usaria o naum
  • Cheguei a conclusão, Sim eu usarei Ajax
  • Descobri maneiras de usa-lo só uma vez, pra carregar varios arquivos sem prescisar
  • rodar minha script pra cada arquivo
  • Como rodar scripts de páginas carregadas por Ajax
  • Como usar fazer o onload de páginas carregadas por Ajax funcionarem
  • Ideias novas e novas soluções


#10 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 06/11/2006, 14:26

Isso:
var.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");

Não corrige acentos, é um pedido de alteração do MIME Type para um formulário padrão. Se não utilizar isso alguns navegadores ignoram pedidos feitos por POST.

E até o ponto que eu sei e após algumas aplicações em AJAX o método de envio POST armazena as informações em cache da mesma forma que GET.

Se você tem tanta convicção de que o POST não grava em cache porque postou outro tópico perguntando como não gravar em cache ??

Isso costuma evitar o armazenamento de informações em cache:
var.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
var.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
var.setRequestHeader("Pragma", "no-cache");

Como é melhor previnir do que remediar eu também envio os cabeçalhos nas páginas dinâmicas (php,asp,..), e diferente dos exemplos que voce postou no seu outro tópico não é necessário colocar os cabeçalhos no topo da página antes de enviar as informações. Imagine que você queria alterar o MIME Type dependendo do resultado de uma consulta ?? A maioria das (se não todas) linguagens têm funções para segurar os headers, então você pode iniciar o buffer no começo da página e soltá-lo no fim após definir todos os headers necessários para devolução.

O que pode estar acontecendo que você não consegue atualizar as informações corretamente é que o IE5 e o IE6 tem um bug, aliás, 2 .. cada 1 tem 1 bug.

O IE6 tem um buffer de 64k que deve ser preenchido antes de uma página ser armazenada em cache, o problema está que quando você usa o Pragma (geralmente no HEAD do documento) ainda não há nenhuma página para ser armazenada, então o Pragma é ignorado, e a página fica em cache. Uma solução é colocar uma meta tag duplicada na página, uma no cabeçalho e outra no fim da página:

<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>
<body>
</body>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</html>

Já no IE5 usar Pragma não funciona de nenhuma maneira, então você tem expirar o conteúdo de outra forma, e pra ter certeza que funcionará use duplicada também:

<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
</body>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</html>

Caso isso ainda não resolva o problema de cache faça uma leitura nas especificações:
http://ietf.org/rfc/rfc2616
http://www.w3.org/TR/XMLHttpRequest/

Edição feita por: bimonti, 06/11/2006, 15:09.

WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#11 Silverfox é hipnos

Silverfox é hipnos

    Turista

  • Usuários
  • 29 posts
  • Sexo:Masculino

Posted 21/11/2006, 01:02

bimonti vc viajou por q essas tags em Javascript naum funcionam de maneira nenhuma e eu sei mecher no cache e na decoficacao por PHP asp html e a maioria das linguagens...
eu não perguntei como impedir de gravar no cache (isso eu jah sei fazer em quase todas linguagens)...
Eu quero saber apenas desses códigos em ajax...

o por q falam q eles naum fazem correcao no texto(ou coloca em encode) e naum impedem a gravacao de cache se essas tags naum fazem isso...

Aliais nem prescisa delas elas são inuteis....

entendeu?
e

Ajax é muito bom

  • Depois de refletir se usaria o naum
  • Cheguei a conclusão, Sim eu usarei Ajax
  • Descobri maneiras de usa-lo só uma vez, pra carregar varios arquivos sem prescisar
  • rodar minha script pra cada arquivo
  • Como rodar scripts de páginas carregadas por Ajax
  • Como usar fazer o onload de páginas carregadas por Ajax funcionarem
  • Ideias novas e novas soluções


#12 Micox

Micox

    Turista

  • Usuários
  • 27 posts
  • Sexo:Não informado

Posted 03/01/2007, 14:54

Ótima explicação. Gostei principalmente do início do tutorial hehe.
parabéns!

#13 JoinTek

JoinTek

    24 Horas

  • Usuários
  • 454 posts
  • Sexo:Masculino
  • Localidade:Santarém, PA

Posted 29/05/2008, 07:04

var.readyState == 0 -> Peraí que já vai começar
var.readyState == 1 -> Aee, seguuurraaa peãaaoo
var.readyState == 2 -> UUUhhhhhuuuuu, vamo que vamo
var.readyState == 3 -> Vamo lá cabloco, tá chegano
var.readyState == 4 -> Aqui você trabalha seu resultado


HAUSHUAHUSHUASHUHUASHUHUASHUASHUHUASHUSHAUASHUA
Muito bom mesmo, melhor tutorial que já vi sobre o assunto (até pq foi o único, MAS É O MELHOR, sério).


[]'s

#14 -۰۪۪۫۫●۪۫۰™WebMaster.BH.:

-۰۪۪۫۫●۪۫۰™WebMaster.BH.:

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 14/05/2010, 09:30

Cara gostei do seu post.
Parabens pela iniciativa...
W*´¨) WebMaster.BH
E¸.·´¸.·*´¨) ¸.·*¨)
B](¸.·´ (¸.·` * Soluções inteligentes...
Master.BH

#15 vapedlok

vapedlok

    Ativo

  • Usuários
  • 326 posts
  • Sexo:Feminino
  • Localidade:Bogota

Posted 21/06/2017, 08:20

Discounts! consumer product reviews

progect13.jpg
Products which fall under this return policy can be returned domestically, as long as they are unused and in the original packaging. No questions asked!
If a product that falls under this guarantee is found to be counterfeit, you will get a full refund (shipping costs included).

buy.png

READ MORE
Leisure lace-up and flat heel design sandals for women ( 28.02 $)
ST203 Hot selling children clothing set baby clothes glasses pattern short-sleeved T + stripe pants fashion boys clothes ( 6.40 $)
Vkworld V3S 2.4 inch Quad Band Unlocked Phone SPRD6531 Camera Bluetooth MP3$
XIAOMI REDMI Note 3 32GB 4G Phablet-204.75 $
Sterling Silver Magic Ball Pendant Necklace ( 120.00 $)
PotPlayer 1.7.351
Mens Pink Hand Painted Italian Leather Belt ( 150.00 $)
Plastic Charger Charging Stand Station with 2 USB Ports for PS4 Controller Large Size ( $5.55 )
2016 winter new fashion long coat slim thickened turtleneck warm jacket cotton padded zipper plus size outwear casacos 4 colors ( 42.89 $)
Khaki stripe wooden fiber fringed long scarf ( 35.94 $) Mila Schon
zhizn i smert (kollazh)
50PCS Resin Saw Blade ( $1.67 )
5cmx400cm reflective adhesive tape reflective tape sticker for truck car motorcycle bike safety use 13 models ( 3.20 $)
7a malaysian virgin hair straight 3 bundles virgin malaysian straight hair weave soft unprocessed malaysian human hair bundles ( 45.00 $)
Stylish letter shape sequins embellished breathable mesh men's baseball cap ( 5.60 $)


114bb.png




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq