Javascript获取XMLHttpRequest的JSON结果

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

Answer 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

Answer 2

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

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