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 sirrocha
      Olá pessoal, sou iniciante só que tenho um projeto com uma certa pressão de tempo pra fazer. Um dos problemas que estou tendo é relacionado ao clicar em um tipo "a href" e aplicar uma função. Pelo que vi, tenho que usar AJAX mas não tenho nenhuma noção de como iniciar, mesmo vendo muitos vídeos...

      Basicamente tenho uma página onde está carregando algumas sessões. Porém, ao clicar neste botão:
       
      1 <p><a class="link" name="final" id="fin" onclick="finalizar()" href="areaUsuario.php" style="text-decoration:none;">finalizar</a></p>

      Estava tentando chamar uma função do tipo finalizar(), que iria dar UNSET em duas sessões específicas que eu precisava desligar (por isso não posso usar o destroy para tirar todas).
       
      1 2 3 4 5 6 7 8 9 <script type="text/javascript">>     <?php     function finalizar() {         unset($_SESSION['prestacao']);         unset($_SESSION['nomeproj']);         header("location:areaUsuario.php");     }     ?> </script>

      O que eu fiz e falaram que estava errado era isso. Como posso usar o AJAX neste caso para desligar essas duas funções e enviar o usuário para a área inicial? Por favor, se possível, enviar uma base de como poderia fazer com o raciocínio. É algo urgente, mas também gostaria de aprender.
    • By DinhoPHP
      Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.
       
      loadAjax.php
      $dir = new DirectoryIterator( './images/portfolio/sem_categoria' ); // array contendo os diretórios permitidos $diretoriosPermitidos = array("portfolio","sem_categoria"); foreach($dir as $file) { // verifica se $file é diferente de '.' ou '..' if (!$file->isDot()) { // listando somente os diretórios if ( $file->isDir() ) { // atribui o nome do diretório a variável $dirName = $file->getFilename(); // subdiretórios $caminho = $file->getPathname(); // chamada da função de recursividade recursivo($caminho, $dirName); } // listando somente os arquivos do diretório if ( $file->isFile() ) { // atribui o nome do arquivo a variável $fileName = $file->getFilename(); // print //echo "Arquivos: ".$fileName."<br>"; } } } function recursivo( $caminho, $dirName ){ global $dirName; $DI = new DirectoryIterator( $caminho ); foreach ($DI as $file){ if (!$file->isDot()) { if ( $file->isFile() ) { // $fileName = $file->getFilename(); // //echo $dirName.": ".$fileName."<br>"; echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''> <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'> <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'> </a> </div>"; } } } } Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.
      <script> //variavel para controle de registros retornados var pagina = 0; var pesquisa = true; //function carrega function carrega(){ $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast'); $.ajax({ type: "POST", url: "loadAjax.php", data: "page="+pagina,//variavel passada via post cache: false, success: function(html){ if(html){ $('#loading').fadeOut('fast'); $("#result").append(html); //mostra resultado na div result pesquisa = true; }else{ $('#loading').html("Fim da pesquisa...").fadeIn('fast'); pesquisa = false; } }, error:function(html){ $('#loading').html("erro...").fadeIn('fast'); } }); }; //chama minha funcao ao carregar a pagina $(document).ready(function(){ carrega(); }); //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando //minha function carrega novamente para trazer mais dados dinamicamente $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() >= $(document).height()){ pagina += 1; carrega(); }; }); </script>  
    • By mamotinho
      Olá, estou tentando enviar a url que corresponde a imagem porém não é possivel enviar essa url pois ela é muito grande, teria alguma maneira de eu conseguir fazer esse envio sem perde muito o sentido. já rodei a internet toda mais não conseguir resolver a questão.
      segua abaixo o exemplo
       
      function photo(idx){ var character = idx; (async () => { const { value: file } = await Swal.fire({ input: 'file', inputAttributes: { accept: 'image/*', 'aria-label': 'Selecione sua imagem' } }) if (file) { const reader = new FileReader() reader.onload = (e) => { var mystring = e.target.result; var encodedString = btoa(mystring); //alert(encodedString); //código que envia os dados. new Ajax.Updater('carfunc', 'pag/request/user/swal.php?Idx='+character+'&form=6&image='+encodedString, {method: 'get', asynchronous:true, evalScripts:true}); carregando('#carfunc'); } reader.readAsDataURL(file) } })() }  
       
      Aqui é a chamada da função:
       
      <div class="skillBlock"> <div class="skillBlock-block"> <div class="skillBlock-img"> <img src="images/skill_5.jpg" alt=""> <span class="m-number">3</span> </div> <div class="skillBlock-info" style="cursor:pointer;" onclick="javascript:photo('<?=soNumero(antSQL(anti_injection(htmlspecialchars($rowsCharacter->CharacterIdx))))?>')"> <p>Adicionar Emblema</p> adicione emblema de guild </div> </div> Algum especialista do coração bom poderia me tirar esse sufoco.
    • By andremergueluiz
      Mandei uma imagem em anexo pra entender
       
      Alguém pode me ajudar como posso fazer um script que vai  pegar o id de cada produto ir no banco de dados e atualizar o campos visualizações vendas concretizadas isso de modo automatico sem que eu precise ficar clicando em atualizar a pagina

    • By DinhoPHP
      Estou tentando enviar um anexo e o mesmo não chega no email, apenas quando não faço uso da função attach.
      arquivo que contém as functions responsáveis pelo envio do email.
      public function attach(string $filePath, string $fileName): Email{ $this->data->attach[$filePath] = $fileName; return $this; } Arquivo que utiliza a função attach.
      No arquivo que captura os dados do formulário, já passei os parâmetros de tudo quanto é jeito.
      require __DIR__ . "/include/head.php"; require __DIR__ . "/vendor/autoload.php"; use Source\Support\Email; $email = new Email(); // CAPTURANDO DADOS DO FORMULÁRIO $nome = trim(ucwords(preg_replace('/\s\s+/', ' ',($_POST['nome-curriculo'])))); $eemail = trim(strtolower(preg_replace('/\s\s+/', ' ',($_POST['email-curriculo'])))); $telefone = trim(preg_replace('/\s\s+/', ' ',($_POST['telefone-curriculo']))); $cidade = trim(preg_replace('/\s\s+/', ' ',($_POST['cidade-curriculo']))); $assunto = trim(preg_replace('/\s\s+/', ' ',($_POST['assunto-curriculo']))); $mensagem = trim(preg_replace('/\s\s+/', ' ',("<pre>".$_POST['mensagem-curriculo']."</pre>"))); // $file_tmp = ($_FILES['file'], $_POST['name']); $files = $_FILES['curriculo']; $email->add($assunto, "<h3>Nome: {$nome}<br>{$files['name']}<br>Email: {$eemail}<br><br>Telefone: {$telefone}<br><br>Cidade: {$cidade}<br><br></br>Mensagem:<br>{$mensagem}</h3>", $nome, $eemail)->attach($files['tmp_name'], $files['name'])->send(); var_dump($files); A função attach que recebe dois parâmetros, quando utilizada, não envia o anexo vindo do form HTML, já digitando os parâmetros na função, ela envia o anexo. Já li até alguns casos semelhantes aqui mesmo e nada! Só envia o anexo digitando os parâmetros manualmente. 
×

Important Information

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