Como fazer uma solicitação AJAX com jQuery para programação HTML5 e CSS3 - manequins

O objetivo principal de uma biblioteca AJAX como o jQuery é simplificar as solicitações AJAX para programadores HTML5 e CSS3. É difícil acreditar o quão fácil isso pode ser com jQuery.

Como incluir um arquivo de texto com AJAX

Verifique esse código limpo:

ajax. html $ (documento). pronto (getAJAX); função getAJAX () {$ ("# output"). load ("hello. txt");}

O HTML está muito limpo. Simplesmente cria uma div vazia chamada saída.

Este exemplo usa AJAX, portanto, se não estiver funcionando, talvez seja necessário lembrar alguns detalhes sobre como o AJAX funciona. Um programa usando AJAX deve ser executado através de um servidor web, não apenas de um arquivo local. Além disso, o arquivo que está sendo lido deve estar no mesmo servidor que o programa que faz a solicitação AJAX.

O mecanismo load () descrito aqui é adequado para uma situação básica em que você deseja carregar um fragmento de texto simples ou HTML em suas páginas.

Construindo o CMS de um homem pobre com AJAX

AJAX e jQuery podem ser uma maneira muito útil para criar sites eficientes, mesmo sem programação no lado do servidor. Freqüentemente, um site é baseado em uma série de elementos menores que podem ser trocados e reutilizados. Você pode usar o AJAX para criar uma estrutura que permita uma reutilização e modificação fácil do conteúdo da web.

Embora nada seja tão chocante sobre a página do ponto de vista do usuário, um olhar no código pode mostrar algumas surpresas:

CMS Usando AJAX $ (init); init () {$ ("# heading"). carga ("head. html"); $ ("# menu"). carga ("menu. html"); $ ("# content1"). carga ("story1. html"); $ ("# content2"). carga ("story2. html"); $ ("# footer"). carga ("footer. html");}; 
Olhe sobre o código, e você pode ver esses recursos interessantes:


A página não tem conteúdo! Todas as divs estão vazias. Nenhum dos textos mostrados na captura de tela está presente neste documento, mas tudo é puxado de arquivos menores de forma dinâmica.


A página consiste em divs chamados vazios. Ao invés de qualquer conteúdo particular, a página consiste em marcadores de posição com IDs.


Ele usa jQuery. A biblioteca jQuery é usada para simplificar enormemente o carregamento de dados através de chamadas AJAX.


Todos os conteúdos estão em arquivos separados. Olhe através do diretório, e você pode ver arquivos HTML muito simples que contêm pequenas partes da página. Por exemplo, story1. O html se parece com isto:
Livro I - Criando a Fundação HTML

Fundamentos de HTML de som
É tudo sobre validação
Escolhendo suas ferramentas
Gerenciando informações com listas e tabelas
Criando conexões com links
Adicionar imagens
Criando formulários




O método init () é executado no documento .pronto . Quando o documento está pronto, a página executa o método init ().


O método init () usa chamadas AJAX para carregar dinamicamente conteúdo. Não é mais do que uma série de métodos jQuery load ().


Esta abordagem pode parecer muito trabalho, mas tem algumas características muito interessantes:


Se você estiver construindo um site grande com várias páginas, você geralmente deseja projetar a aparência visual uma vez e reutilizar o mesmo general modelo repetidamente.


Além disso, você provavelmente terá alguns elementos que serão consistentes em várias páginas. Você poderia simplesmente criar um documento padrão e copiá-lo e colá-lo para cada página, mas essa abordagem fica bagunçada. O que acontece se você criou 100 páginas de acordo com um modelo e então precisa mudar o cabeçalho? Você precisa fazer a mudança em 100 páginas diferentes.


A vantagem da abordagem estilo-modelo é a reutilização de código. Assim como o uso de um estilo externo, você pode multiplicar uma folha de estilo em centenas de documentos, projetar um modelo sem conteúdo permite armazenar fragmentos de código em arquivos menores e reutilizá-los. Todas as 100 páginas apontam para o mesmo menu, então, se você quiser mudar o menu, mude um arquivo e tudo muda com ele.
Veja como você usa esse tipo de abordagem:


Crie um modelo único para todo o seu site.
Crie HTML e CSS básicos para gerenciar a aparência geral para todo o seu site. Não se preocupe com o conteúdo ainda. Basta criar espaços reservados para todos os componentes da sua página. Certifique-se de dar a cada elemento uma identificação e escrever o CSS para obter as coisas posicionadas como você deseja.


Adicionar suporte jQuery.
Faça um link para a biblioteca jQuery e faça um método init () padrão. Coloque o código para manusear as partes da página que sempre serão consistentes.


Duplica o modelo.
Depois de ter uma idéia de como o modelo funcionará, faça uma cópia para cada página do seu site.


Personalize cada página alterando a função init () .
A única parte do modelo que muda é a função init (). Todas as suas páginas serão idênticas, exceto que eles têm funções init () personalizadas que carregam conteúdo diferente.


Carregue conteúdo personalizado nas divs com AJAX.
Use a função init () para carregar o conteúdo em cada div.


Esta é uma ótima maneira de gerenciar o conteúdo, mas não é um sistema de gerenciamento de conteúdo completo. Até o AJAX não pode permitir que você store conteúdos na web. Sistemas de gerenciamento de conteúdo mais complexos também usam bancos de dados em vez de arquivos para lidar com conteúdo. Você precisará de algum tipo de programação do lado do servidor (como PHP) e geralmente um banco de dados (como mySQL) para lidar com esse tipo de trabalho.