L'appel d'une fonction JavaScript retourné à partir d'une réponse Ajax

J'ai un système où j'ai envoyer une requête Ajax commande, qui renvoie un bloc de script avec une fonction en elle. Après ces données est correctement inséré dans le DIV, je veux être en mesure d'appeler cette fonction pour effectuer les actions requises.

Est-ce possible?

InformationsquelleAutor williamtroup | 2009-02-04

72

Je pense que pour interpréter correctement à votre question sous cette forme: "OK, j'ai déjà fait avec de l'Ajax choses; je souhaite juste savoir si la fonction JavaScript de mon Ajax rappel inséré dans le DIV est dénonçable à tout moment à partir de ce moment, qui est, je ne veux pas l'appeler contextuellement à la fonction de rappel de retour".

OK, si tu veux dire quelque chose comme cela, la réponse est oui, vous pouvez appeler votre nouveau code en ce moment, à n'importe quel moment pendant la page de la persistance dans le navigateur, dans les conditions suivantes:

1) l'option JavaScript de Votre code renvoyé par Ajax fonction de rappel doit être syntaxiquement CORRECTE;

2) Même si votre déclaration de fonction est insérée dans un <script> bloc à l'intérieur d'un <div> élément, le navigateur ne sais pas la nouvelle fonction existe, comme le code de déclaration n'a jamais été exécuté. Ainsi, vous devez vous eval() votre déclaration code renvoyé par l'Ajax de rappel, afin de bien déclarer votre nouvelle fonction et qu'il soit disponible pendant toute la page, de la durée de vie.

Même si tout à fait factice, ce code explique l'idée:
```
<html>
    <body>
        <div id="div1">
        </div>
        <div id="div2">
            <input type="button" value="Go!" onclick="go()" />
        </div>
        <script type="text/javascript">
            var newsc = '<script id="sc1" type="text/javascript">function go() { alert("GO!") }<\/script>';
            var e = document.getElementById('div1');
            e.innerHTML = newsc;
            eval(document.getElementById('sc1').innerHTML);
        </script>
    </body>
</html>
```
Je n'ai pas utiliser Ajax, mais le concept est le même (même si l'exemple que j'ai choisi n'est pas très intelligent 🙂

De façon générale, je ne remets pas en cause votre conception de la solution, c'est à dire s'il est plus ou moins approprié à extérioriser + généraliser la fonction dans un autre .fichier js et autres, mais veuillez prendre note qu'une telle solution pourrait soulever plus de problèmes, surtout si votre Ajax invocations de répétition, c'est à dire si le cadre de la même fonction, doit changer ou, dans le cas de la fonction déclarée persistance doit être concerné, donc peut-être que vous devriez sérieusement envisager de changer votre conception de l'un de ces exemples dans ce fil.

Enfin, si j'ai mal compris votre question, et vous parlez contextuelle invocation de la fonction lors de votre Ajax callback retourne, puis mon sentiment est de proposer le Prototype approche décrit par krosenvold, comme il est cross-browser, testé et entièrement fonctionnel, et cela peut vous donner une meilleure feuille de route pour les futures implémentations.
- Cela fonctionne dans l'exemple parce que tout est dans la même page et le calendrier n'est pas venu en jouer. Il ne fonctionne pas avec quoi que ce soit qui utilise AJAX méthodologies d'appeler des fichiers externes pour le traitement parce que la fonction eval() s'exécute avant le processus externe a tout moment pour revenir avec une réponse.
- Superbe réponse vraiment économiser mon temps. Que dieu vous bénisse.
- Les risques de sécurité de l'utilisation de la fonction eval() ici?
- Je pense que le consensus général est que la fonction eval() a toujours des risques de sécurité associés avec elle, je serais être conscient de si, et comment il est utilisé. Personnellement, je ne voudrais pas l'utiliser en conjonction avec l'AJAX pour éviter l'ouverture de toutes les failles XSS. Dans la plupart des cas, si j'ai besoin d'une fonction à exécuter à partir d'un AJAX retour, je voudrais juste passer les arguments en arrière à la place et laisser la viande de la fonction de résidence et d'exécuter à partir de la page appelant à la place (ou quelque chose de similaire).
InformationsquelleAutor Federico Zancan
42

