Carregar Script em página Carregada com AJAX
Em um trabalho aqui o cliente me veio com a ideia de querer uma barra de progresso igual aquele que tem no GIT/YOU-TUB etc...
Muito bem, simples para isso usarei ajax.
Aí começaram os problemas, como a aplicação (é algo parecido a esse fórum) usará o banco de dados MySQL e para armazenar páginas e conteúdos, assim sendo o admin pode logar e criar novas/editar páginas inteiras no próprio site sem criar novos arquivos. Então como carregar os scripts que forem adicionados um vez que as páginas vão ser lidas através de um AJAX?
Muito bem usarei a jQuery que faz isso muito bem. Porém não sou fã de biblioteca externa, mas mesmo assim optei por ser a única solução plausível. Então me veio o cliente novamente e disse que não queria isso. "Putz ferrou" Vida de webmaster é fod.....
Comecei uma peregrinação e estudo através de uma solução de executar scripts em páginas carregadas com ajax. Resultado. Não existe solução prática para isso.
A forma mais coesa seria pegar os JS que forem carregados e serem embutidos na página principal. Outro problema que assim há um sobrecarregamento do DOM quando mais se navega no site.
A solução então meio que na gabiarra era pegar os dados e realocar dentro da própria div que fora carregada com conteúdo, assim toda vez que for carregado novo ajax o local era re-escrito.
Então fiz esse script aqui que funciona perfeitamente. Porém ainda não implementei a importação de CSS porque achei desnecessário até o momento.
Quem quiser executar Ajax usando javascript nativo fica aqui como fazer.
Vamos aos exemplo:
Página que requisitará o AJAX
Spoiler
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meu Ajax</title>
<script src="AjaxRequest.js" type="text/javascript"></script>
</head>
<body>
<div class="ajax-progress"></div>
<button onclick="ajx.linkAjax('carregar', 'new.php', null, null);">Carregar</button>
<div id="carregar"></div>
<script>ajx = new AjaxRequest();</script>
</body>
</html>
Simples um botão que vai chamar um método que executa o ajax então vou explicar.
ajx = É o objeto da intrância para acessar o método.
linkAjax = É o método que executa o Ajax.
Os parâmetros>
Citar
linkAjax (divName, fromHttp, urlReplace, progress)
divName : É a div#ID onde deve ser carregado o arquivo.
fromHttp: É o arquivo que vai ser carregado
urlReplace: (Ainda não está 100% funcional) Altera o endereço da barra do navegador coloque true para ativar.
progress: Vai mostrar o status do progresso enquanto a página vai sendo carregada. Requer que crie o layout no CSS da div.ajax-progress * Coloque true que habilita.
DIV.ajax-progress para quem tiver dificuldade de criar
Spoiler
.ajax-progress {
z-index: 9;
height: 5px;
width: 0;
position: absolute;
top: 0;
left: 0;
background-color: #ff0000;
border-top: .625rem solid #bb0000;
border-bottom: .625rem solid #bb0000;
box-shadow: 0 .2rem .625rem 0 rgba(255,0,0,.5)
}
Arquivo AjaxRequest.js
Spoiler
var AjaxRequest = function () {
var $httpRequest;
var $progressBar = document.querySelector('.ajax-progress');
var $progress = 0;
var $loadDiv;
var $scripts;
function initXMLHR() {
$httpRequest = null;
if (window.XMLHttpRequest) {
$httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
$httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
$httpRequest = true;
}
}
}
}
this.linkAjax = function (divName, fromHttp, urlReplace = null, progress = null) {
initXMLHR();
$loadDiv = document.getElementById(divName);
if (urlReplace) {
window.history.replaceState(null, null, fromHttp);
}
if (progress) {
$httpRequest.addEventListener('progress', updateProgress, false);
}
$httpRequest.onreadystatechange = function () {
try {
if (($httpRequest.readyState === 4) && ($httpRequest.status === 200)) {
$loadDiv.innerHTML = $httpRequest.responseText;
$scripts = unescape($httpRequest.responseText);
appendjS($scripts);
if (progress) {
$progressBar.style.width = '0';
}
}
} catch (e) {
$loadDiv.innerHTML = '<div class="font-jumbo align-center margin-top">\n\
Erro ao requisitar arquivo do servidor!</div>';
if (progress) {
$progressBar.style.width = '0';
}
}
};
$httpRequest.open('GET', fromHttp, true);
$httpRequest.send();
};
function updateProgress(e) {
if (e.lengthComputable) {
$progress = (e.loaded / e.total) * 100;
$progressBar.style.width = $progress + '%';
}
return true;
}
function appendjS(script) {
var $src;
var $endSrc;
var $newSrc;
var $stringSrc;
var $coutSrc;
$coutSrc = script.indexOf('<script', 0);
removeOldSrc();
while ($coutSrc != -1) {
$newSrc = document.createElement('script');
$src = script.indexOf(' src', $coutSrc);
$coutSrc = script.indexOf('>', $coutSrc) + 1;
if ($src < $coutSrc && $src >= 0) {
$coutSrc = $src + 4;
$endSrc = script.indexOf('.', $coutSrc) + 4;
$stringSrc = script.substring($coutSrc, $endSrc);
$stringSrc = $stringSrc.replace("=", "").replace(" ", "").replace("\"", "").replace("\"", "").replace("\'", "").replace("\'", "").replace(">", "");
$newSrc.src = $stringSrc;
} else {
$endSrc = script.indexOf('</script>', $coutSrc);
$stringSrc = script.substring($coutSrc, $endSrc);
$newSrc.text = $stringSrc;
}
$loadDiv.appendChild($newSrc);
$coutSrc = script.indexOf('<script', $endSrc);
$newSrc = null;
}
}
function removeOldSrc() {
var $oldScript = $loadDiv.getElementsByTagName('script'), cns;
for (cns = $oldScript.length - 1; cns >= 0; cns--) {
$oldScript[cns].parentNode.removeChild($oldScript[cns]);
}
return;
}
};
Assim sendo poderemos sempre reaproveitar o código para executar diversificados ajax em divs diferentes.
O código está meio bagunçado porque ainda é um rascunho, e pretendo fazer upgrades para POT'S, upload e downloads. Mas por enquanto assim atende a necessidade do Ajax.
Por fim vamos a página "new.php" que está sendo chamada no ajax
Spoiler
<script type="text/javascript" src="teste.js"></script>
<script type="text/javascript">
function teste2() {
document.getElementById('texto').innerHTML = "Executando teste 2 JS em escopo";
}
</script>
<button onclick="teste1();">TESTE 1 (JS import) </button>
<button onclick="teste2();">TESTE</button>
<div id="texto"></div>>
Citar
E o arquivo de teste que é um js que importamos para testar.
function teste1() {
document.getElementById('texto').innerHTML = "Executando teste 1 com arquivo JS importado";
}
Então ficamos aqui.
Quem quiser pegar isso criar uma lógica melhor, melhorar o código. Compartilhe suas ideias...
E para quem não sabe como usar Ajax, agora tem o exemplo e o script necessários.
Lembrando que isso é uma solução feita as pressas para entregar um trabalho, apesar de funcional.Discussão (0)
Carregando comentários...