Come visualizzare un messaggio di errore JSON?

Question

Attualmente sto sviluppando un tema tumblr e hanno costruito una thingamabob jQuery JSON che utilizza l'API Tumblr per effettuare le seguenti operazioni:

L'utente dovrebbe fare clic sul link "tipo post" (ad esempio video messaggi), al quale stage jQuery userebbe JSON per afferrare tutti i post relativi a quel tipo e quindi visualizzarli dinamicamente in un'area designata.

Ora tutto funziona assolutamente peachy, tranne che con Tumblr che è Tumblr e che i server colpiscono ogni tanto, a volte l'API Tumblr è offline. Ora non posso prevedere quando questa funzione sarà disattivata, motivo per cui voglio visualizzare un messaggio di errore generico se JSON (per qualsiasi motivo) non è stato in grado di caricare il post.

Vedrai che ho già scritto del codice per mostrare un messaggio di errore quando jQuery non riesce a trovare post relativi a quel tipo di messaggio MA non copre eventuali errori del server. Nota: a volte ottengo questo errore:

Impossibile caricare risorsa: il server ha risposto con uno stato di 503 (Servizio temporaneamente non disponibile)

E 'per questo 503 Messaggio di errore che ho bisogno di scrivere del codice , ma io sono un po 'all'oscuro :)

Ecco il codice jQuery JSON:

$('ul.right li').find('a').click(function() { 
    var postType = this.className; 
    var count = 0; 
    byCategory(postType); 
    return false; 

    function byCategory(postType, callback) { 
    $.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data) { 
    var article = []; 
    $.each(data.posts, function(i, item) { 
    // i = index 
    // item = data for a particular post 
    switch(item.type) { 
    case 'photo': 
    article[i] = '<div class="post_wrap"><div class="photo" style="padding-bottom:5px;">' 
     + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/XSTldh6ds/photo_icon.png" alt="type_icon"/></a>' 
     + '<a href="' + item.url + '" title="{Title}"><img src="' 
     + item['photo-url-500'] 
     + '"alt="image" /></a></div></div>'; 
    count = 1; 
    break; 
    case 'video': 
    article[i] = '<div class="post_wrap"><div class="video" style="padding-bottom:5px;">' 
     + '<a href="' + item.url + '" title="{Title}" class="type_icon">' 
     + '<img src="http://static.tumblr.com/ewjv7ap/nuSldhclv/video_icon.png" alt="type_icon"/></a>' 
     + '<span style="margin: auto;">' 
     + item['video-player'] 
     + '</span>' 
     + '</div></div>'; 
    count = 1; 
    break; 
    case 'audio': 
    if (use_IE == true) { 
    article[i] = '<div class="post_wrap"><div class="regular">' 
      + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>' 
     + '<h3><a href="' 
     + item.url 
     + '">' 
     + item['id3-artist'] 
     +' - ' 
     + item['id3-title'] 
     + '</a></h3>' 
     + '</div></div>'; 

    } else { 
    article[i] = '<div class="post_wrap"><div class="regular">' 
      + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>' 
     + '<h3><a href="' 
     + item.url 
     + '">' 
     + item['id3-artist'] 
     +' - ' 
     + item['id3-title'] 
     + '</a></h3><div class="player">' 
     + item['audio-player'] 
     + '</div>' 
     + '</div></div>'; 
    }; 
    count = 1; 
    break; 
    case 'regular': 
    article[i] = '<div class="post_wrap"><div class="regular">' 
     + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/dwxldhck1/regular_icon.png" alt="type_icon"/></a><h3><a href="' 
     + item.url 
     + '">' 
     + item['regular-title'] 
     + '</a></h3><div class="description_container">' 
     + item['regular-body'] 
     + '</div></div></div>'; 
    count = 1; 
    break; 
    case 'quote': 
    article[i] = '<div class="post_wrap"><div class="quote">' 
     + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/loEldhcpr/quote_icon.png" alt="type_icon"/></a><blockquote><h3><a href="' + item.url + '" title="{Title}">' 
     + item['quote-text'] 
     + '</a></h3></blockquote><cite>- ' 
     + item['quote-source'] 
     + '</cite></div></div>'; 
    count = 1; 
    break; 
    case 'conversation': 
    article[i] = '<div class="post_wrap"><div class="chat">' 
     + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/MVuldhcth/conversation_icon.png" alt="type_icon"/></a><h3><a href="' 
     + item.url 
     + '">' 
     + item['conversation-title'] 
     + '</a></h3></div></div>'; 
    count = 1; 
    break; 
    case 'link': 
    article[i] = '<div class="post_wrap"><div class="link">' 
     + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/EQGldhc30/link_icon.png" alt="type_icon"/></a><h3><a href="' 
     + item['link-url'] 
     + '" target="_blank">' 
     + item['link-text'] 
     + '</a></h3></div></div>'; 
    count = 1; 
    break; 
    default: 
    alert('No Entries Found.'); 
    }; 
    }) // end each 

    if (!(count == 0)) { 
    $('#content_right') 
     .hide('fast') 
     .html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Displaying ' 
     + postType 
     + ' Posts Only</h2></div>' 
     + article.join('')) 
    .slideDown('fast') 
    } else { 
    $('#content_right') 
    .hide('fast') 
    .html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Hmmm, currently there are no ' 
     + postType 
     + ' posts to display</h2></div>') 
    .slideDown('fast') 
    } 


    // end getJSON 
    }); // end byCategory 
    } 
}); 

