CORS API Test

by Adrian Prado

HTML

<div id="tab">
</div>
<div id="element">
</div>
<div id="power">
</div>
<div id="tbo">

</div>

JavaScript

window.onload = function(){
	var nome = 'batman';
 	var table =document.getElementById("tab");
 	var element = document.getElementById('element');
 	var power = document.getElementById('power');
	var tbody = document.getElementById("tbo");
	

  var request = new XMLHttpRequest();
  
request.open('GET', 'https://www.superheroapi.com/api.php/2195914800646269/search/' + nome , true);
request.onload = function () {
// Vary= Origin;


  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
  	
   tbody.innerHTML="";
    
  	element.innerHTML +="<h2>resultados para " +nome+"</h2>";
  	power.innerHTML +="Resultados para " +nome;

	

  try {
        for(var i=0; i<=data.results.length; i++){
          tbody.innerHTML += "<tr><td> <center><img src=" +data.results[i].image.url + " class='imgherois'></center>" +
           "<tr><td>"+"Nome: " +data.results[i].name +    
           "<tr><td>"+ "Nome Real: " +data.results[i].biography["full-name"] +   
           "<tr><td>"+ "Alter-Ego: " +data.results[i].biography["alter-egos"] +   
           "<tr><td>"+ "Aliados: " +data.results[i].biography.aliases +   
           "<tr><td>"+ "Naturalidade: " +data.results[i].biography["place-of-birth"] +   
           "<tr><td>"+ "Apareceu pela primeira vez em: " +data.results[i].biography["first-appearance"] +   
           "<tr><td>"+ "Universo: " +data.results[i].biography.publisher +   
           "<tr><td>"+"Do Bem ou do Mau: " +data.results[i].biography.alignment+    
           "<tr><td>"+"Inteligencia: " + "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.intelligence+"%>"+data.results[i].powerstats.intelligence+"</div></div>"+ 
           "<tr><td>"+"Força: "+ "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.strength+"%>"+data.results[i].powerstats.strength+"</div></div>"+ 
           "<tr><td>"+"Velocidade: "+ "<div class='porcentagem...