How can you, without using any library, load and execute a javascript file using ajax?

Question

I want to load a Javascript file and execute it, using AJAX. I'm aware of solutions like jQuery's .getScript(), but I do not want to use any library! I'm also aware of writing <script> elements to the DOM, but as I said, I'm trying to achieve this with AJAX.

Here's a slimmed down version of my tries:

var http;
if(window.XMLHttpRequest){
    http=new XMLHttpRequest();
}
http.open('get','libs/teh-lib.js',false);
http.onreadystatechange=function(){
    if(http.readyState==4 && http.status==200){
        alert(http.responseText);
    }
}

Firebug shows the requests succeed, the right file is accessed, and a HTTP status 200 is shown. But the response seems to be empty. http.responseType and http.response seem to be empty, too. I also tried eval(http.responseText).

Why do you need to use Ajax (as opposed to including the file using a <script> tag)? — Pekka
– Pekka, Commented Jan 12, 2012 at 21:20
Ah, only now I realize what the problem is. Sorry. What you show should work (even though as said I don't think it's a good idea.) If you get an empty response, I'm pretty sure the problem is on server side. What happens if you access the URL directly in your browser? — Pekka
– Pekka, Commented Jan 12, 2012 at 21:27
@Pekka Oh you're right, the file I tried to load also shows empty when I access it directly in the browser... Looks like an underscore as first character of a file name doesn't work... Well thanks you made me find the problem! — Alex
– Alex, Commented Jan 12, 2012 at 21:35

Pekka · Accepted Answer · 2012-01-12 21:23:30Z

1

but as I said, I'm trying to achieve this with AJAX.

Ajax is simply not the method for this - all it can do for you is fetch data, which you would then have to run through eval() to get them executed.

Creating a new script element in the DOM is really the natural way to go here.

answered Jan 12, 2012 at 21:23

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pekka Over a year ago

@j08691 it's the only way to do what the OP wants. I don't think it's a good idea. Re eval and evil...When is JavaScript's eval() not evil?

Alex Over a year ago

I have no particular reason to use AJAX over adding a <script> tag, it's just that I tried to do it with AJAX, and I don't manage to get it working!

Pekka Over a year ago

@Alex see my last comment underneath your question

Raynos · Accepted Answer · 2012-01-12 21:23:49Z

1

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function runScript() {
    eval(this.responseText);
});
xhr.open('get', 'script_url.js');
xhr.send();

As mentioned don't do this. Use <script>

var script = document.createElement("script");
script.src = 'script_url.js';
document.head.appendChild(script);

answered Jan 12, 2012 at 21:23

Raynos

170k57 gold badges359 silver badges399 bronze badges

Collectives™ on Stack Overflow

How can you, without using any library, load and execute a javascript file using ajax?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related