Se vuoi vedere la demo in azione, controlla Elegantem ma farlo notare che mai tutto potrebbe funzionare perfettamente per te (o meno), a seconda del temperamento di Tumblr.

---

aggiornamento Va bene, così dopo aver seguito jmorts risposta sotto il più vicino alla lettera come 02:00 permette, ho sfornato il seguente codice senza successo - non c'è avviso popping up. MYABE io sono un muppet, forse sono solo scheleeeepy ma se voi gente Jedi può prendere un altro sguardo che avevo apprezzato molto :)

$('ul.right li').find('a').click(function() { 
     var postType = this.className; 
     var count = 0; 
     byCategory(postType); 
     return false; 

     function byCategory(postType, callback) { 
      $.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data, textStatus, xhr) { // main callback function 
      if(xhr.status == 500 || xhr.status == 404 || xhr.status == 503) { 
        yourErrorHandler(data, textStatus, xhr); // success 
       } else { 
        yourCallbackToRunIfSuccessful(data); // failed 
       } 
       } 
     ); 


     function yourCallbackToRunIfSuccessful(data) { 
      var article = []; 
       $.each(data.posts, function(i, item) { 
       // i = index 
       // item = data for a particular post 
       switch(item.type) { 
       case 'photo': 
       article[i] = '<div class="post_wrap"><div class="photo" style="padding-bottom:5px;">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/XSTldh6ds/photo_icon.png" alt="type_icon"/></a>' 
          + '<a href="' + item.url + '" title="{Title}"><img src="' 
          + item['photo-url-500'] 
          + '"alt="image" /></a></div></div>'; 
       count = 1; 
       break; 
       case 'video': 
       article[i] = '<div class="post_wrap"><div class="video" style="padding-bottom:5px;">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon">' 
          + '<img src="http://static.tumblr.com/ewjv7ap/nuSldhclv/video_icon.png" alt="type_icon"/></a>' 
          + '<span style="margin: auto;">' 
          + item['video-player'] 
          + '</span>' 
          + '</div></div>'; 
       count = 1; 
       break; 
       case 'audio': 
       if (use_IE == true) { 
       article[i] = '<div class="post_wrap"><div class="regular">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>' 
          + '<h3><a href="' 
          + item.url 
          + '">' 
          + item['id3-artist'] 
          +' - ' 
          + item['id3-title'] 
          + '</a></h3>' 
          + '</div></div>'; 

       } else { 
       article[i] = '<div class="post_wrap"><div class="regular">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>' 
          + '<h3><a href="' 
          + item.url 
          + '">' 
          + item['id3-artist'] 
          +' - ' 
          + item['id3-title'] 
          + '</a></h3><div class="player">' 
          + item['audio-player'] 
          + '</div>' 
          + '</div></div>'; 
       }; 
       count = 1; 
       break; 
       case 'regular': 
       article[i] = '<div class="post_wrap"><div class="regular">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/dwxldhck1/regular_icon.png" alt="type_icon"/></a><h3><a href="' 
          + item.url 
          + '">' 
          + item['regular-title'] 
          + '</a></h3><div class="description_container">' 
          + item['regular-body'] 
          + '</div></div></div>'; 
       count = 1; 
       break; 
       case 'quote': 
       article[i] = '<div class="post_wrap"><div class="quote">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/loEldhcpr/quote_icon.png" alt="type_icon"/></a><blockquote><h3><a href="' + item.url + '" title="{Title}">' 
          + item['quote-text'] 
          + '</a></h3></blockquote><cite>- ' 
          + item['quote-source'] 
          + '</cite></div></div>'; 
       count = 1; 
       break; 
       case 'conversation': 
       article[i] = '<div class="post_wrap"><div class="chat">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/MVuldhcth/conversation_icon.png" alt="type_icon"/></a><h3><a href="' 
          + item.url 
          + '">' 
          + item['conversation-title'] 
          + '</a></h3></div></div>'; 
       count = 1; 
       break; 
       case 'link': 
       article[i] = '<div class="post_wrap"><div class="link">' 
          + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/EQGldhc30/link_icon.png" alt="type_icon"/></a><h3><a href="' 
          + item['link-url'] 
          + '" target="_blank">' 
          + item['link-text'] 
          + '</a></h3></div></div>'; 
       count = 1; 
       break; 
       default: 
       alert('No Entries Found.'); 
       }; 
       }) // end each 

       if (!(count == 0)) { 
       $('#content_right') 
       .hide('fast') 
       .html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Displaying ' 
        + postType 
        + ' Posts Only</h2></div>' 
        + article.join('')) 
       .slideDown('fast') 
       } else { 
        $('#content_right') 
        .hide('fast') 
        .html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Hmmm, currently there are no ' 
         + postType 
         + ' posts to display</h2></div>') 
        .slideDown('fast') 
       } 


       // end getJSON 
      }; // end byCategory 

      function yourErrorHandler(data,textStatus,xhr) { 
       alert("Server returned status code " + xhr.status + ". Try again later."); 
      } 
     } 
    }); 