Note: eval() peut être facilement détourné, disons que la requête est interceptée par un tiers et vous envoie pas le code de confiance. Puis avec la fonction eval (), vous devriez être en cours d'exécution-ce pas le code de confiance. Reportez-vous ici pour la les dangers de la fonction eval().

À l'intérieur de l'retourné HTML/Ajax/JavaScript fichier, vous aurez une balise JavaScript. Donner un ID, comme runscript. Il est rare d'ajouter un id à ces balises, mais il est nécessaire de faire référence spécifiquement.
```
<script type="text/javascript" id="runscript">
    alert("running from main");
</script>
```
Dans la fenêtre principale, puis d'appeler la fonction eval en évaluant seulement que le NOUVEAU bloc de code JavaScript (dans ce cas, il est appelé runscript):
```
eval(document.getElementById("runscript").innerHTML);
```
Et ça marche, au moins dans Internet Explorer 9 et Google Chrome.
- +1 C'est de la magie! je vous remercie beaucoup.
- Incroyable, été à essayer de comprendre ce pendant un certain temps +1
- J'ai essayé de résoudre ce pendant des heures et viens de tomber sur cette réponse! C'est impressionnant et devrait probablement être accepté! Merci, +1 🙂
- Est-il un trou de sécurité dans la mise en œuvre de cette solution?
- Toujours d'actualité en 2018: Cela semble dangereusement comme la "Sécurité par l'obscurité". Si j'étais en train d'attaquer votre site et a remarqué que la fonction eval (), alors je serais sûrement remarqué l'ID de la balise là et modifier mon attaque pour insérer le malicios code à l'intérieur de votre <script id="my-secure-id"> tag. Je ne vois pas de sécurité supplémentaire en utilisant cette solution. En fait, il ne vous donne que le faux sentiment de sécurité, ce qui est encore plus dangereux. Mais 6 ans plus tard, le HTTPS est maintenant beaucoup plus courant. Je crois qu'une attaque sur la fonction eval() ne devrait pas être possible sécurisée via HTTPS. Je me trompe en supposant que?
InformationsquelleAutor Dandymon
9

Il est tout à fait possible, et il y en a même assez légitime en cas d'utilisation de ce. À l'aide de la Prototype cadre, il est fait comme suit.
```
new Ajax.Updater('items', '/items.url', {
    parameters: { evalJS: true}
});
```
Voir la documentation de l'Ajax programme de mise à jour. Les options sont dans le commune des options de jeu. Comme d'habitude, il y a quelques mises en garde à propos de lorsque "cela" points de, afin de lire les petits caractères.

Le code JavaScript sera évalué lors du chargement. Si le contenu contient la fonction myFunc(),
on pourrait juste dire myFunc() par la suite. Peut-être comme suit.
```
if (window["myFunc"])
   myFunc()
```
Celui-ci vérifie si la fonction existe. Peut-être que quelqu'un a une meilleure manière de croix-navigateur de faire ce qui fonctionne dans Internet Explorer 6.
- Cela devrait fonctionner dans tous les navigateurs: if (myFunc) myFunc()
- C'est aweome! Merci! J'ai toujours utilisé le "onSuccess" la fonction de la mise à jour de eval le Javascript manuellement. Mais c'est plus lisible et fonctionne dans tous les navigateurs.
InformationsquelleAutor krosenvold
6

Qui semble plutôt étrange conception de votre code, il fait généralement plus de sens d'avoir de vos fonctions appelées directement à partir d'un .js fichiers, et ensuite seulement de récupérer des données avec l'appel Ajax.

Cependant, je crois qu'il devrait travailler en appelant eval() sur la réponse fournie, il est syntaxiquement correct du code JavaScript.

InformationsquelleAutor DanSingerman
5

