Take the 2-minute tour ×

I was wondering if someone could explain the difference between using Javascript's eval(), and another approach, like using JQuery to create script tags and then appending that element to the page:



$("<script type='text/javascript'>"+somecode+"</script>").appendTo("head");

Not sure if this is relevant, but here's the context: I'm working with a version of the Drupal Popups module whose basic purpose is to easily turn regular links into popups by AJAX'ing an entire page request and appending it to the page in a modal window. This frequently includes external CSS and Javascript files. In an effort to improve the performance of all this AJAX loading I switched over to use AJAX queueing, and I changed an eval() of external scripts into the alternative listed about. However, that caused sporadic Javscript bugs on various other pages.

share|improve this question
I don't see how you could use eval to do what you are doing with jquery anyways. Eval used to turn things like json response strings into arrays and stuff like that. –  Matt Phillips Feb 4 '11 at 23:41
@MattPhillips eval evaluates code. –  Raynos Feb 4 '11 at 23:46
@Matt — jQuery contains some internal functions which "eval" code by appending it to the document in a script tag. IIRC, globalEval is used extensively by jQuery's AJAX functions, including for same-domain scripts and JSONP. –  Ben Blank Feb 5 '11 at 0:04
add comment

3 Answers

I strongly suggest using JSON-P.

Add a callback function name on the outgoing AJAX request by creating a script node on the fly (with src=[url]), and let the callback function get called with json data. You define the callback function in your page (properly namespaced) and put your update logic inside it.

The advantage of dynamic script node callback is that there is no same-domain restriction like in XHR.

For example, your site is www.foobar.com and some webservices are hosted on www.foobarapi.com. you create a script node in runtime with src="http://www.foobarapi.com/baz?a=foo1&b=foo2&callback=foo.bar.baz"

Meanwhile in your page, you have:

foo.bar.baz = function(data) {
  // use the data

And your backend service, say a php, can look like:

$callback = $GET['callback'];
$c = someCalc($a, $b);
echo $callback . "({ \"c\" : $c });";
share|improve this answer
you need to make your incoming data JSONP friendly. This isn't useful for 3rd party external files. –  Raynos Feb 4 '11 at 23:45
@Raynos: Agree. –  Joy Dutta Feb 4 '11 at 23:52
Thanks for your response, but it's only tangentially related to my question. I was looking for information concerning the difference between the 2 approaches, as opposed to a suggestion to use another method all together that is not something I can implement, given the context. –  Oliver Feb 8 '11 at 15:50
add comment

Well one (as far as differences go) is eval will return the result of an expression.

var result = eval('3+4'); // result = 7 

As long as your javascript string is in the structure of a script block, i would suggest injecting it within a script tag/

share|improve this answer
More accurately. eval() returns the result of the last expression evaluated while a script tag can't return anything. –  Alexandre Jasmin Feb 4 '11 at 23:45
@alexandre - True, that is more accurately worded. i'll update. –  Josiah Ruddell Feb 4 '11 at 23:47
eval also fails if you run your code through JSLint. –  Raynos Feb 4 '11 at 23:50
add comment

Adding script tags will load the scripts synchronously, whereas loading when you eval text via XHR, that was loaded asynchronously. Because of the async, the scripts were probably loaded out of order.

Note there are a billion if-but-then cases to this, but I'm guessing this is the case based on your scenario.

Now, you could load the XHR synchronously, but then things will drastically slow down. Browsers can load six (ish) scripts at once but execute them in order. The XHR will load one at a time.

share|improve this answer
I was under the impression that in general the browser could only handle 2 requests at once, and I am in fact loading each file synchronously to make sure they load in order and the popup page is instatiated correctly, which is why I was perplexed by the problem. I'd love to do asynchronous loading, but it seems to make more sense when you're loading external JS and CSS via AJAX. –  Oliver Feb 8 '11 at 15:52
add comment

Your Answer


