Carregar página dentro de uma DIV com AJAX

JavaScript

Nesse artigo você irá aprender como carregar página dentro de uma DIV com AJAX.

Portanto, primeiro criamos o arquivo onde fazemos a solicitação do browser, para saber se o navegador suporta ou não “Msxml2.XMLHTTP”

Arquivo: ajax.js

function GetXMLHttp() {
    if(navigator.appName == "Microsoft Internet Explorer") {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}

var xmlRequest = GetXMLHttp();

 

No arquivo “instrucao.js” terá as informações necessárias para fazer a ação!
Arquivo: instrucao.js

function abrirPag(valor){
    var url = valor;

    xmlRequest.open("GET",url,true);    
    xmlRequest.onreadystatechange = mudancaEstado;
    xmlRequest.send(null);

        if (xmlRequest.readyState == 1) {
            document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";
        }

    return url;
}

function mudancaEstado(){
    if (xmlRequest.readyState == 4){
        document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
    }
}

 

Criamos a página “index.html” para recerber as informações
Arquivo: index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carregando Página em DIV / AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="instrucao.js"></script>
</head>
<body>
    <div id="menu"><a href="#" onclick="abrirPag('conteudo.html');">Clientes</a></div>
        <br><br>
    <div id="conteudo_mostrar"></div>
</body>
</html>

 

E finalmente criamos a página “conteudo.html” que será exibida dentro da DIV “conteudo_mostrar”
Arquivo: conteudo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clientes</title>
</head>
<body>
No entanto, não podemos esquecer que o início da atividade geral de formação de atitudes exige a precisão e a definição do fluxo de informações. Por conseguinte, o surgimento do comércio virtual aponta para a melhoria dos modos de operação convencionais. Todavia, a crescente influência da mídia assume importantes posições no estabelecimento do processo de comunicação como um todo. Pensando mais a longo prazo, a mobilidade dos capitais internacionais prepara-nos para enfrentar situações atípicas decorrentes dos conhecimentos estratégicos para atingir a excelência.
</body>
</html>

Espero ter ajudando com esse script!
OBS: Esse script foi baseado no antigo blog do Ted k’

Referência:
https://tedk.com.br/blog/html/carregar-uma-pagina-dentro-de-uma-div-com-ajax/

Autor da Postagem

Tecnologia

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Close