javascript - Ajax - 检查 Url 是否存在的函数

Question

我正在构建一个使用 Reddit API 显示来自 Reddit 的图像的网站。 我通过 JSON 获取数据，然后使用它来构建页面，使用提供的 URL 作为图像源。

我获得的一些 URL 不直接转到图像，而是转到图像托管网站(如 imgur.com)。通常，在 URL 的末尾添加“.jpg”会使我找到正确的图像。

所以，这样做，我想在使用之前检查 URL + '.jpg' 是否存在。

我试图构建一个函数来检查 url。

function checkUrl(url){
    var request = new XMLHttpRequest;
    request.open('GET', url, true);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState==4){
            console.log(request.readyState);
            return true;
        }else{
            return false;
        }
    }
};

//Then I use the function to check and append the data to the page
var url = url+'.jpg';
if(checkUrl(url)){
    //work with the data
}else{
    //do nothing
}

页面没有任何反应，我仍然将 readyState 登录到控制台，因此 checkUrl() 函数似乎返回 true。

我做错了什么？我对整个 Ajax 很陌生，所以非常感谢您的帮助。

谢谢

Answer 1

您的问题是，当 request.readyState == 4 时，这意味着请求已完成，不管该请求的结果是什么。因此，即使您请求的 URL 返回“404 未找到”，您仍然会看到 XHR 将自身解析为 readyState 4。

为了解决您要执行的操作，我建议您检查响应的状态代码。例如，使用您的代码:

if(request.status==200){
   return true;
}