Avec jQuery, je le ferais à l'aide de getScript

InformationsquelleAutor kgiannakakis
3

Rappelez-vous juste, si vous créez une fonction de la façon ci-dessous par le biais de l'ajax...
```
function foo()
{
    console.log('foo');
}
```
...et de l'exécuter via eval, vous aurez probablement un contexte de problème.
Prenez ce que votre fonction de rappel:
```
function callback(result)
{
    responseDiv = document.getElementById('responseDiv');
    responseDiv.innerHTML = result;
    scripts = responseDiv.getElementsByTagName('script');
    eval(scripts[0]);
}
```
Vous serez la déclaration d'une fonction à l'intérieur d'une fonction, de sorte que cette nouvelle fonction sera accessible uniquement sur cette portée.

Si vous souhaitez créer une fonction globale dans ce scénario, vous pouvez déclarer cette façon:
```
window.foo = function ()
{
    console.log('foo');
};
```
Mais, je pense aussi que vous ne devriez pas faire ça...

Désolé pour toute erreur ici...

InformationsquelleAutor Daniel Hartmann
3

Je voudrais ajouter qu'il y a une fonction eval en jQuery vous permettant de eval le code à l'échelle mondiale qui devrait vous permettre de vous débarrasser de toutes les contextuelle des problèmes. La fonction est appelée globalEval() et il a travaillé beaucoup pour mes fins. Sa documentation peut être trouvée ici.

C'est l'exemple de code fourni par le jQuery documentation de l'API:
```
function test()
{
  jQuery.globalEval("var newVar = true;")
}

test();
//newVar === true
```
Cette fonction est extrêmement utile quand il s'agit de chargement de scripts externes de façon dynamique qui vous ont apparemment été d'essayer de faire.

InformationsquelleAutor beta
2

Une liste de contrôle pour faire une telle chose:
1. le retour de l'Ajax réponse est eval(ed).
2. les fonctions sont déclarées dans le formulaire func_name = function() {...}
Mieux encore, l'utilisation des cadres qui les manipule comme dans Prototype. Vous avez Ajax.updater.

InformationsquelleAutor Nasaralla

PHP code côté
Nom de fichier class.sendCode.php

<?php
class  sendCode{ 

function __construct($dateini,$datefin) {

            echo $this->printCode($dateini,$datefin);
        }

    function printCode($dateini,$datefin){

        $code =" alert ('code Coming from AJAX {$this->dateini} and {$this->datefin}');";
//Insert all the code you want to execute, 
//only javascript or Jquery code , dont incluce <script> tags
            return $code ;
    }
}
new sendCode($_POST['dateini'],$_POST['datefin']);

Maintenant à partir de votre page Html, vous devez déclencher la fonction ajax pour envoyer les données.

....  <script src="http://code.jquery.com/jquery-1.9.1.js"></script> ....
Date begin: <input type="text" id="startdate"><br>
Date end : <input type="text" id="enddate"><br>
<input type="button" value="validate'" onclick="triggerAjax()"/>

Maintenant à notre local script.js nous allons définir l'ajax

function triggerAjax() {
    $.ajax({
            type: "POST",
            url: 'class.sendCode.php',
            dataType: "HTML",
            data : {

                dateini : $('#startdate').val(),
                datefin : $('#enddate').val()},

                  success: function(data){
                      $.globalEval(data);
//here is where the magic is made by executing the data that comes from
//the php class.  That is our javascript code to be executed
                  }


        });
}

InformationsquelleAutor Sultanos

1

Ce n'est pas une bonne idée.

Vous devriez abstraction de la fonction à inclure dans le reste de votre code JavaScript à partir des données retournées par les méthodes Ajax.

Pour ce que ça vaut, cependant, (et je ne comprends pas pourquoi vous êtes l'insertion d'un bloc de script dans un div?) même script en ligne méthodes écrites dans un bloc de script sera accessible.

InformationsquelleAutor annakata

Mon habitude ajax qui appelle la fonction:

