Calling .js file from HTML using AJAX

Question

this js is at index.html between "<script type="text/javascript">"

function callanular() {

        peticion_http = new XMLHttpRequest();

        peticion_http.onreadystatechange = showContent;

        peticion_http.open('GET', 'anular.js', true); 
        peticion_http.send(null);                       


        function showContent() {

            if(peticion_http.readyState == 4) {

                if(peticion_http.status == 200) {

                    document.getElementById("notice").innerHTML=peticion_http.responseText;

                }
                else
                    document.getElementById("notice").innerHTML="ERROR "+peticion_http.status;
            }
        }
    }

index.html HTML code I have, looking to show box on div with id=notice

<div id="notice"></div>
<input type="submit" value="RESTRICTED ACCESS" onclick="callanular()">

At the same folder I have anular.js created, I want to show a simple box with a text, in this case I only have an alert to know it's working.

window.onload = function() {
    return (alert("asdasdsa"));
}

Whatever I write I can only receive the literally code. e.g.

window.onload = function() {return (alert("asdasdsa")); }

score 0 · Answer 1 · answered May 25 '20 at 03:34

0

You have to include the imported code in a script tag. Adding it to document body in a doc will not work. See answers here Is it possible to load new Javascript files with AJAX?

answered May 25 '20 at 03:34

smartdroid

312
2
10

score 0 · Accepted Answer · answered May 25 '20 at 05:11

So this is how I solved it by using Jquery in first case, AJAX in second case.

First Case

Javascript code on index.html

function callanular() {

        $.getScript("anular.js", function(){
            //You can write an alert or something
            //In my case it wasn't necessary.
        });
    }

anular.js content

document.getElementById("notice").innerHTML = "<div id='nopul' onclick='getText()'>YOU SHOULDN`T PRESS THIS BUTTON</div><br>";

Back to index.html where I got:

<div id="notice"></div> //here anular.js is going to show the div box
<input type="submit" value="RESTRICTED ACCESS" onclick="callanular()">

At that point it was working fine as I wanted. So I added AJAX to get text from txt file simply doing a call to

XMLHTTPRequest();

peticion_http.open('GET', 'text.txt', true);

-

Second Case anular.js file

<div id='nopulses' onclick='getTexto()'>YOU SHOULDN`T PRESS THIS BUTTON</div><br>

index.html javascript code

        peticion_http = new XMLHttpRequest();

        peticion_http.onreadystatechange = showContent;

        peticion_http.open('GET', 'anular.js', true);  
        peticion_http.send(null);                       

        function muestraContenido() {

            if(peticion_http.readyState == 4) {

                if(peticion_http.status == 200) {

                    document.getElementById("notice").innerHTML=peticion_http.responseText;

                }
                else
                    document.getElementById("notice").innerHTML="ERROR 404 Not Found "+peticion_http.status;
            }
        }

Calling .js file from HTML using AJAX

2 Answers2