Display response(xml) by making a HTTP GET request using javascript?

Question

I have very new to JS and I have done my research but I guess I'm kind of using the wrong technique or something. Like in python to make GET request we do:

request_text = requests.get(url).text

I want to do the same thing but using JS i.e. display the content from "http://synd.cricbuzz.com/j2me/1.0/livematches.xml" in the raw(xml) format and I have found this script somewhere but it doesn't work.

<h2>AJAX</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>


<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "http://synd.cricbuzz.com/j2me/1.0/livematches.xml", false);
  xhttp.send();
}
</script>

</body>
</html>

I just need the direction on how to do the same i.e. how to send a GET/POST request using JS and render it on a webpage?

Due to the same origin policy for client-side script in the browser the XMLHttpRequest to a different origin than your server is only possible if the other server is set up for CORS. — Martin Honnen
– Martin Honnen, Commented Aug 21, 2016 at 16:19

Martin Honnen · Accepted Answer · 2016-08-21 17:51:29Z

When I use

function test(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url);
  req.onload = function() {
    var section = document.createElement('section');
    var h2 = document.createElement('h2');
    h2.textContent = 'Received from ' + url;
    section.appendChild(h2);
    var pre = document.createElement('pre');
    pre.textContent = req.responseText;
    section.appendChild(pre);
    document.body.appendChild(section);
  };
  req.onerror = function(evt) {
    document.body.insertAdjacentHTML('beforeEnd', '<p>Error requesting ' + url + '.<\/p>');
  };
  req.send();
}

document.addEventListener('DOMContentLoaded', function() {
  test('http://home.arcor.de/martin.honnen/cdtest/test2011060701.xml');
  test('http://synd.cricbuzz.com/j2me/1.0/livematches.xml');
},
false);

the first URL works as the server is set up to allow the CORS request for that directory while the second fails as the server does not allow it. So unless you serve your HTML with the script from synd.cricbuzz.com or unless you can change the configuration of synd.cricbuzz.com to allow a CORS request you won't be able to request the XML from that server.

Note also that in modern browsers (current versions of Mozilla, Chrome, Edge) you can use the Promise based fetch method instead of XMLHttpRequest, as shown below. But the same origin policy is not different for fetch, so the same as stated above holds.

function test(url) {
  fetch(url).then(function(response) {
    if(response.ok) {
      response.text().then(function(text) {
        var section = document.createElement('section');
        var h2 = document.createElement('h2');
        h2.textContent = 'Received from ' + url;
        section.appendChild(h2);
        var pre = document.createElement('pre');
        pre.textContent = text;
        section.appendChild(pre);
        document.body.appendChild(section);
      });
    }
    else {
      document.body.insertAdjacentHTML('beforeEnd', '<p>Error requesting ' + url + '; status: ' + response.status + '.<\/p>');
    }
  })
  .catch(function(error) {
    document.body.insertAdjacentHTML('beforeEnd', '<p>Error "' + error.message + '" requesting ' + url + '.<\/p>');
  });
}

document.addEventListener('DOMContentLoaded', function() {
  test('http://home.arcor.de/martin.honnen/cdtest/test2011060701.xml');
  test('http://synd.cricbuzz.com/j2me/1.0/livematches.xml');
},
false);

Collectives™ on Stack Overflow

Display response(xml) by making a HTTP GET request using javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related