Requisição AJAX com o método load() da jQuery
Publicado em: 2009-02-3 — 231.068 visualizacoes
Definindo AJAX
AJAX é a sigla em inglês para Asynchronous JavaScript and XML e trata-se de uma técnica de carregamento de conteúdos em uma página web com uso de JavaScript e XML.
Tal definição é mais do que conhecida e repetida exaustivamente em livros e matérias escritas em sites, contudo pode levar os menos avisados a um grave erro de entendimento da técnica.
Sem demais considerações a respeito é bom que fique claro que o XML constante da definição, eu costumo dizer, ali está somente para viabilizar a letra X (xis) no final da sigla e chegar-se ao nome do bravo guerreiro grego, filho de Telamon feroz adversário dos troianos e que foi imortalizado na Íliada de Homero. (wikipedia: Ajax)
Assim, a definição de AJAX, para estar em acôrdo com suas reais possibilidades poderia ser escrita:
AJAX é a sigla em inglês para Asynchronous JavaScript and XML e trata-se de uma técnica de carregamento de conteúdos em uma página web com uso de JavaScript e XML, HTML, PHP, ASP, JSON ou qualquer linguagem de marcação ou de programação capaz de ser recuperada de um servidor.
Introdução
Nesta matéria estudaremos a técnica AJAX com uso da biblioteca jQuery para requisição de um fragmento HTML hospedado em um arquivo no servidor. Veremos como carregar conteúdos solicitados pelo usuário sem necessidade de carregamento da página inteira o que, em última análise, é a finalidade maior do AJAX.
Desenvolvemos uma trecho simples de uma página web, baseado em uma página real sobre notebooks da HP do Brasil, na qual quando o usuário clica em um dos modelos de notebook é levado a uma nova página contendo informações detalhadas sobre o modelo clicado.
No modelo AJAX que desenvolvemos as informações são carregadas na mesma página na qual o usuário se encontra em uma espécie de janela popup. Faça uma visita ao site da HP do Brasil e depois à página que desenvolvemos, para uma visão antecipada do produto final de que trata esta matéria.
Por tratar-se de uma matéria com a finalidade de mostrar as técnicas de requisição de fragmentos HTML com uso de AJAX e da biblioteca jQuery está fora de questão considerações sobre o layout da página, posicionamento do conteúdo requisitado, comparações com abertura de janela popup por meios tradicionais ou qualquer outra ilação irrelevante para a técnica. Até porque layout e posicionamento são controlados por CSS e aplicáveis a cada caso.
Muito menos vamos nos estender analisando a marcação HTML e as regras CSS que usamos para construir a página. Portanto sugiro uma visita ao código de marcação da página que desenvolvemos denominada index.html e também ao arquivo HTML, denominado arquivo-html.html contendo os três fragmentos a carregar. Notar que este arquivo não contém declaração DOCTYPE, elemento raiz HTML, seção HEAD e nem mesmo BODY. A marcação de arquivos HTML a carregar em páginas existentes resume-se ao(s) fragmento(s) HTML a carregar. Observe ainda que no arquivo existem os seguintes três DIVS div#tx2000br, div#dv3000br, div#dv contendo as informações detalhadas sobre cada um dos três modelos de Notebook apresentados.
O método jQuery load()
Para injetar no DOM um fragmento HTML (seja texto HTML puro ou gerado dinamicamente) contido em um arquivo remoto a biblioteca jQuery fornece o método load() cuja sintaxe geral é mostrada a seguir:
load( url, [data], [callback] )
Exemplos:
1. load( 'arquivo-html.html' ); // carrega todo o arquivo
2. load( 'arquivo-html.html #injetada' ); // carrega todo o conteúdo da div#injetada do arquivo
3. load( 'arquivo.php', { 'cidades[]': ['Curitiba', 'Manaus'] } ); // carrega o arquivo e passa dados para o servidor
4. load( 'meu-arquivo.json', minha_funcao ) // carrega o arquivo e executa minha_funcao
A requisição padrão para tráfego de dados é GET, contudo caso sejam passados parâmetros adicionais a requisição torna-se POST.
Na sintaxe do método load() o parâmetro url é obrigatório é informa o endereço no qual se encontra hospedado o fragmento HTML a ser requisitado. Os parâmetros [data] e [callback] são opcionais sendo o primeiro destinado a enviar dados para o servidor e o segundo para definir uma função a ser executada tão logo a requisição tenha se completado.
Até a versão 1.2 da biblioteca todo o HTML do arquivo existente no endereço url constante como parâmetro do método era carregado no documento. A partir daquela versão podemos selecionar um fragmento HTML do arquivo, para ser carregado no documento. A sintaxe para definir tal fragmento é um seletor constante do arquivo a carregar, conforme mostrado a seguir.
load( 'arquivo-html.html #tx2000BR' ); // carrega todo o conteúdo da div#tx2000BR constante do arquivo
Sobre codificação de caracteres
A codificação de caracteres em páginas web é um assunto que suscita muitas dúvidas e principalmente confusão e que quando incorretamente tratado resulta na renderização de sinais muito estranhos em substituição, principalmente, dos caracteres acentuados da língua portuguesa. Você, desenvolvedor, com certeza já esteve face a este problema se não em um projeto próprio pelo menos visualizando um site codificado incorretamente.
Não vou me estender em detalhes de codificação. Caso você queira se aprofundar no assunto comece lendo uma tradução para o português de Portugal das Recomendações para HTML no seu capítulo referente a: Representação dos documentos HTML
A maneira segura de evitar conflitos de codificação de seus documentos, conflitos com a codificação nativa de scripts e linguagem de programação em geral e conflitos com codificação no lado do servidor é com uso do conjunto de caracteres utf-8 que abrange todos os caracteres existentes na face da terra. Mas atenção: Não basta você declarar no seu documento HTML uma devida metatag como charset=utf-8 é imprescindível que você salve seu documento como utf-8. Portanto, o editor HTML que você usa deve estar configurado para tal. Em ambiente Windows o Bloco de Notas oferece a opção de salvar o documento com codificação ANSI (default), Unicode, Unicode big endian e utf-8.
Mas, talvez você esteja trabalhando em um site já existente codificado com charset=iso-8859-1 que é o conjunto de caracteres conhecido como latin-1 ou Europeu Ocidental que é um subconjunto de utf-8. Neste caso você deverá optar por uma das duas soluções indicadas a seguir:
- Salvar o fragmento HTML projetado para ser carregado com a codificação utf-8
- Usar codificação de caracteres com entidades númericas ou alfabéticas no fragmento HTML projetado para ser carregado com a codificação
utf-8iso-8859-1
Para o segundo caso uma tabela de codificação pode ser encontrada em: HTML Codes
Script jQuery
Antes de prosseguir recomendo que caso você ainda não tenha examinado, analisado e entendido os dois arquivos HTML que usamos para esta demonstração o faça agora visitando os seguintes links:
- Página web onde serão carregados os conteúdos index.html
- Marcação HTML da página web onde serão carregados os conteúdos: index.txt
- Marcação dos conteúdos a carregar: arquivo-html.txt
Observe o script jQuery que faz a requisição AJAX e carrega o conteúdo na página
1. $(document).ready(function(){
2. var carregando = $('#carregando')
3. var conteudoAjax = $('#conteudo-ajax')
4. function mostrarCarregando(){
5. carregando.css('display', 'block').fadeIn(1000);
6. };
7. function aposCarregamento(){
8. carregando.fadeOut(1000);
9. conteudoAjax.slideDown();
10. $('.fechar').click(function() {
11. conteudoAjax.slideUp('slow');
12. });
13.};
14. $(conteudoAjax).css('opacity', .94);
15. $('#ajax a').click(function(event){
16. event.preventDefault();
17. mostrarCarregando();
18. switch(this.id){
19. case 'm1':
20. conteudoAjax.slideUp();
21. conteudoAjax.load('arquivo-html.html #tx2000br', aposCarregamento);
22. break;
23. case 'm2':
24. conteudoAjax.slideUp();
25. conteudoAjax.load('arquivo-html.html #dv3000br', aposCarregamento);
26. break;
27. case 'm3':
28. conteudoAjax.slideUp();
29. conteudoAjax.load('arquivo-html.html #dv4', aposCarregamento);
30. break;
31. default:
32. aposCarregamento();
33. break;
34. }
35. });
36.})
Código comentado:
| Linha | Descrição |
|---|---|
| 2 | Cria a variável carregando e a ela atribui como valor o objeto jQuery div#carregando que receberá o ícone indicando carregamento AJAX. Este div encontra-se no arquivo index.html |
| 3 | Cria a variável conteudoAjax e a ela atribui como valor o objeto jQuery div#conteudo-ajax que receberá o fragmento HTML a ser carregado no arquivo index.html. Este div encontra-se no arquivo index.html |
| 4 a 6 | Define a função mostrarCarregando() que mostra o ícone de carregamento AJAX, tão logo a requisição tenha início. Notar que o ícone é uma gif animada constante da marcação HTML da página index.html e inicialmente encontra-se escondido com regra CSS. |
| 7 a 13 | Define a função aposCarregando() que esconde o ícone de carregamento AJAX, tão logo a requisição |
| 10 a 12 |
Dentro da função Importante: Se você pretende manipular elementos HTML inseridos no DOM via AJAX defina os métodos de manipulação em uma função no parâmetro CALLBACK (após o carregamento) do método |
| 14 | Define um efeito de opacidade na cor de fundo do texto carregado. |
| 15 a 35 | Condicional identificadora do link clicado e requisição do fragmento apropriado. |
| 15 | Captura um clique do usuário em um dos três links Mais » que acionam o carregamento das informações adicionais sobre cada um dos modelos de Notebook. |
| 16 | Equivalente jQuery para return false da linguagem JavaScript, impede que a página "salte" para o topo quando o link é clicado. Notar que href = "#" nos links. |
| 17 | Tão logo um link seja clicado é mostrado o ícone indicativo de carregamento AJAX. |
| 18 | Chave para identificar o link clicado com uso da condicional JavaScript switch(). |
| 19 | Se o id do link clicado (this.id) for m1 trata-se do primeiro modelo de Notebook (ver marcação de index.html). |
| 20 | Esta linha faz com que, caso o usuário tenha carregado as informações adicionais de um modelo e clique em outro modelo as informações presentes se fechem. |
| 21 | Carrega na div#conteudo-ajax o conteúdo da div#tx2000br do arquivo-html.html e tão logo termine o carregamento executa a função aposCarregamento(). |
| 22 a 36 | Funções idênticas as descritas, completam a condicional. |
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2009-02-3 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/02/03/requisicao-ajax-com-o-metodo-load-da-jquery/trackback no seu site.
Olá muito bom o post!
Muito bom o tutorial… mas eu estou emperrado em uma solução…
Quero que de submit no form a cada X tempo e só carregue a DIV onde tem JSTL para atualizar os dados que recebe do Banco, mas não funciona, da refresh na tela toda:
$(document).ready(function(){
atualiza();
});
function atualiza(){
var dataString ={“resultados”:’${resultados}’};
$.ajax({
type: “POST”,
url: “ServletOcr”,
data: dataString,
contentType: “application/json”,
success: function (data) {
$(‘#formAlerta’).submit().load(‘#tabelaAlerta’);
setTimeout(‘atualiza()’, 3000);
return false;
}
});
}
Sou seu fã Maujor, parabéns. Seus conteúdos são sempre os melhores, sempre muito bem falados no meio informacional. Agradeço como espectador, pelos conteúdos. Lhe desejo mais sucesso ainda!
Excelente matéria! Estou com um problema, depois que atualizo a DIV com uma pagina PHP, o link deixa de funcionar, sabe o que pode ser? Estou fazendo assim:
$(“#login-form”).fadeOut(“slow”);
$(“#background-on-popup”).fadeOut(“slow”);
$(“#perfil”).fadeOut(“fast”);
$(“#perfil”).load(“perfil.php”);
$(“#perfil”).fadeIn(“fast”);
Abs
[…] Requisição AJAX com o método load() […]
Ótima matéria, Maujor. Mas eu tenho uma dúvida, como eu faria para evitar uma requisição de javascript apenas no mobile? Estou desenvolvendo layouts responsivos e não queria fazer o usuário mobile ter que esperar baixar os javascripts desnecessários.
Se alguém puder me ajudar fico grato, obrigado. 😉
Como posso destruir um dialog de dentro da página que abri no dialog??
Minha chamada ficou assim.
$(‘#PopUpDiv’).Load(‘../../MinhaPagina.aspx’).dialog();
Alguem pode me ajudar?
Maujor,
Tudo bem,
Uma coisa que eu sempre tive dúvida, para usar o load você criou a página com o conteúdo 1…N é estática “arquivo-html.html” certo, agora eu poderia utilizar esse mesmo “load” com a passagem do id “#tx2000BR” para recuperar um conteúdo em uma página, PHP por exemplo, que montasse esses id´s dinamicamente em tempo de execução? que é o que acontesse na vida real.
Olá, estou tentando criar uma página usando o método load do jquery mas não consigo, tentei até usar todos os seus codigos sem modificação para ver se era eu que estava errando mas não era.
Oque pode ser que está acontecendo?
obs:uso Dreamweaver cs3
Se alguem souber criar porfavor me ajuda.Obrigado
Estou com um problema queria ajuda de alguem para esclarecer.
Pensando nesta condição que foi citada “Até a versão 1.2 da biblioteca todo o HTML do arquivo existente no endereço url constante como parâmetro do método era carregado no documento.”
Queria saber se tem como “esvaziar” o armazenamento que guarda a pagina URL no Documento ou atualizar?
Meu problema é que a minha URL pagina PHP executa um Select, Update e no final deste documento escreve (echo) um resultado, que exibo utilizando Ajax pelo JQuery. O problema é que depois de carregado uma vez sempre que clico no link que chama a pagina PHP (url) o sistema não funciona pois a pagina PHP ja esta carregada no documento, com fazer ?
Obrigado!
Maujor
Estou fazendo um exercicio da faculdade em que uma pagina html recebe via ajax uma tabela de dados, sendo possivel modificar,excluir e inserir novos itens tudo via ajax. Na minha primeira versão do exercicio eu não usei jquery e colocava o evento onclick direto nos botoes, por exemplo: cada linha tinha um botao modificar, dai aquele botao tinha um id mod-(e o id q vinha da tabela) pra minha função javascript saber qual campo atualizar. Mas agr fazendo com jquery empaquei nessa etapa, se minha tabela estiver com 10 linhas, como faço para identificar cada linha para associar os eventos de click nos botoes de modificar?
Desde ja agradeço
Jonathan
Bom dia
tudo bem?
Tenho uma dúvida, por exemplo, eu tenho uma página jquery com ajax, e nisso eu tenho uma div que recebe essa página do ajax, mas nessa página que está dentro da div, ela tem um formulário onde ele tem um botão (id=btn1) submit que cadastra algo. Na página principal onde temos que incluir os códigos Jquery tem um script assim: $(‘#btn1’).click…. mas este evento não acessa o btn1 carregado pelo Ajax que está dentro da div…
E ai, não tem jeito? O negócio é fazer onSubmit no formulário?
Abraço,
Wagner Drachinski
meu caro maujor, poderia me ajudar, queria saber como acessar os objetos do DOM do arquivo carregado pelo JQuery.load()…
Olá!!
Muito bom o post!!
Sou iniciante e gostei muito mas estou com um problema!! eu carrego um conteudo html com o load() so que quando tem algum link no conteudo html e clico nele nao carrega o destino desse conteudo na div do load e sim abre na pagina inteira ou abre outra pagina com o destino do link!! tem como carregar o conteudo na div do load e quando clicar no link dentro desse conteudo, carregar nessa div o conteudo do link em que eu cliquei??
Gostaria de pedir uma ajuda: eu tenho duas div’s uma que faz o fundo e outra por cima fazendo a página. Quando a página é carregada, a div do fundo recebe uma imagem de fundo que está em um php por .load(), e quando um link do menu é clicado, a div da pagina faz outro .load(). Mas quando eu uso os métodos .ajaxStart() e .ajaxStop() eles funcionam para os dois .load().
O que eu quero fazer é mostrar um div de “overlay” que iria cobrir o div que está sendo executado o .load() enquanto o AJAX carrega.
Gostaria de saber se é posível setar um .ajaxStart() e um .ajaxStop() para cada .load().
Prezados,
Obrigado pelo artigo, muito bem escrito por sinal.
Gostaria de contribuir com algo caso ainda não conheçam…
Aqui na empresa, alguém me pediu ajuda sobre isso.. mas neste caso específico, a pessoa não pode trabalhar com UTF-8 pois seus aplicativos são muito antigos e não dão suporte.. neste caso, achei um exemplo que salvou o dia.. segue:
$.ajaxSetup({
‘beforeSend’ : function(xhr) {
xhr.overrideMimeType(‘text/html; charset=windows-1252’);
},
});
Colocando este código antes do load, o ajax vai carregar o fragmento de HTML no charset que você precisar… neste caso o ‘windows-1252’ que estava definido na página principal e na página incluída.
Espero que tenha sido útil.
Abs!
Guilherme
Renan,
Valeu pela resposta, na verdade eu até resolvi, chamando os eventos de novo dentro do retorno do ajax, após o código
$(obj_result).empty().html(data);
Depois vou tentar dessa forma que você sugeriu.
@Carla Priscila
Eu sempre usei o .live() para resolver esse problema.
$("#id").live("click",function(){//seu codigo aqui
});
Primeiro parabenizo pelo post.
Segundo estou com o mesmo problema do @ Luciano Sávio de 2009 – 03 – 29 e que o J Bruni respondeu. Mas onde eu coloco a função ajaxcomplete? depois da função callback ou dentro?
Problema: tenho um resultado de uma consulta que retorno em uma tabela html, abaixo tenho uma paginação que requisita a mesma consulta via ajx. A minha tabela html inicial tem uma classa que é manipulada pelo jquery para zebrar as linhas e destacar o hover. Mas quando executo a paginação e apresento minha tabela recebida pelo ajax as funções do jquery para mudar o layout da tabela não funciona.
Aguardo resposta..
Pelo que entendi o callback serve para elementos criados pelo load que acabou de ser executado? Porque o exemplo abaixo nao funciona?
$.load(‘#dinamico’,’acontece.php’,,def_calendario() );
A função def_calendario é para inicializar o calendário que foi incluido pelo arquivo acontece.php ele e mais ou menos assim:
function def_calendario(){
$(“#calendario”).datepicker({
inline: true,
altField: ‘#actualDate’,
altFormat: ‘yy-mm-dd’,
dateFormat: ‘yy-mm-dd’
});
Sei que a funcao esta sendo executada – mas nada acontece na configuração do meu calendário.
Ótimo artigo, me ajudou muito, só tenho mais uma dúvida:
Como faço para acessar as páginas que são carregadas através de uma URL única, por exemplo:
http://www.meusite.com.br/?link=colecao
Que abriria o conteudo de colecao direto sem passar pela home!!
Tipo URL amigáveis.
Abraços e obrigado!
Muito boa a maneira como vc expões as técnicas de aplicação e utilização do JQuery.
Creio que no seu livro não seja diferente.. vou comprar.
Obrigado por compartilhar a info no seu blog me ajudou a resolver um problema sério de programação.
Abraço e sucesso!
Parabéns pelo tutorial Maujor.
Em nossa intranet utilizamos um sistema desenvolvido com base em métodos do excelente jQuery, que apresenta boa performance ao ser parseado pelo browser. Só temos boas recomendações para este framework.
—
Fabio B.
Unihost Brasil
Olá Maujor…
estou carregando um script PHP através do método load() e neste mesmo script, no conteúdo HTML retornado, tenho alguns elementos javascript que não são executados, como o Shadowbox por exemplo, ou até mesmo um menu com aba (jQuery UI Tabs)…
Tem alguma forma de carregar um conteúdo por Ajax e fezer com que seu conteúdo javascript interaja com o browser normalmente como se tivesse sido carregado da forma tradicional?
Sei que o post é antigo, mas, além de querer parabenizar o autor pelo excelente conteúdo gostaria contribuir com o amigo @Luciano Sávio e com as pessoas que tiverem o mesmo problema na hora de utilizar javascript nas páginas carregadas com o jquery:
$("#id").live("click",function(){//seu codigo aqui
});
o evento “live” captura os eventos de objetos que foram add via ajax
Abraços.
Boa tarde.. queria faizer uma pequena modificação, mas ainda me falta experiência no assunto..
a dúvida parece ser extremamente simples…
Como fazer o slideUp primeiro.. depois o loading e futuramente o sileDown.. passo a passo e não tudo ao mesmo tempo?
@ Alan
Não estou certo disso, mas acho que você não pode usar caminhos relativos dessa forma em requisições AJAX. Neste caso, para funcionar, você deveria informar o URL absoluto:
$(”#minha-div”).load(”http://www.exemplo.com/pasta/arquivo-externo.html”);Excelente artigo! Assim como os livros! 🙂
Mas me ocorreu uma dúvida.
Seria possível carregar arquivos HTML que estão numa pasta anterior à pasta atual? Explico:
$(”#minha-div”).load(”../pasta/arquivo-externo.html”);Reparem no caminho do arquivo ( ../ ). É que eu tentei fazer isso e não deu certo. Será que o método só funciona se o arquivo a ser chamado estiver num nível abaixo, ou no mesmo nível, do arquivo onde está o método?
Alguém saberia de uma alternativa para esse caso?
Abraço a todos e vida longa ao Maujor! 😉
Alan
Pessoal,
Em uma página “principal.html” carrego na div “conteudo” via ajax, a pagina “formulario.html”.
Esta pagina carrega normal dentro da div. Quando preencho este formulario e envio, não consigo carregar a resposta do arquivo “form.php” dentro da div “conteudo” da pagina principal, através do ajax.
Alguém pode me ajudar como fazer isto…pelo amor de Deus…
Maujor,
Além de participar, ainda compro seus livros, parabéns!
A minha dúvida, em relação ao código acima, é bem diferente. O que acontece: Visualizo tudo normal do Firefox, mais no IE (todos) só aparece a imagem do body, mas nada!
Ótimo artigo, gostaria também de saber como carregar sem ser popup!!
Galera assim, gostei muito deste script, parabéns ao autor, mas e se eu quiser carregar sem ser estilo “popup”? tipo fazer o div carregar abaixo das informações do notebook como eu faço? alguém pode me ajudar…
Muito obrigado pelo retorno!
Logo após ter enviado minha mensagem anterior, descobri aonde estava o meu problema.
O jQuery e/ou o browser estavam enviando os dados em UTF-8 mesmo, como eu queria.
O problema estava na conexão entre o PHP e o MySQL. A string da query SQL estava em UTF-8, mas a conexão estava em ISO-8859-1…
Isso foi resolvido com o comando mysql_set_charset.
Testei com sucesso também usar a query SET NAMES ‘utf8’ através do “tradicional” comando mysql_query, já que a função mysql_set_charset só existe no PHP 5…
Parabéns pelo seu site, blog, livro e a matéria na TI Digital!
J Bruni
Muito frequentemente os problemas com acentuação em requisições AJAX se devem a um fato óbvio mas que é esquecido.
O seu editor de texto salva o HTML em UTF-8?
Assegure-se disso. Talvez não seja seu caso, mas sempe é bom lembrar.
Dê notícias.
@ Luciano Sávio
Você precisa executar o comando $(”div”).mouseover (ou outro) após o conteúdo recebido via ajax já ter chegado.
Há várias formas de fazer isso. Você pode colocar o comando dentro da função callback da chamada ajax.
Ou, então, use o evento ajaxComplete, como no exemplo abaixo:
$("div.conteudo").ajaxComplete(function(){$(”div”).mouseover( function(){
$(this).css("background","blue");
});
});
Quero instruir ao jQuery para enviar os dados de um form, via ajax, usando UTF-8… há algum modo de fazer isso?
Há algum equivalente ao atributo accept-charset do HTML?
form accept-charset="utf-8"Não sou o único com esse questionamento…
Veja o que encontrei:
http://stackoverflow.com/questions/29751/problems-while-submitting-a-utf-8-form-textarea-with-jqueryajax
Obrigado!
Muito bom o exemplo, porém estou com uma dúvida bastante interessante:
Não é possivel nesse mesmo código acima acessar o dom de um arquivo q foi acessado utilizando o $.ajax?
=== vo aproveitar o espaço e deixar uma duvida q postei em um forum e nunca tive resposta ==
tipo. eu carrego as paginas dinamicamente sem dar post utilizaando o $.ajax..
só que tipo
Imaginem vocês o seguinte:
Tenho a minha página index.php
com minhas divs, css, e as acoes do jquery.
na mesma index.php tenho um include com o meu menu….
Ao clicar no menu eu uso a funcao $.ajax para carregar dentro de um div da index o conteudo de uma pagina chamada conteudo.php
por exemplo… se o link do menu for “noticias” o $.ajax acessa via get a variavel “pagina” dentro do arquivo conteudo e diz oq tem nela.
Exemplo:
conteudo.php
__________
if($pag == “home”) { echo ” conteudo da pagina home “}
if($pag == “noticias”) { echo “conteudo da pagina noticias” }
O GRANDE problema é o seguinte:
Eu nao consigo utilizar as funcoes do jquery acessando as tags q tem dentro desse conteudo.php…. n consigo por exemplo usar um $(“div”).mouseover….. etc…
Conseguem entender o problema ou enrolei demais e n falei nada? ^^
Estou comum problema a muito tempo com requisições ajax.
Seguinte, estou usando struts 2 para desenvolver uma aplicação WEB. Preciso fazer uma cadastro de pessoa onde tenho dois combobx: um de estado e um de cidade. o struts tem a tag s:select que precisa de uma lista onde esta eh definida na action. Na action carrego a lista do banco e seto a list, a jsp carrega a lista que tem o mesmo nome na action. Preciso enviar uma requisição via ajax para action e esta pesquisar no banco pelas cidades correspondentes ao estado selecionado e retornar uma lista pra carregaro segundo combo. Procurei bastante na internet mas soh encontro exemplos com php ou com bug no IE7 ou que não resolvem meu problema. Jah tentei usar jquery retornandoum objeto json porem daum erro no retorno jahque aaction devolve uma string.Se alguém puder ajudar, agradeço desde já. Qualquer duvida sobre o codigo podem mandar um email aline.arq.ads@gmail.com
@Jottae
Por razões de segurança, com uso de AJAX, não é possível carregar em uma página web arquivos hospedados em servidor diferente daquele na qual a página está hospedada.
A única excessão é quando a requisição é feita para arquivos JSON, que é um arquivo JavaScript de dados e não oferece riscos de códigos maliciosos.
Portanto o que você está pretendendo fazer, ou seja, carregar um arquivo HTML externo, não é possível.
Fiquei apenas com uma dúvida.
Como carregar links externos.
EX:
Ao invés de:
conteudoAjax.slideUp();conteudoAjax.load('arquivo-html.html #tx2000br', aposCarregamento);
Seria assim:
conteudoAjax.slideUp();conteudoAjax.load('http://www.servidor.com/arquivo-html.html #tx2000br',
aposCarregamento);
Quem puder ajudar fico grato.
Ótimo artigo,
em meus projetos ainda não tive a oportunidade de utilizar, mas concerteza é uma ótima opção para manipulação DOM e conteúdos dinâmicos !
Abraços !
@Meu conterâneo: Leornado 🙂
Grato pelo seu comentário e também pela troca de idéias via email que tivemos há alguns dias atrás sobre codificação de caracteres em requisições AJAX.
Complementado seu comentário convém esclarecer que para fragmentos HTML a declaração para utf-8 não é obrigatória desde que se use entidades numéricas ou alfabéticas para codificar caracteres acentuados e/ou especiais da língua portuguesa na marcação do fragmento.
Aliás, esta foi a opção que adotei no exemplo desta matéria.
É muito comum termos problemas com a renderização dos caracteres quando trabalhamos com requisições AJAX, normalmente acontece quando a resposta está em um padrão diferente do local onde a resposta será injetada.
Quando temos uma linguagem server-side, fácilmente podemos alterar o cabeçalho da resposta HTTP, mas quando o arquivo requisitado é apenas um fragmento HTML é importante que este arquivo esteja convertido para o formato UTF-8.
Excelente artigo, muito esclarecedor!
Ótimo artigo, é importante escrever sobre o assunto para evitar as confusões comuns que os desenvolvedores iniciantes geralmente têm com relação ao AJAX.
Apenas para falar o óbvio: excelente matéria!
[…] Leia mais deste post no blog de origem: Clique aqui e prestigie o autor […]