दिलचस्प पोस्ट
एक ही समारोह में लौटें और उपज कैसे एक नई विंडो खोलने और jQuery में jQuery का उपयोग कर इसे सम्मिलित करें? JSP / Servlet और Ajax का उपयोग कर सर्वर पर फ़ाइलों को कैसे अपलोड करें? सी # में प्रयास / कैच की असली धरती क्या है? find_or_create के साथ स्वीकार करता है? मैं एक समयसीप को एक स्वरूपित स्ट्रिंग में कैसे रूपांतरित करूं? उद्देश्य-सी में गोलांक संख्या एक अंतरफलक को कब लागू किया जाए और सुपरक्लास का विस्तार कब किया जाए? अवैध ब्लॉकस्केस अपवाद जब एईएस के साथ एक स्ट्रिंग एन्क्रिप्ट और डिक्रिप्ट करने का प्रयास करता है परियोजना बिल्ड पर कोकाओपोड की त्रुटियां MySQL "IN" क्वेरी में ऑर्डर बनाए रखना कैसे patch.exe पर उन्नयन की आवश्यकता से Vista को रोकने के लिए? विंडोज बैच फ़ाइल चल रहा है अतुल्यकालिक सिंगलटन के लिए वैकल्पिक क्या है प्लॉट के साथ प्लॉट चिकनी रेखा

JSONP के साथ .jax () का उपयोग करने का मूल उदाहरण?

कृपया किसी को मेरी मदद करने में सहायता कर सकते हैं कि कैसे JSONP के साथ आरंभ करें?

कोड:

$('document').ready(function() { var pm_url = 'http://twitter.com/status'; pm_url += '/user_timeline/stephenfry.json'; pm_url += '?count=10&callback=photos'; var photos = function (data) { alert(data); }; $.ajax({ url: pm_url, dataType: 'jsonp', jsonpCallback: 'photos', jsonp: false, }); }); 

बेला: http://jsfiddle.net/R7EPt/6/

एक चेतावनी का उत्पादन करना चाहिए, जहां तक ​​मैं दस्तावेज़ीकरण से काम कर सकता हूं: नहीं है (लेकिन कोई भी त्रुटि नहीं पैदा कर रहा है)

धन्यवाद।

Solutions Collecting From Web of "JSONP के साथ .jax () का उपयोग करने का मूल उदाहरण?"

JSONP वास्तव में XMLHttpRequest एक ही डोमेन नीति पर काबू पाने के लिए एक सरल चाल है। (जैसा कि आप जानते हैं कि कोई अन्य डोमेन को AJAX (XMLHttpRequest) अनुरोध नहीं भेज सकता।)

इसलिए – XMLHttpRequest का उपयोग करने के बजाय हमें स्क्रिप्ट HTMLl टैग का उपयोग करना होगा, जो आप आमतौर पर जेएस फ़ाइलों को लोड करने के लिए उपयोग करते हैं, जेएस के लिए दूसरे डोमेन से डेटा प्राप्त करने के लिए। अजीब लगता है?

बात यह है कि – स्क्रिप्ट टैग निकलते हैं, एक्सएमएल एचटीटीपीईईईईईईस्ट के समान फैशन में इस्तेमाल किया जा सकता है! इसकी जांच करें:

 script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://www.someWebApiServer.com/some-data"; 

आपको एक स्क्रिप्ट खंड के साथ समाप्त होगा जो डेटा लोड करने के बाद इस तरह दिखता है:

 <script> {['some string 1', 'some data', 'whatever data']} </script> 

हालांकि यह थोड़ा असुविधाजनक है, क्योंकि हमें स्क्रिप्ट टैग से इस सरणी को प्राप्त करना है। इसलिए JSONP निर्माता ने फैसला किया कि यह बेहतर काम करेगा (और यह है):

 script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback"; 

वहाँ पर my_callback समारोह की सूचना है? इसलिए – जब JSONP सर्वर आपके अनुरोध को प्राप्त करता है और कॉलबैक पैरामीटर ढूंढता है – सादे जेएस सरणी लौटने के बजाय यह इसे वापस कर देगा:

 my_callback({['some string 1', 'some data', 'whatever data']}); 

देखें कि लाभ कहां है: अब हमें स्वत: कॉलबैक मिल जाता है ( my_callback ) जो डेटा प्राप्त करने के बाद शुरू हो जाएगा JSONP के बारे में जानने के लिए यह सब कुछ है: यह एक कॉलबैक और स्क्रिप्ट टैग है।


ध्यान दें:
ये JSONP उपयोग के सरल उदाहरण हैं, ये उत्पादन तैयार लिपियों नहीं हैं।

