अप्रत्याशित टोकन कोलन: jQuery.ajax#get में JSONP त्रुटियों को हल करना

जब jQuery.ajax में "अप्रत्याशित टोकन कोलन" त्रुटि का सामना करना पड़ता है #प्राप्त करें, JSONP (पैडिंग के साथ JSON) अनुरोधों की प्रकृति को समझना महत्वपूर्ण है। JSONP में JSON डेटा को क्लाइंट साइड पर वैश्विक JavaScript फ़ंक्शन कॉल पर वापस भेजना शामिल है।

JSONP का समर्थन करने के लिए, सर्वर को प्रतिक्रिया में "पैडिंग" शामिल करना होगा। "पैडिंग" में एक कॉलबैक फ़ंक्शन नाम होता है जिसके बाद कोष्ठक में संलग्न JSON डेटा होता है:

jQuery111108398571682628244_1403193212453({"Name":"Tom","Description":"Hello it's me!"})

इस उदाहरण में, कॉलबैक फ़ंक्शन का नाम jQuery111108398571682628244_1403193212453 है। त्रुटि इसलिए होती है क्योंकि जावास्क्रिप्ट JSONP को जावास्क्रिप्ट के रूप में पार्स करता है, जहां {...} ब्लॉक का भी प्रतिनिधित्व करता है।

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

var callback = req.query.callback;
var data = JSON.stringify({
    Name : "Tom",
    Description : "Hello it's me!"
});

if (callback) {
    res.setHeader('Content-Type', 'text/javascript');
    res.end(callback   '('   data   ')');
} else {
    res.setHeader('Content-Type', 'application/json');
    res.end(data);
}

वैकल्पिक रूप से, ExpressJS एक res.jsonp() विधि प्रदान करता है जो पहले से ही इस स्थिति को संभालती है, जिससे JSONP प्रतिक्रियाओं को वापस करना आसान हो जाता है:

app.get( '/', function( req, res ) {
    console.log( 'req received' );

    res.jsonp({
        Name : "Tom",
        Description : "Hello it's me!"
    });
});