www.webdeveloper.com
Results 1 to 9 of 9

Thread: XMLHttpRequest Script - Works for local XML files but not for external XML files

  1. #1
    Join Date
    Oct 2010
    Posts
    1

    XMLHttpRequest Script - Works for local XML files but not for external XML files

    I have the following JavaScript (see below). The script requests an XML file from the server and displays it on the page.

    The script works fine when the requested XML file is stored on the same server as the script.

    The problem is when I try requesting an XML file from an external server such as the National Weather Service. I get an error. If I take the XML file from the National Weather Service and save it to my server it works. Why can't I use my script to request XML files stored on external servers?

    Thanks in advance for any help.

    Javascript Code
    Code:
    window.onload = initAll;
    var xhr = false;
    
    function initAll() {
    document.getElementById("makeTextRequest").onclick = getNewFile;
    document.getElementById("makeXMLRequest").onclick = getNewFile;
    }
    
    function getNewFile() {
    makeRequest(this.href);
    return false;
    }
    
    function makeRequest(url) {
    if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
    }
    else {
    if (window.ActiveXObject) {
    try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) { }
    }
    }
    
    if (xhr) {
    xhr.onreadystatechange = showContents;
    xhr.open("GET", url, true);
    xhr.send(null);
    }
    else {
    document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
    }
    }
    
    function showContents() {
    if (xhr.readyState == 4) {
    if (xhr.status == 200) {
    if (xhr.responseXML && xhr.responseXML.contentType=="text/xml") {
    var outMsg = xhr.responseXML.getElementsByTagName("choices")[0].textContent;
    }
    else {
    var outMsg = xhr.responseText;
    }
    }
    else {
    var outMsg = "There was a problem with the request " + xhr.status;
    }
    document.getElementById("updateArea").innerHTML = outMsg;
    }
    }
    HTML Code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>My First Ajax Script</title>
    <script type="text/javascript" src="script01.js"></script>
    </head>
    <body>
    <p><a id="makeXMLRequest" href="http://www.weather.gov/xml/current_obs/KOJC.xml">Request an XML file</a></p>
    <div id="updateArea">&nbsp;</div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2010
    Posts
    213
    You must, of course, replace this:
    Code:
    <a id="makeXMLRequest" href="http://www.weather.gov/xml/current_obs/KOJC.xml">Request an XML file</a>
    with this:
    Code:
    <input type='button'; value='Request XML File'; onclick='makeRequest("http://www.weather.gov/xml/current_obs/KOJC.xml")';/>
    and in order to properly diagnose the problem, you should probably replace this:

    Code:
    var outMsg = "There was a problem with the request " + xhr.status;
    with this:

    Code:
    if (xhr.status == 0) {
    var outMsg = "Whew! You have just been protected from the dreaded cross-site-scripting ";
    } else {
    var outMsg = "There was a problem with the request " + xhr.status;
    }

  3. #3
    Join Date
    Feb 2010
    Posts
    184
    From jquery. Although you may not be using jquery it still applies.

    Additional Notes:
    1. Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
    2. Script and JSONP requests are not subject to the same origin policy restrictions.

    Source: http://api.jquery.com/jQuery.getJSON/

    You can also get around it by getting your server to request the page for you and then forwarding that back to the browser. The same origin policy is not breached in this situation.

  4. #4
    Join Date
    Apr 2010
    Posts
    213
    There's probably also a way to do it in an IFrame that's easier on the server... Food for thought.

  5. #5
    Join Date
    Feb 2010
    Posts
    184
    You can't access iframe dom if it is from another host.

  6. #6
    Join Date
    Apr 2010
    Posts
    213
    Have you tried with a redirect (not a proxy) on the server?

  7. #7
    Join Date
    Apr 2010
    Posts
    213
    Never mind... looks like they've sealed it off pretty well.

  8. #8
    Join Date
    Aug 2013
    Posts
    1

    how you saved the xml file in javascript

    How you saved the xml file from the different server. Could you please share the javascript code for it?





    Quote Originally Posted by candycane View Post
    I have the following JavaScript (see below). The script requests an XML file from the server and displays it on the page.

    The script works fine when the requested XML file is stored on the same server as the script.

    The problem is when I try requesting an XML file from an external server such as the National Weather Service. I get an error. If I take the XML file from the National Weather Service and save it to my server it works. Why can't I use my script to request XML files stored on external servers?

    Thanks in advance for any help.

    Javascript Code
    Code:
    window.onload = initAll;
    var xhr = false;
    
    function initAll() {
    document.getElementById("makeTextRequest").onclick = getNewFile;
    document.getElementById("makeXMLRequest").onclick = getNewFile;
    }
    
    function getNewFile() {
    makeRequest(this.href);
    return false;
    }
    
    function makeRequest(url) {
    if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
    }
    else {
    if (window.ActiveXObject) {
    try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) { }
    }
    }
    
    if (xhr) {
    xhr.onreadystatechange = showContents;
    xhr.open("GET", url, true);
    xhr.send(null);
    }
    else {
    document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
    }
    }
    
    function showContents() {
    if (xhr.readyState == 4) {
    if (xhr.status == 200) {
    if (xhr.responseXML && xhr.responseXML.contentType=="text/xml") {
    var outMsg = xhr.responseXML.getElementsByTagName("choices")[0].textContent;
    }
    else {
    var outMsg = xhr.responseText;
    }
    }
    else {
    var outMsg = "There was a problem with the request " + xhr.status;
    }
    document.getElementById("updateArea").innerHTML = outMsg;
    }
    }
    HTML Code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>My First Ajax Script</title>
    <script type="text/javascript" src="script01.js"></script>
    </head>
    <body>
    <p><a id="makeXMLRequest" href="http://www.weather.gov/xml/current_obs/KOJC.xml">Request an XML file</a></p>
    <div id="updateArea">&nbsp;</div>
    </body>
    </html>

  9. #9
    Join Date
    Apr 2010
    Posts
    213

    It has become more difficult over the past few years

    Quote Originally Posted by Sekhon View Post
    How you saved the xml file from the different server. Could you please share the javascript code for it?
    Browsers have become increasingly resistant to cross-site-scripting over the years, and it is now extremely difficult to achieve it. Those who manage to accomplish the feat are likely to find that their methods will stop working when someone in browser development discovers them and browsers become hardened against them.

    That said, the best way, in fact probably the only way to import data from another site is to put a proxy on your server and request it with that. Doing this involves the javascript shown above in the browser code, and some PHP or Python code on the server.

    Here's an article that should prove helpful to you. Good luck .

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles