Arquivos de sites

jQuery – O método load()

Como descrito nos capítulos anteriores, existem várias maneiras de usar AJAX com jQuery, e elas devem com certeza ser usadas dependendo da situação. Um dos métodos mais simples e ainda sim poderoso para carregar dados assincronamente é o método load(). Você o usa escolhendo um elemento onde você quer o conteúdo carregado e então chama o método load() nele. Ele recebe a URL que você deseja carregar, como parâmetro. Por exemplo, nós precisamos de um arquivo externo que nós podemos carregar. Nós vamos chamar de content.html e o conteúdo dele deve ser parecer com isso:

<div id="divContent">
        <b>This is external content</b>
</div>
And there's more of it

Salve isso como content.html, no mesmo diretório onde você mantém os outros arquivos de exemplo deste tutorial. Nós podemos carregar ele simples assim:

<div id="divTestArea1"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1").load("content.html");
});
</script>

Se você tem o arquivo de conteúdo em outro diretório, ou se você nomeou ele diferentemente, você terá que mudar o parâmetro para o método load consequentemente. Isso é tudo que ele precisa para carregar o conteúdo de um arquivo externo com jQuery e o método load. Um truque muito legal é que você pode na verdade passar um seletor (selector) juntamente com a URL, para apenas pegar uma parte da página. No primeiro exemplo, nós carregamos o arquivo inteiro, mas no exemplo seguinte, nós vamos apenas usar a div, que contém a primeira sentença:

<div id="divTestArea2"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea2").load("content.html #divContent");
});
</script>

Como você pode ver, nós simplesmente anexamos um seletor jQuery padrão ao parâmetro, depois da URL, separada por um espaço. Isso faz o jQuery selecionar o conteúdo fora e apenas passa as partes correspondidas de volta ao container. Você pode usar qualquer tipo de seletor jQuery para retirar esse truque, que o torna muito poderoso.

O método load pode receber dois parâmetro extra: Um conjunto de string de consulta (querystring) pares de chave/valor, e uma função de callback que será executada quando o método load terminar, não importa se ele tiver êxito ou falhar. Aqui está um exemplo onde nós usamos a função callback para informar sobre o resultado. Normalmente, você deveria provavelmente apenas mostrar uma mensagem se o método falhasse, mas para ilustrar como isso funciona, nós fazemos isso se o método falhar também. Eu me certifiquei que isso falharia por exemplo, requisitando um arquivo que não existe:

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});
</script>

Como você pode ver, a função de callback especifica 3 parâmetros, que jQuery preencherá para você. O primeiro parâmetro irá conter o conteúdo resultado se a chamada tiver sucesso. O segundo parâmetro é uma string que especifica o estado da chamada, ex. “sucesso” ou “erro”. Você pode usar isso para ver se a chamada foi bem sucedida ou não. O terceiro parâmetro é o objeto XMLHttpRequest usado para executar a chamada AJAX. Isso conterá propriedades que você pode usar para ver o que deu errado e muitas outras coisas.

Fonte: jQuery-tutorial.net

Anúncios

jQuery – Introdução ao AJAX

AJAX, abreviação para Asynchronous JavaScript And XML (XML e JavaScript Assíncronos), permite você carregar dados em background e mostra-lo na sua página web. Isso lhe permite criar websites com funcionalidade mais rica.Aplicações web populares como Gmail, Outlook Web Access, e Google Maps usam AJAX e extensivamente, para fornecer a você uma experiência mais responsiva, como desktop.

Usar AJAX pode ser um pouco complicado, porque os vários navegadores tem diferentes implementações para suportar AJAX. Normalmente isso irá lhe forçar a escrever código para responder de forma diferente, dependendo do navegador, mas felizmente, jQuery fez isso pra gente, que nos permite escrever AJAX funcionalmente com tão pouco quanto uma única linha de código.

Você deve estar ciente do fato que existe ambas vantagens e desvantagens ao usar AJAX na sua página, que significa que você deve sempre considerar cuidadosamente antes de decidir usar isso ao invés de fazer uma chamada comum de volta ao servidor. Aqui está um resumo:

Vantagens:

  • Sua página será mais prazerosa de usar, quando você pode atualizar partes dela sem um refresh, que faz o navegador piscar e rodar a barra de status.
  • Porque você apenas carrega o dado que você precisa para atualizar a página, ao invés de  atualizar a página inteira, você salva largura de banda.

Desvantagens:

  • Porque as atualizações são feitas pelo JavaScript no cliente, o estado não irá registrar no histórico do navegador, fazendo isso impossível de usar os botões Voltar e Avançar do navegador entre os vários estados da página.
  • Pelo mesmo motivo, um estado específico não pode ser favoritado pelo usuário.
  • Dado carregado através do AJAX não será indexado por qualquer dos maiores motores de busca.
  • Pessoas usando navegadores sem suporte JavaScript, ou com JavaScript desabilitado, não será capaz de usar a funcionalidade que você fornece através do AJAX.
    Os dois primeiros itens da lista podem ser contornados embora, tipicamente através do uso de um iframe e lendo e escrevendo dado de uma parte da URL depois do caractere “#”.

Nos capítulos seguintes, você irá aprender como usar várias funções AJAX relacionadas ao jQuery.

Fonte: jquery-tutorial.net

jQuery – Primeiros passos; Hello, world!

Para usar jQuery, você precisa incluí-lo nas páginas onde deseja tirar proveito dele. Você pode fazer isso baixando o jQuery do site dele em www.jquery.com. Lá tem geralmente a escolha entre uma versão de “Produção” (Production) e uma versão de “Desenvolvimento” (Development).

A versão de “Produção” é para o seu site real na web, por que ela foi reduzida e comprimida para ocupar o mínimo de espaço, o que é importante para os seus visitantes, do qual o navegador terá que baixar o arquivo do jQuery juntamente com o resto do seu website. Para teste e desenvolvimento, a versão “Desenvolvimento” é melhor. Ela não foi reduzida ou comprimida, então quando você encontrar um erro, você pode na verdade ver onde no jQuery isso aconteceu.

Uma vez que o arquivo JavaScript do jQuery foi baixado, você terá que referenciá-lo em suas páginas, usando a tag HTML <script>. O jeito mais fácil é colocar o arquivo do jQuery baixado no mesmo diretório da página onde deseja usá-lo e então referenciá-lo assim, na sessão <head> do seu documento:

<script type="text/javascript" src="jquery-1.5.1.js"></script>

Uma parte da sua página deve agora se parecer com isso:

<head>
<title>jQuery test</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
</head>

Uma abordagem mais moderna, ao invés de você mesmo baixar e hospedar o jQuery, é incluí-lo de um CDN – Content Delivery Network (Rede de Fornecimento de Conteúdo). Tanto a Google quanto a Microsoft hospedam várias versões de jQuery e outros frameworks JavaScript. Isso lhe salva de ter que baixar e armazenar o framework jQuery, mas isso tem uma vantagem muito maior: Porque o arquivo vem de uma URL popular que outros websites podem utilizar também, há possibilidades de que quando as pessoas cheguem ao seu website e o navegador delas solicitar o framework jQuery, isso pode já estar no cachê, porque outro website está usando exatamente a mesma versão e arquivo. Além disso, a maioria dos CDN’s terão certeza de que uma vez que o usuário solicitou um arquivo dele, isso será fornecido por um servidor mais perto dele, então seus usuários Europeus não terão que transportar o arquivo por todo o caminho a partir dos Estados Unidos e assim por diante.

Você pode usar o jQuery de um CDN do mesmo jeito como você faria com a versão baixada, apenas a URL que muda. Por exemplo, para incluir o jQuery 1.5.1 a partir do Google, você deveria escrever o seguinte:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Eu sugiro que você use essa abordagem, a não ser que você tenha uma razão específica para você mesmo hospedar o jQuery. Aqui vai um link de informação do CDN do jQuery a partir do Google:

http://code.google.com/intl/da/apis/libraries/devguide.html#jquery

Ou se você preferir usar a partir da Microsoft:

http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0

Vamos ao Hello, world!

Todo tutorial de programação decente começará com um exemplo “Hello, world!” e este tutorial é também um desses. No capítulo anterior, nó aprendemos como incluir o jQuery na nossa página, de modo que nós podemos começar a usar todos esses grandes recursos. Você precisa conhecer um pouco mais sobre como jQuery trabalha, antes de você começar a escrever seu próprio código, mas apenas para ter certeza que tudo está funcionando, e para você ver como é simples o jQuery, vamos começar com um pequeno exemplo:

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

Ok, então temos uma tag div com o id “divTest1”. No código JavaScript nós usamos o atalho $ para acessar o jQuery, então nós selecionamos todos os elementos com um id “divTest1” (há apenas um porém) e setamos seu texto para “Hello, world!”. Você pode não saber o suficiente sobre jQuery para entender porque e como isso funciona, mas como você progredirá através deste tutorial, todos esses elementos serão explicados em detalhes.

Mesmo uma tarefa tão simples como essa deve na verdade necessitar de um bom número extra de keystrokes se você tivesse que fazer isso em JavaScript puro, sem ajuda do jQuery:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

E isso seria ainda maior se nosso elemento HTML não tivesse um ID, por exemplo, apenas uma classe.

Normalmente, entretanto, você espera pelo documento entrar no estado READY (Pronto) antes de você começar manipular seu conteúdo. Os exemplos acima funcionarão na maioria dos navegadores e provavelmente até mesmo funcionará quando você fizer mais coisas avançadas, mas determinadas tarefas podem falhar se você tentar fazê-las antes do documento estar carregado (loaded) e pronto (ready). Felizmente, o jQuery faz isso muito fácil também.

Fonte: jquery-tutorial.net / jquery-tutorial.net