2009-06-16 18 views
89

कुछ बुनियादी त्रुटि हैंडलिंग जोड़ने के लिए, मैं फ्लिकर से कुछ फ़ोटो खींचने के लिए jQuery के $ .getJSON का उपयोग करने वाले कोड के एक टुकड़े को फिर से लिखना चाहता था। ऐसा करने का कारण यह है कि $ .getJSON त्रुटि प्रबंधन या टाइमआउट के साथ काम नहीं करता है।jQuery AJAX (jsonp) एक टाइमआउट को अनदेखा करता है और त्रुटि घटना को आग नहीं करता

$ .getJSON $ के आसपास सिर्फ एक रैपर है। अजाक्स मैंने इस बात को फिर से लिखने और आश्चर्यचकित करने का फैसला किया, यह बेकार ढंग से काम करता है।

अब मज़ा शुरू होता है। जब मैं जानबूझकर 404 (यूआरएल को बदलकर) का कारण बनता हूं या नेटवर्क को टाइमआउट (इंटरवब्स तक नहीं लगाया जाता) का कारण बनता है, तो त्रुटि घटना बिल्कुल भी नहीं होती है। मैं एक नुकसान में हूं कि मैं क्या गलत कर रहा हूं। सहायता बहुत सराहना की है।

कोड यह रहा:

$(document).ready(function(){ 

    // var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL 
    var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404 

    $.ajax({ 
     url: jsonFeed, 
     data: { "lang" : "en-us", 
       "format" : "json", 
       "tags" : "sunset" 
     }, 
     dataType: "jsonp", 
     jsonp: "jsoncallback", 
     timeout: 5000, 
     success: function(data, status){ 
      $.each(data.items, function(i,item){ 
       $("<img>").attr("src", (item.media.m).replace("_m.","_s.")) 
          .attr("alt", item.title) 
          .appendTo("ul#flickr") 
          .wrap("<li><a href=\"" + item.link + "\"></a></li>"); 
       if (i == 9) return false; 
      }); 
     }, 
     error: function(XHR, textStatus, errorThrown){ 
      alert("ERREUR: " + textStatus); 
      alert("ERREUR: " + errorThrown); 
     } 
    }); 

}); 

मैं जोड़ने के लिए है कि इस प्रश्न पूछा गया था जब jQuery संस्करण पर था चाहते हैं 1.4.2

उत्तर

85

jQuery 1.5 और उच्चतम JSONP अनुरोधों के साथ त्रुटि प्रबंधन के लिए बेहतर समर्थन है। हालांकि, आपको $.getJSON के बजाय $.ajax विधि का उपयोग करने की आवश्यकता है। मेरे लिए, यह काम करता है:

var req = $.ajax({ 
    url : url, 
    dataType : "jsonp", 
    timeout : 10000 
}); 

req.success(function() { 
    console.log('Yes! Success!'); 
}); 

req.error(function() { 
    console.log('Oh noes!'); 
}); 

टाइमआउट, चाल करते हैं और त्रुटि हैंडलर कॉल करने के लिए लगता है जब वहाँ 10 सेकंड के बाद कोई सफल अनुरोध है।

मैं एक छोटे से blogpost इस विषय पर के रूप में अच्छा प्रदर्शन किया।

+23

मैं अभी परेशान हूं कि मैंने इस समस्या के खिलाफ 2 दिनों तक सिर से टक्कर लगी है और यह पता लगाने के लिए स्टैक ओवरव्लो पर कुछ अस्पष्ट खोज लेता है कि मुझे त्रुटि प्राप्त करने के लिए क्रॉस-डोमेन अनुरोध में टाइमआउट जोड़ना है। jQuery दस्तावेज़ में इसका उल्लेख कैसे नहीं किया जा सकता है? क्या क्रॉस-डोमेन जेसनपी अनुरोध वास्तव में असामान्य है किसी भी मामले में, धन्यवाद, धन्यवाद, धन्यवाद। +1 – chrixian

+0

इस समाधान के साथ मुझे स्टेटस कोड नहीं मिल रहा है, मुझे इसके बजाय "टाइमआउट" मिलता है। इसलिए मुझे नहीं पता कि वास्तविक त्रुटि क्या है, और इसे संभाल नहीं सकता संपत्ति – Tarlog

+10

@ टार्लॉग: यह तार्किक है। JSONP अनुरोध देशी अजाक्स अनुरोध नहीं हैं, वे केवल जावास्क्रिप्ट '

67

यह jQuery में देशी jsonp कार्यान्वयन के साथ एक ज्ञात सीमा है । पाठ के नीचे से IBM DeveloperWorks

