Começando do simples

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 18/11/2006
Área: Ajax
Visualizações: 5.814
Comentário(s): 1

imprimir envie por e-mail compartilhe
Vamos trabalhar com um exemplo que irá precisar de uma linguagem dinâmica, porem não importa qual, você poderá usar a sua linguagem favorita.
No site www.ipeditor.ipsoft.com.br vocês podem ver um exemplo do que iremos fazer agora. Ao clicar em qualquer link do site apenas a parte central da página é recarregada. Isso era feito antigamente com IFrames ou Frames, mas era muito feio e grosseiro, a página ficava muito rígida e não era possível disponibilizar um link para as páginas que não fosse a principal.

Bem, então vamos ver qual é a mágica:
Como vocês já devem conhecer, aqui está a função que cria um o objeto AJAX, que na verdade é um objeto do javascript a depender do navegador utilizado (veja os comentários):

function openAjax() {

var ajax;
try
{
    ajax = new XMLHttpRequest(); //primeiro tentamos criar um objeto do tipo XMLHttpRequest()
}
catch(ee)//no entanto navegadores como IE não conhecem esse objeto
{
    try
    {
        ajax = new ActiveXObject("Msxml2.XMLHTTP"); //O IE conhece o ActiveXObject, mas o parâmetro depende da versão.
    }
    catch(e)
    {
        try
        {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E)
        {
            ajax = false;//nesse caso o navegador não é compatível e nosso site não funcionará com AJAX :-(
        }
    }
}
return ajax;//retorna o objeto pronto.
}


Essa função ainda não faz nada sozinha. Ela apenas cria o objeto que possui os métodos necessários para fazermos as requisições assíncronas. Veja todos os métodos desse objeto no site da W3Shcools.com(inglês).
A função abaixo utiliza esse objeto e seus métodos. Ela recebe como parâmetro a URL a ser requisitada e o ID da div que receberá o conteúdo requisitado.

function getURL(URL, Destino)//URL: página que vc quer exibir, Destino: id da div que receberá o resultado
{

if(document.getElementById)//verifica se o navegador é compatível
{
var ajax = openAjax(); //lembra da nossa função lá em cima?
ajax.open("GET", URL + "?ajax=true", true); //faz a requisição da nossa URL, mais a diante vc entederá pq o parâmetro por GET

                //Como vc deve ter visto na página da W3C, o objeto ajax possui vários estados
                //Cada estado tem seu significado
//State Description
//0 The request is not initialized
//1 The request has been set up
//2 The request has been sent
//3 The request is in process
//4 The request is completed
//Essa função a baixo executa os procedimentos a cada vez que o estado muda.
ajax.onreadystatechange = function()
   {         if(ajax.readyState == 1)
{
document.getElementById(Destino).innerHTML = "Carregando...";
}
if(ajax.readyState == 4)
{
    if(ajax.status == 200)
    {         var resultado = ajax.responseText;
resultado = resultado.replace(/+/g," ");
document.getElementById(Destino).innerHTML = unescape(resultado);
    }
else     document.getElementById(Destino).innerHTML =  "Página não encontrada. (" + ajax.status + ")";
            }
}
                                   }

        ajax.send(null);//enfim envia a requisição!
}
}


Aí você me pergunta: Mas para eu requisitar a página para que ela apareça dentro da outra, ele não pode estar completa, deve ter apenas o conteúdo central, sem os headers, o menu da página, etc... não é o mesmo problema do iframe? Como eu passarei o link apenas para essa página?

Bem, aqui vai um pequeno truque: toda página verifica se a requisição foi feita pela função ajax ou não. Caso a variável ajax enviada por get seja igual a true, então a página não inclui o menu, o header, o footer, etc... mas caso essa variável não tenha essa valor, a página inclui tudo e passa a ter uma página completa.

Se você perceber, no link que dei de exemplo (www.ipeditor.ipsoft.com.br) se você parar o mouse sobre o menu verá que cada um passa o nome da página que quer mostrar, ex: Screenshots passa o parâmetro 'telas'. Então o link direto é www.ipeditor.ipsoft.com.br/?pg=telas, como a variável ajax não está indo, a página se exibe completa.

;-)
No próximo artigo irei mostrar como tornar quaisquer formulários em um formulário ajax! Essa função me ajudou muito e reduziu bastante meu trabalho, acho que irá ajudar vocês.
Abraços.
Rubens

Preencha o formulário para comentar:
Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





Carlos Anders

   - Publicado em: 25/09/2007 - 21:35

achei legal seu script, mas ñ estou conseguindo colocar para funcionar o que será pode me ajudar

 

Autor da matéria
Rubens de Souza Silva
Ciêntista da Computação, pela Universidade Estadual de Santa Cruz-UESC, Ilhéus, Bahia. Trabalha com desenvolvimento para web a mais de 5 anos. Já desenvolveu di.

Todas as matérias de Rubens de Souza Silva

Publicidade
Seguir o Oficina da Net
RSS

RSS

RSS
Top matérias do mês
Matérias relacionadas
Tags

© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.