I've tried to send GET request to a multiple hosts and to render the response status in separated foe each host. The code below it works fine for xhttp request but in case of jsonp data type (to avoid of Access-Control-Allow-Headers errors) I need to use another json type to send the request and can't use the regular function. In the code below it using ajax request and I didn't manage to use the responseHandler function to render the response status. Please your help how to correct this code.
var hosts = ['http://www.bla.com:8082/bla','http://www.bla2.com:8082/bla','http://www.bla3.com:8082/bla', 'http://www.bla4.com:8082/bla']; //Added
var ledTypes = {
green: "<img id='logo' src='green.png' height='30' width='30'>",
red: "<img id='logo' src='red.png' height='30' width='30'>",
yellow: "<img id='logo' src='yellow.png' height='30' width='30'>"
};
var hostIndx = 0;
function collectionChecking() {
for (hostIndx < hosts.length; hostIndx++;) {
$.ajax({
url: hosts[hostIndx],
dataType: "jsonp",
jsonpCallback: "_stdout",
cache: false,
crossDomain: true,
timeout: 10000,
success: handleLedResponse(data, textStatus, jqXHR, hostIndx) { alert(data); },
error: handleLedResponse(jqXHR, textStatus, errorThrown, hostIndx) { alert(errorThrown); }
})
}
}
function handleLedResponse(textStatus, hostIndx) {
var curSpan = document.getElementById('col_host_' + hostIndx);
if (textStatus === 200 || textStatus === 204) {
curSpan.innerHTML = ledTypes.green;
} else if (textStatus === 500 || textStatus === 404) {
curSpan.innerHTML = ledTypes.red;
} else if (textStatus === 300 || textStatus === 301 || textStatus === 302) {
curSpan.innerHTML = ledTypes.yellow;
}
The trigger to run this script:
<li><a href="#tabs-2" onclick="collectionChecking()">Services status</a></li>
The response are rendered to the index.html as well