JSONP इमारत मैशप के लिए एक बहुत शक्तिशाली तकनीक है, दुर्भाग्य से, यह एक इलाज-साथ अपने क्रॉस-डोमेन संचार जरूरतों के सभी के लिए नहीं है, लेकिन। में कुछ कमियां हैं जिन्हें को विकास संसाधनों को करने से पहले गंभीर विचार में लिया जाना चाहिए। सबसे पहले और सबसे महत्वपूर्ण, JSONP कॉल के लिए हैंडलिंग कोई त्रुटि नहीं है। यदि गतिशील स्क्रिप्ट सम्मिलन कार्य करता है, तो आप कॉल करते हैं; यदि नहीं, कुछ भी नहीं होता है। यह चुपचाप विफल रहता है। उदाहरण के लिए, आप सर्वर से 404 त्रुटि पकड़ने में सक्षम नहीं हैं। न ही आप रद्द कर सकते हैं या अनुरोध को पुनरारंभ करें। हालांकि, उचित समय की प्रतीक्षा करने के बाद आप टाइमआउट कर सकते हैं। (भविष्य jQuery संस्करणों JSONP अनुरोधों के लिए एक बीच में बंद करें सुविधा हो सकती है।)

हालांकि वहाँ एक jsonp प्लग में GoogleCode कि त्रुटि से निपटने के लिए सहायता प्रदान करता है पर उपलब्ध है। प्रारंभ करने के लिए, बस अपने कोड में निम्नलिखित परिवर्तन करें।

आप या तो इसे डाउनलोड कर सकते हैं, या प्लग-इन में केवल एक स्क्रिप्ट संदर्भ जोड़ सकते हैं। जैसा कि नीचे दिखाया

<script type="text/javascript" 
    src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-1.0.4.min.js"> 
</script> 

फिर अपने ajax कॉल संशोधित:

$(function(){ 
    //var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL 
    var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404 
    $.jsonp({ 
     url: jsonFeed, 
     data: { "lang" : "en-us", 
       "format" : "json", 
       "tags" : "sunset" 
     }, 
     dataType: "jsonp", 
     callbackParameter: "jsoncallback", 
     timeout: 5000, 
     success: function(data, status){ 
      $.each(data.items, function(i,item){ 
       $("<img>").attr("src", (item.media.m).replace("_m.","_s.")) 
          .attr("alt", item.title) 
          .appendTo("ul#flickr") 
          .wrap("<li><a href=\"" + item.link + "\"></a></li>"); 
       if (i == 9) return false; 
      }); 
     }, 
     error: function(XHR, textStatus, errorThrown){ 
      alert("ERREUR: " + textStatus); 
      alert("ERREUR: " + errorThrown); 
     } 
    }); 
}); 
+0

धन्यवाद के लिए आप जोस का जवाब! JQuery में देशी जेसनपी के सीमित कार्यान्वयन के कारण मैं $ .ajax के लिए गया था। हालांकि, ऐसा लगता है कि समस्या यह नहीं है कि $ .getJSON $ .ajax के आसपास एक रैपर है लेकिन डेटा टाइप: jsonp। क्या वो सही है? – Matijs

+0

यह बिल्कुल सही है। –

+0

आज तक समय नहीं था। हालांकि यह काम नहीं करता है। मुझे एक त्रुटि मिल रही है, लेकिन यह इसके बारे में है। मुझे नहीं पता कि त्रुटि के रूप में त्रुटि क्या है। अभी के लिए मैं $ .ajax और त्रुटि संदेश की कमी के साथ रह सकते हैं। जावास्क्रिप्ट मेरे लिए वेबपृष्ठ के शीर्ष पर एक अतिरिक्त परत है। अगर फ़्लिकर नीचे या त्रुटि संदेशों को फेंक रहा है, तो हमें अभी इसके साथ रहना होगा :) आपके सुझाव के लिए धन्यवाद। – Matijs

8

यह हो सकता है jQuery के एक "ज्ञात" सीमा हो; हालांकि, यह अच्छी तरह से प्रलेखित प्रतीत नहीं होता है। मैंने आज समझने की कोशिश में लगभग 4 घंटे बिताए कि मेरा टाइमआउट क्यों काम नहीं कर रहा था।

मैंने jquery.jsonp पर स्विच किया और इसे एक आकर्षण पसंद आया। धन्यवाद।

2

jQuery 1.5 के रूप में हल किया जाना प्रतीत होता है। मैंने उपरोक्त कोड की कोशिश की है और मुझे कॉलबैक मिल गया है।

नोट:: यह हैंडलर क्रॉस-डोमेन स्क्रिप्ट और JSONP अनुरोधों के लिए नहीं बुलाया जाता है

