Question

我正在使用Reddit API构建一个网站来显示Reddit中的图像。我通过JSON获取数据，然后使用它来构建页面，使用提供的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;
}

Answer 2

为什么您的代码无效：

您的AJAX请求是异步的，并且if(checkUrl(url)){将返回null（false），因为函数checkUrl()发送AJAX请求并且立即返回，然后AJAX调用完成

更改

request.open('GET', url, true);

到

request.open('GET', url, false);

，将您的request.send()移至request.onreadystatechange()之后，因为它现在是非异步请求。

request.onreadystatechange = function(){
    if(request.readyState==4){
        console.log(request.readyState);
        return true;
    }else{
        return false;
    }
}
request.send();

或，您只需将检查逻辑放入onreadystatechange函数：

request.onreadystatechange = function(){

    var url = url+'.jpg';
    if(request.readyState==4){
        //work with the data
    }else{
        //do nothing
    }
}

Answer 3

我相信你的问题是对AJAX的误解; AJAX基本上是异步的，这就是你所描述的行为的原因我已经使用以下内容以同步方式获取URL是否有效的简单真/假指示：

function isValidURL(url) {
    var encodedURL = encodeURIComponent(url);
    var isValid = false;

    $.ajax({
      url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22" + encodedURL + "%22&format=json",
      type: "get",
      async: false,
      dataType: "json",
      success: function(data) {
        isValid = data.query.results != null;
      },
      error: function(){
        isValid = false;
      }
    });

    return isValid;
}

用法很简单：

var isValid = isValidURL("http://www.wix.com");
alert(isValid ? "Valid URL!!!" : "Damn...");

希望这有帮助

Answer 4

return的{{1}}值不是checkUrl的request.reonreadystatechange值。试试这个：

return

Answer 5

在Safari上，与ActiveXObject相比，XMLHttpRequest可以正常工作：

function isThere(url)
{
    var req= new AJ(); // XMLHttpRequest object
    try {
        req.open("HEAD", url, false);
        req.send(null);
        //alert(req.status); //un-comment if need alert for status code

        return req.status== 200 ? true : false;
    }
    catch (er) {
        //alert ('ERROR:'); // un-comment if need alert for error
        return false;
    }
}

function AJAX()
{
    var obj;
    if (window.XMLHttpRequest) obj= new XMLHttpRequest();
    else if (window.ActiveXObject)
    {
        try
        {
            obj= new ActiveXObject('MSXML2.XMLHTTP.3.0');
        }
        catch(er)
        {
            try
            {
                obj= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(er)
            {
                obj= false;
            }
        }
    }
    return obj;
}

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

5 个答案: