
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
Uma dúvida que não consegui resolver
no campo:
Clientes
Abre uma página do mesmo servidor sobre o link #, então como eu faço para que abra uma página externa na div? exemplo:
clientes