मैं कहता हूँ jQuery.ajax() के लिए त्रुटि कॉलबैक के प्रलेखन अभी भी निम्नलिखित टिप्पणी नहीं है, क्योंकि "प्रतीत हो रहा है"।

12

एक समाधान अगर आप jQuery 1.4 के साथ फंस रहे हैं:

var timeout = 10000; 
var id = setTimeout(errorCallback, timeout); 
$.ajax({ 
    dataType: 'jsonp', 
    success: function() { 
     clearTimeout(id); 
     ... 
    } 
}); 
+0

धन्यवाद! मेरे लिए काम करता है – Marek

+2

सिर्फ एक टिप्पणी है, यह 1.4 के साथ अटक गए लोगों के लिए एक वैध समाधान है, लेकिन अपना टाइमआउट चर पर्याप्त उच्च सेट करें, इसलिए आपको धीमी वेबसाइसेस के साथ समस्या नहीं है :)। उदाहरण के लिए यदि आप इसे एक सेकंड में सेट करते हैं, तो आप देख सकते हैं कि मेरा क्या मतलब है, त्रुटि कॉलबैक ट्रिगर हो जाता है, जबकि 1 सेकंड के बाद आपका कॉल अभी भी प्राप्त हो जाता है और सफलता फ़ंक्शन को कॉल करता है। तो बस इसे उचित रूप से पर्याप्त – Sander

+0

@ सैंडर सेट करने के लिए ध्यान रखें, अगर आपको 5 सेकंड के टाइमआउट के साथ 10 सेकंड के बाद उत्तर मिल गया तो सफलता समारोह भी कहा जा सकता है। टाइमआउट अवधि के बाद लंबित jqXHR पर '.abort()' को कॉल करना बेहतर तरीका हो सकता है। – Matijs

1

jQuery-jsonp jQuery प्लगइन Jose Basilio'sanswer में उल्लेख किया है अब GitHub पर पाया जा सकता।

दुर्भाग्य प्रलेखन कुछ हद तक संयमी, तो मैं एक साधारण उदाहरण प्रदान की है है:

$.jsonp({ 
     cache: false, 
     url: "url", 
     callbackParameter: "callback", 
     data: { "key" : "value" }, 
     success: function (json, textStatus, xOptions) { 
      // handle success - textStatus is "success" 
     }, 
     error: function (xOptions, textStatus) { 
      // handle failure - textStatus is either "error" or "timeout" 
     } 
    }); 

महत्वपूर्ण कॉल $ .jsonp में callbackParameter (शामिल करें) अन्यथा मुझे लगता है कि कॉलबैक पाया है फ़ंक्शन सेवा कॉल की क्वेरी स्ट्रिंग में इंजेक्शन नहीं मिलता है (jquery-jsonp के संस्करण 2.4.0 के रूप में वर्तमान)।

मैं जानता हूँ कि इस सवाल पुराना है, लेकिन त्रुटि हैंडलिंग JSONP का उपयोग करने का मुद्दा अभी भी 'का समाधान' नहीं है। उम्मीद है कि यह अद्यतन दूसरों की सहायता करेगा क्योंकि यह प्रश्न "jquery jsonp त्रुटि हैंडलिंग" के लिए Google के भीतर शीर्ष रैंकिंग है।

+0

अच्छा लगता है, और आश्चर्यजनक यह धागा अभी भी तीन साल बाद जीवित है ... – Matijs

1

क्या स्क्रिप्ट के onerror घटना को सुन के बारे में? मुझे यह समस्या थी और इसे jquery की विधि को पैच करके हल किया गया जहां स्क्रिप्ट टैग बनाया गया था। यहां कोड का दिलचस्प बिट है:

// Attach handlers for all browsers 
script.onload = script.onreadystatechange = function(_, isAbort) { 

    if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) { 

     cleanup(); 

     // Callback if not abort 
     if (!isAbort) { 
      callback(200, "success"); 
     } 
    } 
}; 

/* ajax patch : */ 
script.onerror = function(){ 
    cleanup(); 

    // Sends an inappropriate error, still better than nothing 
    callback(404, "not found"); 
}; 

function cleanup(){ 
    // Handle memory leak in IE 
    script.onload = script.onreadystatechange = null; 

    // Remove the script 
    if (head && script.parentNode) { 
     head.removeChild(script); 
    } 

    // Dereference the script 
    script = undefined; 
} 

इस समाधान के बारे में आप क्या सोचते हैं? क्या यह संगतता के मुद्दों का कारण बन सकता है?

संबंधित मुद्दे