Javascript get JSON result of XMLHttpRequest

Question

I am trying to get the result of some XMLHttpRequest of Jenkins server

var oReq = new XMLHttpRequest();
var res = oReq.open("get", "http://" + IP + ":8080/job/Job1/lastBuild/api/json?depth=1", true);
oReq.send();

I am not getting the input to var res however, why is that?

EDIT

I tried one of the answers that were commented here and I am getting

No 'Access-Control-Allow-Origin' header is present on the requested resource.

What does it means?

Thanks

possible duplicate of [How to get the response of XMLHttpRequest?](http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest) — haim770, Jul 22 '15 at 13:04

num8er · Answer 1 · 2015-07-22T14:02:28.733

It's better to use jQuery's $.getJSON, $.ajax, $.get and etc.

But if You want native way (don't want to load external libraries or prefer native javascript and etc.) so try this:

// returns proper XMLHttpRequest object
    function getXmlHttp(){
      var xmlhttp;
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
          xmlhttp = false;
        }
      }
      if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
      }
      return xmlhttp;
    }

    // creates CORS Request object
    function createCORSRequest(method, url) {
      var xhr = getXmlHttp();
      if ("withCredentials" in xhr) {
        xhr.open(method, url, true);
      } else if (typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
      } else {
        xhr = null;
      }
      return xhr;
    }
    
    // does request and calls callback function and passes json data to callback function
    function getJson(url, callback) {
      var request = createCORSRequest('GET', url);
      if(!request) {
        console.log('Cannot create request');
        return false;
      }

      request.onload = function() {
        var data = JSON.parse(request.responseText);
        callback(data);
      };

      request.onerror = function() {
        console.log('Error happen');
      };

      request.send(null);
    }
    
    // usage
    //var url = "http://" + IP + ":8080/job/Job1/lastBuild/api/json?depth=1";
    var url = 'http://time.jsontest.com/?alloworigin=true';
    getJson(url, function(data) {
      alert(data.time);
      console.log(data);
    });

About CORS: http://www.html5rocks.com/en/tutorials/cors/

Also: there must be defined access rules about CORS in web server with IP that You're requesting.
read about it here: http://enable-cors.org/server_nginx.html , http://enable-cors.org/server_apache.html

also You can add custom headers in serverside application.
for example in PHP:

header('Access-Control-Allow-Origin: *');

in RoR: https://gist.github.com/dhoelzgen/cd7126b8652229d32eb4

getting 'No 'Access-Control-Allow-Origin' header is present on the requested resource.' — user829174, Jul 22 '15 at 13:12
getting Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function. — user829174, Jul 22 '15 at 13:20

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

1) Use jquery. It will help you with a lot of stuff!

$.getJSON( "http://" + IP + ":8080/job/Job1/lastBuild/api/json?depth=1", function( data ) {
    //data contains full parsed JavaScript object of json 
});

2) Access-Control-Allow-Origin allows the Browser to read informations from a other Origin, bur here is a better answer

edited May 23 '17 at 11:44

Community

1
1

answered Jul 22 '15 at 13:04

schnawel007

3,982
3
19
27

getting 'No 'Access-Control-Allow-Origin' header is present on the requested resource.' – user829174 Jul 22 '15 at 13:12

score 0 · Answer 3 · answered Jul 22 '15 at 13:04

open doesn't return anything, check the API reference on MDN. Since you're making an async request by sending the third argument as true, it's not going to finish immediately after send() either. I'd recommend reading this guide on how to use XMLHttpRequest.

score 0 · Answer 4 · answered Aug 04 '17 at 08:22

You can simply set xhr.responseType = 'json'; and response will be a JSON.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://echo.jsontest.com/insert-key-here/insert-value-here/key/value');
xhr.responseType = 'json';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log('response', this.response); // JSON response  
  }
};
xhr.send();

Javascript get JSON result of XMLHttpRequest

4 Answers4