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

• haim770: possible duplicate of How to get the response of XMLHttpRequest?
• epascarello: Read the documentation on the XMLHttpRequest object.

Answer 1

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

• user829174: getting 'No 'Access-Control-Allow-Origin' header is present on the requested resource.'
• user829174: getting Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
• num8er: what browser? and have You tried again after my update?
• user829174: does it matter if I run in from localhost as debug?

Answer 2

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

• user829174: getting 'No 'Access-Control-Allow-Origin' header is present on the requested resource.'

Answer 3

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.

Answer 4

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();