Answer 1

tuo callback prende in realtà 2 altri parametri non sei che mostrano:

 $.getJSON('{URL}/api/read/json?type=' + postType + 
      '&callback=?', 
       function(data, textStatus, xhr) { // main callback function 
       if(xhr.status == 500 || xhr.status == 404 || xhr.status == 503) { 
        yourErrorHandler(data, textStatus, xhr); // success 
       } else { 
        yourCallbackToRunIfSuccessful(data); // failed 
       } 
       } 
     ); 

     // your original code, but wrapped up in it's own function definition 
     function yourCallbackToRunIfSuccessful(data) { 
     var article = []; 
     $.each(data.posts, function(i, item) { 
     // i = index 
     // item = data for a particular post 
     switch(item.type) { 
      case 'photo': 
      ... 
      ... 
     } 

     function yourErrorHandler(data,textStatus,xhr) { 
      alert("Server returned status code " + xhr.status + ". Try again later."); 
     } 

È possibile utilizzare l'oggetto xhr per verificare lo stato dell'oggetto XMLHttpRequest non elaborato. Se ottieni un 404, 503, 500, ecc, allora puoi visualizzare il tuo messaggio di errore o eseguire la tua funzione alternativa.

http://api.jquery.com/jQuery.ajax

Inoltre, se non si dispone già di Firebug per Firefox, che consiglio vivamente per il debug JavaScript: http://getfirebug.com/

UPDATE:

L'involucro getJSON JQuery AJAX non ha un gestore di callback di errore. Invece, è necessario utilizzare la normale gestore JQuery AJAX per rendere la vostra richiesta di JSON:

jQuery.ajax({ 
    type: "GET", 
    url: '{URL}/api/read/json?type=' + postType + 
      '&callback=?', 
    dataType: "json", 
    success: function(results){ 
     console.info("Success!"); 
     yourCallbackToRunIfSuccessful(results); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown){ 
     alert("Error"); 
     yourErrorHandler(XMLHttpRequest, textStatus, errorThrown); 
    } 
    }); 

E 'importante notare che questo non è JSONP. Ciò significa che non è possibile effettuare richieste tra domini utilizzando questa funzione.

Se si sta facendo affidamento su JSONP utilizzando la mia risposta originale , è necessario implementare una soluzione in cui si imposta un evento setInterval per eseguire il polling di un valore che verrà modificato nella richiamata. Maggiori dettagli possono essere trovati qui:

http://groups.google.com/group/jquery-dev/browse_thread/thread/73ca6be8071479fb