Fehler auf AJAX Anruf mit wikipedia API

Question

tatsächlich arbeiten auf einer FCC-Herausforderung, ich muss einen AJAX Aufruf an die Wikimedia API machen, aber ich habe damit zu kämpfen.

Zuerst suchte und fand ich, dass ich einen personalisierten Anfrage-Header setzen musste, aber mein Problem bleibt gleich, die Anfrage scheint nicht zu senden, weil mein eventListener auf "laden" nicht aktiviert ist, wenn Sie eine Anfrage stellen. Ich habe meine URL überprüft und es funktioniert gut in meinem Browser. Danke für Ihre Hilfe, und hier ist mein Code:

// ================ AJAX GENERIC FUNCTION ============================= 
function ajaxGet(url, callback) { 
    let req = new XMLHttpRequest(); 
    req.open("GET", url); 
    req.setRequestHeader('Api-User-Agent', 'Wiki Viewer'); 
    req.addEventListener("load", function() { 
     if (req.status >= 200 && req.status < 400) { 
      // Call the callback function and pass it the response 
      callback(req.responseText); 
     } else { 
      console.error(req.status + " " + req.statusText + " " + url); 
     } 
    }); 
    req.addEventListener("error", function() { 
     console.error("Erreur réseau avec l'URL " + url); 
    }); 
    req.send(null); 
} 
// ================ FUNCTION(S) ============================= 

function displayResult() { 
let urlToSearch = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput.value; 
    ajaxGet(urlToSearch, function (response) { 
    console.log(response); 
    }); 
} 

// ================ GLOBAL VARIABLES ============================= 
let searchBtn = document.getElementById("searchBtn"); 
let searchInput = document.getElementById("searchInput"); 

// ================ EVENT LISTENNER ============================= 

searchBtn.addEventListener("click", displayResult); 

Answer 1

Versuchen onreadystatechange statt addEventListener

Beispielcode:

req.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     callback(this.responseText); 
    } 
}; 

.readyState statusses:

• 0:
• 2 etablierte Server-Verbindung:: Anfrage
• 3 erhalten: Anfrage wird bearbeitet:
• 1 nicht
initialisiert anfordern fertig Anforderung und Antwort bereit ist,

Nachdem Sie Ihren Kommentar, ich habe deinen Code ausprobiert, um zu sehen, was das Problem ist. Es scheint, dass du WikiPedia noch weitere Parameter geben musst. Siehe die URL: https://www.mediawiki.org/wiki/API:Cross-site_requests

Fügen Sie die URL &origin=* hinzu und es wird funktionieren.

Beispiel des Codes läuft: https://jsfiddle.net/cyctreb4/