Abrir paginas com Ajax

Navegação em uma pagina JSF, onde um componente ira receber dentro dele a pagina de se deseja abrir:

<af:commandLink actionListener="#{backing.funcao}"
            styleClass="textoSubMenu" 
            id="LinkTeste" 
            partialSubmit="true"                                              
            onclick= "javascript:setaValor('../site/paginaTeste.jspx', 
                                    'descricao');">
    <h:outputText value="#{msg.subMenuControladoria}"/>
</af:commandLink>

Nesse link(Componente do ADF), foi utilizado um actionListener para realizar umas funções na pagina, e a propriedade partialSubmit="true" , para evitar que toda a pagina fosse atualizada ao clicar (O funcionamento disso esta em um outro post).

Quando a ação de clique é disparada, então o javascript a seguir entra em ação para buscar a nova pagina e carrega-la dentro de um componente já definido.

    function getXmlHttpRequestObject() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest(); //Not IE
        } else if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP"); //IE
        } else {
            alert("Seu navegador não suporta essa navegação.  Por favor Atualize!");
        }
    }
    var receiveReq = getXmlHttpRequestObject();
    var idcomp;
    //Initiate the asyncronous request.

    function setaValor(pagina , id ) {
        //Deixa visivel a imagem e esconde o componente até ser carregado 
        document.getElementById(id).style.visibility = "hidden";
        document.getElementById("loading").style.visibility = "visible";
        if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
            receiveReq.open("GET", pagina, true);
            idcomp = id;
            receiveReq.onreadystatechange = setar;
            receiveReq.send(null);
        }
    }

  function setar() {
        if (receiveReq.readyState == 4) {
            //esconde a imagem 
            document.getElementById("loading").style.visibility = "hidden";            
            //Joga a pagina requisitada para dentro do componente
            document.getElementById(idcomp).innerHTML = 
                    receiveReq.responseText;
            //Deixa visivel  o componente carregado
            document.getElementById(idcomp).style.visibility = "visible";
        }
    }

Esse javascript ainda altera a propriedade visibility de um componente de id = loading:

 <h:graphicImage url="/Imagens/loading.gif"  id="loading" styleClass="figLoading"/>

Esse componente é apenas uma imagem do tipo gif, que usei para dar uma resposta ao usuário enquanto a pagina é carregada.(implementação bem simples).

Depois de carregado e mostrado pelo JavaScript, este é o componente que recebe a pagina que foi carregada:

   <h:form styleClass="formDescSMenu" id="descricao"></h:form>        

Grupo de JSF oficial do Brasil!

Um grupo internacional da língua portuguesa para discussão de conceitos e tecnologias Web como JavaServer Faces, RIA, patterns e ferramentas de desenvolvimento.

Grupo de JSF

PartialRefresh e Partialtriggers para componentes ADF

Para que serve?
Atualizar componentes sem que seja preciso atualizar a pagina.

PartialRefresh
Atualizar um componente setando novas configurações ou opções a ele, dizendo apenas qual o componente a ser atualizado

/**
* Faz com que o componente passado por parâmentro seja
* atualizado na tela
* @param uic componente a ser atualizado
*/
private void doPartialRefresh(UIComponent uic) {
AdfFacesContext adfctx = AdfFacesContext.getCurrentInstance();
adfctx.addPartialTarget(uic);
}

Partialtriggers
Define que um componente será reatualizado quando algum outro por alterado

af:selectonechoice label="Teste"
required="true"
binding="#{backing_teste.oneChoice}"
partialtriggers="IdComponente"
id="selectOneChoice"
/af:selectonechoice

OBS: para que essa atualização ocorra normalmente o componente que ira disparar as alteraçoes deve estar com a propriedade autoSubmit ou partialSubmit setado para true