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>
Então, 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/
https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHTTPRequest
