Question

I am making a simple javascript application where I need to load an xml files and show them in front of the user. but my code only works in Mozilla Firefox but when it comes to chrome and Internet Explorer they are not working. I am loading my XML document in a local machine.

$(document).ready(function() {
    $('.buttons').slideToggle('medium');

    $.ajax({ 
    url: "dictionary.xml", 
    success: function( xml ) { 
        $(xml).find("word").each(function(){ 
            $("ul").append("<li>" + $(this).text() + "</li>");
        }); 
   } 
    });
}

And Here’s my XML

 <?xml version="1.0" encoding="UTF-8"?> 
  <xml> 

    <word> 
      <threeletter>RIP</threeletter> 
      <fourletter>PIER</fourletter>
      <fiveletter>SPIRE</fiveletter> 
      <sixletter>SPIDER</sixletter> 
     </word>

     <word> 
      <threeletter>SUE</threeletter> 
      <fourletter>EMUS</fourletter>
      <fiveletter>SERUM</fiveletter> 
      <sixletter>RESUME</sixletter> 
     </word>

     <word> 
      <threeletter>COO</threeletter> 
      <fourletter>CON</fourletter>
      <fiveletter>CONDO</fiveletter> 
      <sixletter>CONDOM</sixletter> 
     </word>

    </xml>

I found the error, here it is

XMLHttpRequest cannot load file:///C:/Users/John/Desktop/JsTwist/dictionary.xml. Origin null is not allowed by Access-Control-Allow-Origin.

Answer 1

Google Chrome doesn’t allow AJAX requests over the file:// protocol by default.

You’ll need to start Chrome with the --allow-file-access switch.

Here are instructions for supplying switches on each OS.

I’m not sure how to enable the file protocol for IE.

Possibly the easiest thing to do is to setup a local web server and run your app along with the xml files in it, then you don’t have to worry about this issue in either browser.

edit

Late edit, I know. I wanted to throw this out there in case others have an issue.

When requesting an xml document with jQuery, you should always supply a dataType in the settings object. Internally, jQuery does it’s best to guess at what is returned and I’ve had it consider a perfectly good xml document to be HTML/XHTML.

To do this, add dataType: “xml”. For example:

$(document).ready(function() {
    $('.buttons').slideToggle('medium');

    $.ajax({ 
        url: "dictionary.xml", 
        success: function( xml ) { 
            $(xml).find("word").each(function(){ 
                $("ul").append("<li>" + $(this).text() + "</li>");
            }); 
        },
        dataType: "xml"
    });
}

Supported data types are available on the documentation page for jQuery.ajax().

In addition, I’ve encountered the Access-Control-Allow-Origin error above when trying to fetch an RSS feed from a remote server. The only way I’ve determined to get around this is to proxy request the RSS feed from the server-side code and deliver it via some proxy script. Here’s a simple example in PHP:

<?php

 if(isset($_GET['q']) && isAjax())
 {
    $q = strip_tags($_GET['q']);
    header("Status: 200");
    header("Content-type: text/xml");
    echo  file_get_contents('http://'.$q);   
    exit();
 }

function isAjax() {
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
    ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
}

?>

CAVEAT I highly recommend modifying the above script to allow only those locations you plan to serve to your client code by validating q or by further restricting the isAjax function. I’m not a PHP developer and I don’t pretend to know best practices for PHP security. If anyone has suggestions to improve the PHP snippet, I’d happily apply them.