function xhr_new(targetId, url, busyMsg, finishCB)
{
    var xhr;

    if(busyMsg !== undefined)
        document.getElementById(targetId).innerHTML = busyMsg;

    try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
    catch(e)
    {
        try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
        catch(e2)
        {
            try { xhr = new XMLHttpRequest(); }
            catch(e3) { xhr = false; }
        }
    }

    xhr.onreadystatechange = function()
    {
        if(xhr.readyState == 4)
        {
            if(xhr.status == 200)
            {
                var target = document.getElementById(targetId)
                target.innerHTML = xhr.responseText;
                var scriptElements = target.getElementsByTagName("script");
                var i;
                for(i = 0; i < scriptElements.length; i++)
                    eval(scriptElements[i].innerHTML);
                if(finishCB !== undefined)
                    finishCB();
            }
            else
                document.getElementById(targetId).innerHTML = 'Error code: ' + xhr.status;
        }
    };

    xhr.open('GET', url, true);
    xhr.send(null);
    //return xhr;
}

Quelques explications:

targetId est un (généralement div) ID de l'élément où l'ajax résultat de l'appel de texte va.

url ajax est l'appel de l'url.

busyMsg sera temporaire de texte dans l'élément cible.

finishCB sera appelée lorsque l'ajax opération terminée avec succès.

Comme vous le voyez dans le xhr.onreadystatechange = function() {...} tous les <script> éléments seront collectées à partir de la réponse ajax et seront exécutés un par un. Il semble fonctionner très bien pour moi. Les deux dernier paramètre est facultatif.

InformationsquelleAutor Ray

0

Je l'ai testé et ça marche. Quel est le problème? Il suffit de mettre la nouvelle fonction à l'intérieur de votre élément javascript et ensuite l'appeler. Il va travailler.

InformationsquelleAutor
0

J'ai essayé toutes les techniques proposées ici, mais enfin, la voie qui a travaillé était simplement pour mettre la fonction JavaScript à l'intérieur de la page /fichier où il est censé se produire et l'appeler à partir de la réponse de la partie de l'Ajax simplement comme une fonction:
```
...
}, function(data) {
    afterOrder();
}
```
Cette Travaillé sur la première tentative, j'ai donc décidé de partager.

InformationsquelleAutor Sagive SEO

Ce code de travail ainsi, au lieu eval le html, je vais ajouter le script à la tête

function RunJS(objID) {
//alert(http_request.responseText);
var c="";
var ob = document.getElementById(objID).getElementsByTagName("script");
for (var i=0; i < ob.length - 1; i++) {
    if (ob[i + 1].text != null) 
       c+=ob[i + 1].text;
}
var s = document.createElement("script");
s.type = "text/javascript";
s.text = c;
document.getElementsByTagName("head")[0].appendChild(s);
}

InformationsquelleAutor user2054758

0

J'ai résolu ce problème aujourd'hui, en mettant mon code JavaScript au bas de la réponse HTML.

J'ai eu une requête AJAX qui a renvoyé un tas de code HTML qui est affiché dans une superposition. J'avais besoin de joindre un événement click d'un bouton dans la réponse renvoyée HTML/overlay. Sur une page normale, je tourne mon JavaScript dans une "fenêtre.onload" ou "$(document).prêt" de sorte qu'il serait de fixer le gestionnaire d'événement à l'objet DOM après le DOM pour le nouveau revêtement a été rendue, mais parce que c'était une réponse AJAX et pas un nouveau chargement de la page, que l'événement n'est jamais arrivé, le navigateur jamais exécuté mon JavaScript, mon gestionnaire d'événement ne l'ai jamais attaché à l'élément DOM, et mon nouveau morceau de fonctionnalité ne fonctionne pas. Encore une fois, j'ai résolu mon "en cours d'exécution de JavaScript dans un AJAX réponse problème" ne pas utiliser "$(document).ready" dans l'en-tête du document, mais en plaçant mon JavaScript à la fin du document et de l'avoir à courir après le HTML/DOM avait été rendu.

