In AJAX, I need to return several javascript functions which are called by event handlers in the http response. However, I cannot get those javascript functions evaluated by the browser.
For example, if server returns the following for an AJAX request:
<script>
function foo()
{
}
<script>
<form>
<input type='button' value='test' onclick='foo()'> </form>
I can see the 'test' button, but when I click it, I got error: "foo() not defined".
I searched on google and found people suggested using eval(), but that doesn't work for function either.

You didn't close your <script tag in that sample.

Alternatively, I find that <form onsubmit="return foo()"> works the best.

Javascript returned by an AJAX request (ie. in req.responseText) will not be evaluated. Even if you use innerHTML on an element to change it's contents, it still won't be evaluated.

You need to use regex to fetch the code between the <script></script> tags and then use eval() to evaluate it. Much easier to use a JS framework to do AJAX, though. For example, jQuery's AJAX methods will automatically evaluate JS form the server when you set the dataType option to 'html'.