Render XML document (obtained through ajax call) t

问题:

Hi I'm looking for a way to render an XML document, that I retrieve using ajax, to a new browser window.

I am using JQuery's ajax() function to post JSON data to an MVC controller. The controller returns XML as a string.

I am using window.open() to create a new window in javascript and set the documents content by calling.

newwindow.document.clear();
newwindow.document.            
newwindow.document.write(jqXHR.responseText);
newwindow.document.close();

(Where jqXHR.responseText is the XML returned from the ajax() call.)

The new window opens as expected and if I view source on the page I see my XML. BUT (you knew one was coming) nothing appears in the browser window. Obviously if I save the page source to disk and open the output is rendered as expected.

Can anyone suggest a solution? Just to re-iterate my main goal is to render an XML document (obtained through ajax call) to a new window.

I should also add that I would like to see the output transformed by an XSLT. My XML has this processing instruction. Many Thanks

Edit--------------------------- THE SOLUTION I WENT WITH -------------------------

Thanks for everyone's comments and suggestions.

The solution that I ended up going with was to have a form with target="_blank" I then wrote the JSON to the form as a hidden field, and posted it to my controller which returned the XML (constructed from the JSON). When the XML was returned from the response the browser marked it up as expected. I guess this is not an answer to the original question. But Gabby has a solution below.

回答1:

The following will work only in FireFox and Opera, but i think is worth mentioning ..

window.open('data:text/xml,' + encodeURIComponent( jqXHR.responseText ) );

should work with chrome as well but it seems to treat window.open differently than a usual URL.. if you just type the resulting url in chrome it works there as well..

---

Update This works with all browsers !

The thing is that javascript has the ability to tranform xml using xslt.
But not automatically, so we need to find the XML file for the reference to the XSLT file and load that as well. Then we can do the transformation in javascript and pass the resulting html to the new window.

Naturally IE handles thing differently than the rest.

$.get('xml-file-here.xml',
   function(xmlData){
                  var xml = xmlData;

                  //extract the stylesheet so we can load it manually
                  var stylesheet;
                   for (var i=0;i<xml.childNodes.length;i++){
                       if ( xml.childNodes[i].nodeName =='xml-stylesheet' )
                       {
                        stylesheet = xml.childNodes[i].data;
                       }
                   }
                  var items = stylesheet.split('=');
                  var xsltFile = items[items.length-1].replace(/"/g,'');

                  //fetch xslt manually
                  $.get( xsltFile, function(xsltData){
                      var xslt = xsltData;
                      var transformed;

                      if (! window['XSLTProcessor'])
                        {
                            // Trasformation for IE
                            transformed = xml.transformNode(xslt);
                        }
                        else
                        {
                            // Transformation for non-IE
                            var processor = new XSLTProcessor();
                            processor.importStylesheet(xslt);
                            var xmldom = processor.transformToDocument(xml);
                            var serializer = new XMLSerializer();
                            var transformed = serializer.serializeToString(xmldom.documentElement);
                        }

                      var newwindow = window.open();
                      newwindow.document.open();
                      newwindow.document.write(transformed);
                      newwindow.document.close();
                  });
   });

回答2:

You have to set popup to be Content-type: text/xml and ofc start popup with <?xml version="1.0" encoding="UTF-8"?>

回答3:

You might lose a buzzword, but why dont you just open a window that points to the controller's URL?

回答4:

Write the XML into a textarea. Style the textarea using CSS.

回答5:

Browser renders html. IE and some others open the xml file with formatting, but that's not the default behaviour of browsers - so you should not rely on it. Better solution for me is to suggest to download file, and the user will decide whenever he wants to save the file or open it. But in case you don't want file download, than you have to generate html from your xml. That's the case when you should make some formatting, add css styles for it to be more user friendly and readable. And to achieve this, the best is to use Xsl Transformation to generate your output html from xml. That would be the most elegant way to generate html directly from xml. But in case you also don't want this, and you really dont care about user experience, you could use some text element (p, span, etc) and write xml not directly into new window, but in this element's text. That way your xml will be displayed as is