InformationsquelleAutor Andrew Koper

Si votre script AJAX prend que quelques millisecondes pour exécuter, la fonction eval() fonctionnera toujours de l'avant et d'évaluer le vide d'un élément de réponse avant AJAX remplit avec le script que vous essayez d'exécuter.

Plutôt que de cacher les mains autour du cadencement et de la fonction eval(), voici une jolie solution simple qui devrait fonctionner dans la plupart des situations et est probablement un peu plus sécurisé. À l'aide de la fonction eval() est généralement mal vu car les caractères de l'être évalué que le code peut facilement être manipulé côté client.

Concept

Inclure votre fonction javascript dans la page principale. Écrire de telle sorte que les éléments dynamiques peuvent être acceptés en tant qu'arguments.
Dans votre fichier AJAX, appeler la fonction à l'aide d'un officiel d'événements DOM (onclick, onfocus, onblur, onload, etc.) Selon ce que les autres éléments sont dans votre réponse, vous pouvez obtenir assez habile, rendant transparente. Passer vos éléments dynamiques en tant qu'arguments.
Lors de votre élément de réponse se rempli et se déroule la manifestation, la fonction s'exécute.

Exemple

Dans cet exemple, je veux joindre une dynamique à partir de la liste de saisie semi-jquery-ui bibliothèque AJAX élément APRÈS l'élément a été ajouté à la page. Facile, droit?

start.php

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<!-- these libraries are for the autocomplete() function -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
<!--
//this is the ajax call
function editDemoText(ElementID,initialValue) {
try { ajaxRequest = new XMLHttpRequest();
} catch (e) {
try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
return false;
}}}
ajaxRequest.onreadystatechange = function() {
if ( ajaxRequest.readyState == 4 ) {
var ajaxDisplay = document.getElementById('responseDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var queryString = "?ElementID="+ElementID+"&initialValue="+initialValue;
ajaxRequest.open("GET", "ajaxRequest.php"+queryString, true);
ajaxRequest.send(null);
}
//this is the function we wanted to call in AJAX, 
//but we put it here instead with an argument (ElementID)
function AttachAutocomplete(ElementID) {
//this list is static, but can easily be pulled in from 
//a database using PHP. That would look something like this:
/*
* $list = "";
* $r = mysqli_query($mysqli_link, "SELECT element FROM table");
* while ( $row = mysqli_fetch_array($r) ) {
*    $list .= "\".str_replace('"','\"',$row['element'])."\",";
*    }
* $list = rtrim($list,",");
*/
var availableIDs = ["Demo1","Demo2","Demo3","Demo4"];
$("#"+ElementID).autocomplete({ source: availableIDs });
}
//-->
</script>
</head>
<body>
<!-- this is where the AJAX response sneaks in after DOM is loaded -->
<!-- we're using an onclick event to trigger the initial AJAX call -->
<div id="responseDiv"><a href="javascript:void(0);" onclick="editDemoText('EditableText','I am editable!');">I am editable!</a></div>
</body>
</html>

ajaxRequest.php

<?php
//for this application, onfocus works well because we wouldn't really 
//need the autocomplete populated until the user begins typing
echo "<input type=\"text\" id=\"".$_GET['ElementID']."\" onfocus=\"AttachAutocomplete('".$_GET['ElementID']."');\" value=\"".$_GET['initialValue']."\" />\n";
?>

InformationsquelleAutor Typel

-1

Federico Zancan réponse est correct, mais vous n'avez pas à donner votre script d'un IDENTIFIANT et d'eval tous de votre script. Juste eval votre nom de la fonction et il peut être appelé.

Pour atteindre cet objectif dans notre projet, nous avons écrit un proxy de la fonction à appeler la fonction renvoyée à l'intérieur de l'Ajax réponse.
```
function FunctionProxy(functionName){
var func = eval(functionName);
func();
}
```
InformationsquelleAutor Hüseyin Yağlı

Vous devez vous connecter pour publier un commentaire.