php - Execute javascript function on a page sent via AJAX response - Stack Overflow

admin管理员组

文章数量:1314556

I want to execute a function that is sent over AJAX request from the server. The function body isn't in the calling page. For example: (the plete code is given below)

1.calling PHP script:

<script>
 function fun()
 {
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }  
 ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){

            document.getElementById("rslt").innerHTML = ajaxRequest.responseText;


        }
    }

    ajaxRequest.open("GET", "ajax_js2.php", true);
    ajaxRequest.send(null);

 }
</script>
<input type="button" onclick="fun()">
<div id="rslt">
</div>

2.ajax_js2.php script:

<script>
 function test()
 {
   alert("Hello");
 }
</script>
<span onclick="test()">Test AJAX</span>

I know putting the function definition of "test" in the calling script will do. But I want to keep it in the second script.What should I do ? The server returns the span as a response to the client. While clicking upon the span "Test AJAX" the function should be called.

I want to execute a function that is sent over AJAX request from the server. The function body isn't in the calling page. For example: (the plete code is given below)

1.calling PHP script:

<script>
 function fun()
 {
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }  
 ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){

            document.getElementById("rslt").innerHTML = ajaxRequest.responseText;


        }
    }

    ajaxRequest.open("GET", "ajax_js2.php", true);
    ajaxRequest.send(null);

 }
</script>
<input type="button" onclick="fun()">
<div id="rslt">
</div>

2.ajax_js2.php script:

<script>
 function test()
 {
   alert("Hello");
 }
</script>
<span onclick="test()">Test AJAX</span>

I know putting the function definition of "test" in the calling script will do. But I want to keep it in the second script.What should I do ? The server returns the span as a response to the client. While clicking upon the span "Test AJAX" the function should be called.

• php
• javascript
• ajax

Share Improve this question Follow asked Sep 6, 2013 at 11:18 Parveez AhmedParveez Ahmed 1,41744 gold badges1818 silver badges3030 bronze badges 10

• Good question - sadly can't help but would you mind explaining WHY you want to run a script not embedded in the page? Seems a bit of an odd way to do it IMHO. You control both the calling page and the ajax so you can send the script you need when it is loaded NYET? – Robert Seddon-Smith Commented Sep 6, 2013 at 11:22
• Does it also return the script block in the response? Ajax calls usually strip off scripts for security reasons. – lshettyl Commented Sep 6, 2013 at 11:22
• yeah, I am not sure whether the script block (javascript) would be returned or not. But I want to do this in order to restrict page size of the calling PHP script where the page is heavily loaded with scripts @LShetty – Parveez Ahmed Commented Sep 6, 2013 at 11:29
• how about onclick="alert('Hello');" ? – user2587132 Commented Sep 6, 2013 at 11:32
• Its just an example, what if there are too many statements and other function calls ? @rps – Parveez Ahmed Commented Sep 6, 2013 at 11:35

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 8

<script> tags inserted into the DOM will not be executed, unless you run eval(). Read more here: Can scripts be inserted with innerHTML?

So in your case, test() will be undefined when you try to click on the span because the script code has not been executed (thus never defined the test function).

You can get around it using something like this (after the DOM injection):

var scripts = document.getElementById("rslt").getElementsByTagName("script");
for( var i=0; i<scripts.length; i++ ) {
    eval(scripts[i].innerText);
}

(p.s. eval is not evil)

本文标签： phpExecute javascript function on a page sent via AJAX responseStack Overflow