javascript - jQuery 检查 url 是否响应

Question

首先我读过this question我发现这非常有用。

我正在尝试检测网址是否有响应。如果是，则使用此 url 并启动另一个函数；如果为 false，则创建一个新 url 并启动另一个函数。

我尝试实现上述问题中的代码，但我发现很难将其合并到我的代码中，因为我不明白他试图在回调中提到什么。

所以我有两个功能:

function relatedProducts(relatedUrl){
  $.getJSON(relatedUrl, function(data){
    ......
  });
}
function liveSearch(liveSearchUrl){
  $.getJSON(liveSearchUrl, function(data){
    ......
  });
}

此外，我有一个变量网址，我正在尝试测试该网址是否响应，因此它是否有效。

var url ='apple/i-phone/iphone5';

function urlExists(url, exists){
 $.ajax({
   type: 'HEAD',
   url: url,
   success: function(){

      // what do I have to do here??? 
         Poster is mentioning `callback` but which one??
      },
      error: function(){

      // what do I have to do here??? 
         Poster is mentioning `callback` but which one??
      }
    });
  }

  urlExists(url, function(exists){
    if(true){
     var relatedUrl = ??
     relatedProducts(relatedUrl);
    } else {
     var liveSearchUrl = ??
     liveSearch(liveSearchUrl);
  });

我仍在学习 jQuery，我对海报和他的回答感到非常困惑;)

非常感谢任何帮助。

Answer 1

AJAX 是异步的，因此对 AJAX 方法的调用是非阻塞的。因此，当控制流返回给调用者时，您不能期望 AJAX 方法提供任何结果，并且后续函数调用不应依赖于 AJAX 调用已完成。

简单的例子:

doSomeStuff($.ajax(...)); //doesn't work

其他示例:

var x = false;
$.ajax({
    url: url,
    success: function(){
        x = true;
    }
});
if (x) {
    // probably doesn't work
}

这就是回调函数的用武之地:您可以告诉 AJAX 方法的调用在完成后执行一些操作。这些是示例中的 success 和 error 参数。

现在为您提供具体示例。我意识到您从类似问题的答案中复制了大部分内容，但我发现它有几个问题，其中包括您对 if (true) 的使用，这不是您想要的，所以这是我改进该代码的方法:

首先，我们需要 2 个回调而不是一个，没有必要强制一个方法执行明显打算由 2 个不同方法处理的事情。

var successCallback = function() {
  var relatedUrl = '' // see note below code block
  relatedProducts(relatedUrl);
}    
var errorCallback = function() {
  var liveSearchUrl = ''// see note below code block
  liveSearch(liveSearchUrl);
}

接下来，让我们更改您的 urlExists

function urlExists(url, sCallb, eCallb){
  $.ajax({
    type: 'HEAD',
    url: url,
    success: sCallb,
    error: eCallb
  });
}

最后，这就是将这些部分组合在一起的方式:

var url ='apple/i-phone/iphone5';
urlExists(url,successCallback,errorCallback);

一些注意事项:

如果您希望 latedUrl 和 liveSearchUrl 与用于 ajax 调用的 URL 相同，请告诉我，我将相应地更改我的示例。如果没有，只需将您要使用的网址放在引号内即可。

当然，urlExists 是一个根本不需要的包装器，您可以直接在 AJAX 调用中使用您的 url 和回调，但这样看起来更清晰、更容易理解并且更可重用。

对于任何错误，此代码将执行errorCallback，如果没有发生错误，则执行successCallback。这实际上可能不是您想要的，特别是如果您认为 AFAIK 3xx 状态代码被视为错误。为了获得更精细的控制，您可以为每个状态代码定义回调，或者只为其中一些状态代码定义回调，如果您愿意，我可以更新我的示例，请告诉我。