रॉ जावास्क्रिप्ट प्रदर्शन (सरल ट्विटर फ़ीड JSONP का उपयोग कर):

 <html> <head> </head> <body> <div id = 'twitterFeed'></div> <script> function myCallback(dataWeGotViaJsonp){ var text = ''; var len = dataWeGotViaJsonp.length; for(var i=0;i<len;i++){ twitterEntry = dataWeGotViaJsonp[i]; text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>' } document.getElementById('twitterFeed').innerHTML = text; } </script> <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script> </body> </html> 

बुनियादी jQuery उदाहरण (JSONP का उपयोग करते हुए सरल ट्विटर फ़ीड):

 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(document).ready(function(){ $.ajax({ url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10', dataType: 'jsonp', success: function(dataWeGotViaJsonp){ var text = ''; var len = dataWeGotViaJsonp.length; for(var i=0;i<len;i++){ twitterEntry = dataWeGotViaJsonp[i]; text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>' } $('#twitterFeed').html(text); } }); }) </script> </head> <body> <div id = 'twitterFeed'></div> </body> </html> 

JSONP पैडिंग के साथ JSON के लिए खड़ा है। (बहुत खराब तकनीक का नाम है क्योंकि इसके साथ कुछ भी नहीं है जो ज्यादातर लोग "पैडिंग" के बारे में सोचेंगे।)

JQuery का उपयोग करते हुए जेएसओएनपी के साथ काम करने में आसान तरीका भी है

 $.getJSON("http://example.com/something.json?callback=?", function(result){ //response data are now in the result variable alert(result); }); 

क्या ? यूआरएल के अंत में यह बताता है कि यह जेएसओएन के बजाय एक जेएसओएनपी अनुरोध है। jQuery रजिस्टरों और कॉलबैक समारोह को स्वचालित रूप से कॉल करता है

अधिक विस्तार के लिए jQuery.getJSON प्रलेखन देखें।

2017 को संपादित करें : कृपया अब और jQuery का उपयोग न करें!

ओपी के जवाब में, आपके कोड में दो समस्याएं हैं: आपको jsonp = 'callback' सेट करने की आवश्यकता है, और एक चर में कॉलबैक फ़ंक्शन में जोड़ना जैसे आपके द्वारा काम करने में प्रतीत नहीं होता।

अपडेट: जब मैंने इसे लिखा था तो ट्विटर एपीआई सिर्फ खुली थी, लेकिन उन्होंने इसे बदल दिया और अब इसे प्रमाणीकरण की आवश्यकता है। मैंने दूसरा उदाहरण एक कार्यशील (2014Q1) उदाहरण में बदल दिया, लेकिन अब github का उपयोग कर रहा है

यह किसी भी अधिक कार्य नहीं करता – एक अभ्यास के रूप में, देखें कि क्या आप इसे Github API के साथ बदल सकते हैं:

 $('document').ready(function() { var pm_url = 'http://twitter.com/status'; pm_url += '/user_timeline/stephenfry.json'; pm_url += '?count=10&callback=photos'; $.ajax({ url: pm_url, dataType: 'jsonp', jsonpCallback: 'photos', jsonp: 'callback', }); }); function photos (data) { alert(data); console.log(data); }; 

हालांकि चेतावनी () एक सरणी है कि वास्तव में अच्छी तरह से काम नहीं करता है … फायरबग में "नेट" टैब आपको JSON को ठीक से दिखाएगा। एक और आसान चाल है

 alert(JSON.stringify(data)); 

आप jQuery.getJSON विधि का भी उपयोग कर सकते हैं। यहां एक पूर्ण HTML उदाहरण दिया गया है जो कि गिथूब से "gists" की सूची प्राप्त करता है। इस तरह से यह आपके लिए बेतरतीब नामांकित कॉलबैक फ़ंक्शन बनाता है, यह अंतिम "कॉलबैक =?" है यूआरएल में

 <!DOCTYPE html> <html lang="en"> <head> <title>JQuery (cross-domain) JSONP Twitter example</title> <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script> $(document).ready(function(){ $.getJSON('https://api.github.com/gists?callback=?', function(response){ $.each(response.data, function(i, gist){ $('#gists').append('<li>' + gist.user.login + " (<a href='" + gist.html_url + "'>" + (gist.description == "" ? "undescribed" : gist.description) + '</a>)</li>'); }); }); }); </script> </head> <body> <ul id="gists"></ul> </body> </html> 
 <!DOCTYPE html> <html> <head> <style>img{ height: 100px; float: left; }</style> <script src="http://code.jquery.com/jquery-latest.js"></script> <title>An JSONP example </title> </head> <body> <!-- DIV FOR SHOWING IMAGES --> <div id="images"> </div> <!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP --> <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { format: "json" }, //RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV function(data) { $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); }); });</script> </body> </html> 

उपरोक्त कोड फ़्लिकर एपीआई से छवियों को प्राप्त करने में मदद करता है। यह JSONP का उपयोग करते हुए चित्र प्राप्त करने के लिए GET विधि का उपयोग करता है यह यहां विस्तार में पाया जा सकता है