Jump to content
Omar~

Carregar Script em página Carregada com AJAX

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
    • By Authent
      Gente tenho um laço de repetição onde exibi uma lista , nele contem um botão para atualizar o nível desses itens, porem queria que a pagina não desse refresh e ao mesmo tempo enviasse uma msg para o "TD" daquele item atualizado, e utilizei o Ajax que envia no metodo post o id, porem ele está enviando só o ultimo id da lista alguem poderia me ajudar. Abaixo explicarei melhor
       
      while($row = $select->fetch(PDO::FETCH_ASSOC)): ?> <tbody> <tr> <td><?php echo $row['nome'];?></td> <td><?php echo $row['data'];?></td> <td class="contador<?php echo $row['id']; ?>"> <ul class="actions"> <li><a href="" id="<?php echo $row['id'];?>" class="ative btnUpdate"><i class="fas fa-check"></i> Atualizar</a></li> </ul> </td> </tr> </tbody> <form class="ajax_form"> <input type="hidden" class="id" name="id" value="<?=$row['id']?>" /> </form> <?php endwhile; ?> Nesse laço de repetição eu adicionei um td com uma class ID, para que a msg enviada fosse só para aquele td, até ai esta funcionando normal
      e o link que contem o ID = id, e um formulario dentro do while, e o valor do input é o valor do id
       
      <script> $(document).ready(function(){ $("body").delegate('.btnUpdate', 'click', function(e){ e.preventDefault() //Para anular o comportamento padrão do link var dados = $(".ajax_form").serializeArray(); var id = $(this).attr("id"); var contador = id; $.ajax({ url: "action/test.php", type: "POST", data: dados, success: function (resultado) { console.log(resultado); $('.contador'+contador+'').html(resultado); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR) console.log(jqXHR); } }); }) }); </script> e no script do Ajax ele recupera os dados, e enviar uma msg de sucesso para a class .contador+id(nessa parte está funcionando perfeitamente), porem como mencionado o id que está sendo enviado para o arquivo test.php é sempre o ultimo id do meu while alguem poderia me ajudar. se houver outro método estou aceitando também
    • By FabianoSouza
      Pessoal, qual a forma correta de enviar emoji por AJAX ao meu backend?
       
      Tem que usar:
      encodeURIComponent(minhaString) ??
      Quando envio uma string que tem texto junto com emoji,  meu código não funciona.
      Quando envio apenas o emoji, vai um código meio louco para o backend.
       
      Qual a maneira correta de tratar isso?
      Seria separar texto de emoji para enviar, e no backend juntar tudo novamente para poder gravar no banco?
       
      Preciso entender conceitualmente qual é a melhor forma de tratar essa situação, depois partir para a programação.
       
      Já fiz os testes do meu banckend: grava emoji com texto direitinho.
      O problema está realmente no meu frontend. Preciso saber como devo fazer o POST dos dados.
       
      Valew!!
       
       
    • By kaayasinho
      Boa tarde Pessoal tudo bom?
      Durante um tempo eu fui estudante de programação, para web. E esse forum me foi muito util pois aprendi muitas coisas, e tirei muitas duvidas com todos os participantes. Por outro lado não segui a carreira de programado pois tive outras oportunidades.
       
      Em fim, estou com um projeto de criar uma plataforma online para eventos, e estou tentando montar um time chegar nesse objetivo. Por hora ainda estou tentando juntando a equipe necessária para isso acontecer.
       
      Pela pouca experiência que tive na programação, sei que fazer essa plataforma é bem complexa principalmente com as necessidades que vamos englobar, porém o mercado esta escasso de plataformas flexíveis, no sentido de oferecer algumas ferramentas básicas na comunicação. apesar de ja existir algumas plataformas no mercado.
       
      Resumo:
      1-) Procuro por programadores backend com experiência (não sei exatamente informar a linguagem) mas chuto que Java, Javascript e PHP sejam fundamentais. (sei que abusaremos muito do AJAX)
       
      2-) Programador FrontEnd, com experiência. E que tenha principalmente em boas praticas, pois código sujo cheio de plugins tornará a plataforma pesada, e cheia de bugs.
       
      PS: Não procuro nada pronto, claro que plugins coisas são inevitáveis porém para funcionarmos Lisos com menos bugs possíveis procuro algo feito “artesanalmente” rsrs.
       
      Obs: o projeto esta no inicio ainda, estou juntando contatos para chegar no objetivo, e assim que tiver um contato gostaria de poder conversar trocar ideias, caso seja um projeto onde você se identifique nada impede de sermos parceiros ter uma % sobre o negocio.
       
       
      Obs2: Desculpem se escrevi meio enrolado ou esta complicado de entender. pois apenas disse plataforma de eventos e não especifiquei nada. mas assim que receber um contato eu passo mais informações com alguns links de exemplos, que é melhor que falar.
       
      E caso aqui seja o lugar correto posso passar mais informações por aqui também.
       
      Seguem alguns exemplos de plataforma de eventos online.
      Download de 2 PDFs de apresentações do mesmo segmento
       
      Site de uma das plataformas porém proximo do que almejamos
      https://www.swaper.com.br/
       
       
      Fico a disposição,
       
      Desculpem se postei no local incorreto
       
    • By Rafael Castelhano
      Olá, nunca fiz consulta com Ajax e estou quebrando a cabeça para atualizar um campo no Django, tenho um template de funcionário e assim que selecionar a matricula quero que busque via ajax o nome do funcionário, segue no link meus arquivos, se alguém puder ajudar agradeço:
       
      https://gist.github.com/castelhano/dcbdbd6bef0d0012efddae544224a5a5
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.