2

我正在构建一个使用 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 很陌生，所以非常感谢一些帮助。

谢谢

4

5 回答 5

3

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

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

if(request.status==200){
   return true;
}
于 2013-02-08T01:10:52.667 回答
3

为什么您的代码不起作用：

您的 AJAX 请求是异步的，if(checkUrl(url)){将在函数checkUrl()发送 AJAX 请求时返回 null (false)，并在 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
    }
}
于 2013-02-08T02:18:29.113 回答
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...");

希望这可以帮助

于 2014-05-07T21:16:08.287 回答
2

的return值request.reonreadystatechange不是returncheckUrl 的值。尝试这个：

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);
            // perform your data manipulation here
            // don't separate it with the request
        }
    }
};
于 2013-02-08T01:15:38.710 回答
1

在 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;
}
于 2013-03-12T08:30:10.660 回答