javascript - 使用维基百科 API 进行 AJAX get 调用时出错

Question

实际上，我正在参与 FCC 挑战赛，我需要对 wikimedia API 进行 get AJAX 调用，但我正在努力解决这个问题。

我首先搜索并发现我需要放置一个个性化的请求 header ，但我的问题仍然相同，请求似乎没有发送，因为我的“load”上的事件监听器在发出请求时没有激活。我检查了我的网址，它在我的浏览器中工作正常。感谢您的帮助，这是我的代码:

// ================ 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

尝试使用 onreadystatechange 而不是 addEventListener

示例代码:

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

.readyState 状态:

• 0:请求未初始化
• 1:服务器连接已建立
• 2:请求已收到
• 3:处理请求
• 4:请求已完成，响应已准备就绪

在您发表评论后，我尝试了您的代码以查看问题所在，看来您需要向维基百科提供更多参数。参见网址:https://www.mediawiki.org/wiki/API:Cross-site_requests

在 URL 中添加 &origin=* 即可正常工作。

代码运行示例:https://jsfiddle.net/cyctreb4/