6

XML responses from my webapp have both HTML to add to the page AND some have a script to run.

I'm trying to send back XML from my webapp like:

<?xml version="1.0"?>
<doc>
  <html-to-insert>
    <![CDATA[<p>add me to the page</p>]]>
  </html-to-insert>
  <script>
    <![CDATA[ alert('execute me'); ]]>
  </script>
</doc>

What I'm doing now is snapping out the <html-to-insert> and <script> CDATA, inserting the html into the page and eval'ing <script>.

I'm looking for criticism on my approach. Any suggestions from anyone?

j0k
  • 22,600
  • 28
  • 79
  • 90
bobobobo
  • 64,917
  • 62
  • 258
  • 363

5 Answers5

10

You can use the jQuery library to make the XML request to your backend and also parse it

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "your/url/that/returns/xml",
    dataType: "xml",
    success: function (xml) {
      // xml contains the returned xml from the backend

      $("body").append($(xml).find("html-to-insert").eq(0));
      eval($(xml).find("script").text());
    }
  });
});

You can find out more about jQuery here and here

I haven't tested it, but it should work according to this article.

Cristian Toma
  • 5,662
  • 2
  • 36
  • 43
4

This is the best answer that i found. Work perfect:

element.innerHTML = xmlhttp.responseText;
var scriptElements = element.getElementsByTagName('SCRIPT');
for (i = 0; i < scriptElements.length; i ++) {
    var scriptElement = document.createElement('SCRIPT');
    scriptElement.type = 'text/javascript';
    if (!scriptElements[i].src) {
        scriptElement.innerHTML = scriptElements[i].innerHTML;
    } else {
        scriptElement.src = scriptElements[i].src;
    }
    document.head.appendChild(scriptElement);
}

Thanks to Joseph the Dreamer. Original answer here.

EDIT:

Clarification:

  1. scripts only run inside script tag
  2. added scripts after document load, only take effect if it is added to the head tag

Thanks to Deniz Porsuk for the comment to improve the answer

Community
  • 1
  • 1
IgniteCoders
  • 4,834
  • 3
  • 44
  • 62
  • If you appendChild your scripts inside div tags. They will not be executed by browser. Scripts should be appended with "script" tag. – Deniz Porsuk Apr 30 '15 at 09:07
  • Which divs are you talking about? I use script tag `var scriptElement = document.createElement('SCRIPT');`. Explain your comment please. – IgniteCoders Jun 08 '15 at 15:05
  • Yes this is true way. But if you create your script inside div like var divElement = document.createElement('div'); and push innerHTML from scriptElement = document.createElement('SCRIPT'); divElement.innerHTML = scriptElement; script will not be executed by browser. – Deniz Porsuk Jun 09 '15 at 07:40
  • I still don't understand why you mention div element if that does not appear in the answer. – IgniteCoders Jun 09 '15 at 10:11
  • 2
    Because I did this mistake, lost hours. And I do not want someone else to lost hours. – Deniz Porsuk Jun 10 '15 at 11:06
3

You'd rather send JSON, it's way easier to interpret. Example:

// Suppose your response is a string:
// { html: "<p>add me to the page</p>, script:"alert('execute me');" }
var obj = eval( "(" + response + ")" ) ;
eval( obj.script ) ;
St.Woland
  • 5,357
  • 30
  • 30
0

JSON would be better suited for this purpose than XML imho.

code_burgar
  • 12,025
  • 4
  • 35
  • 53
0

If you output your ajax request response as $target.html(response); scripts will be evaluated by browser with no additional moves from your side.

Nick Kovalsky
  • 5,378
  • 2
  • 23
  • 50
  • Good answer if you're using jQuery as this simplifies your code, although for me personally I'm trying to remove jQuery from my code, and `.innerHTML` doesn't eval the scripts, while jQuery's `.html()` method does, so I need to eval it manually and I can't find the source jQuery code for `.html()` in their repo. – Justin Mar 01 '23 at 22:39