Using JSONP when returning XML

Question

I asked an earlier question which was definitely helpful and let me know about JSONP. However, I see that I have to specify JSONP as the datatype. Now, as far as I know, that is the return type of the data coming back, which would be XML. Can XML be returned using JSONP or am I limited to it coming back as JSONP format? Thanks!

Answer 1

You're limited to JSONP (and not XML) because of how it works. JSONP turns into this:

<script src="myPage?callback=myFunction" type="text/javscript">

So when you take the content, it's effectively doing this:

<script type="text/javascript">
  myFunction({ data: value, data2: value2 });
</script>

What comes back is actual running JavaScript, so it can't be XML, you'll get all sorts of syntax errors, exactly as you would doing this:

<script type="text/javascript">
  <elem>
    <data>value</data>
    <data2>value2</data2>
  </elem>
</script>

As you can imagine, the JavaScript parser isn't going to like that very much, and doesn't know what to do with it. jQuery can parse XML in most cases without any trouble, but if you're using JSONP and it's for cross-domain requests...well JSONP is your only option there, unless you wrote a proxy page on your site that didn't violate same-origin policy rules, and used it as a proxy to fetch the XML through.

Answer 2

The idea is to send back executable code from the server. Write a jQuery plugin or extend the ajax function to return the XML string as a function parameter.

myCallback("
  <root>
    <person>
      <first>John</first>
      <last>Doe</last>
    </person>
  </root>")

The plugin will parse this string to XML and return it back to your actual callback. As far as your callback is concerned, it is unaware of the string -> xml conversion process.

Here's an existing implementation.

The most ideal interface to this with jQuery would be,

$.ajax({
    url: 'http://example.com/resource?type=xml',
    dataType: 'xmlp',
    success: function(xml) { .. }
});

but since messing around and rewriting jQuery.ajax is problematic, you could write this as a separate namespaced plugin itself which will use getScript underneath.

$.myNamespace.ajax({
    ..
});

For this to work, you would need control of the server. The server has to know that XML is requested, and respond with a function call which contains the XML string as a parameter. Assuming the callback name you sent over to the remote server was foo, the server will have to respond with something like:

foo("<names><name>..</name></names>")

I think if you were using a browser that supported E4X, then there would be no need to wrap the XML inside a string. The server could simply return the XML as an argument to the callback function:

foo(
  <names>
    <name>John Doe</name>
  </names>
)

But unfortunately, E4X is not widely supported yet.

Answer 3

You can write XML in Javascript function inside in /* comment */ and convert this function to text with method functionname.toString() and parsing text between "/*" and "*/" with JSONP's callback function, that works in all old browsers. Example xml_via_jsonp.js :

function myfunc()
{/*
<xml>
<div class="container">
        <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
            <div class="panel-heading">Random1 - Random2</div>
            <div class="panel-body">
                <div>Random3</div>
            </div>
        </div>
    </div>
</xml>
*/}

function callback(func)
{
var myhtml = func.toString();
var htmlstart = myhtml.indexOf('/*');
var htmlend = myhtml.lastIndexOf('*/');
return myhtml.substr(htmlstart+2, htmlend-htmlstart-2);
}