XmlHttpRequest.responseJSON से पार्सिंग JSON

Question

मैं जावास्क्रिप्ट में एक बिट JSON प्रतिक्रिया पार्स करने की कोशिश कर रहा हूँ।

मुझे XmlHttpRequest के माध्यम से JSON मिलता है।

var req = new XMLHttpRequest;  
req.overrideMimeType("application/json");  
req.open('GET', BITLY_CREATE_API + encodeURIComponent(url)
          + BITLY_API_LOGIN, true);  
var target = this;  
req.onload  = function() {target.parseJSON(req, url)};  
req.send(null);

parseJSON: function(req, url) {  
if (req.status == 200) {  
    var jsonResponse = req.responseJSON;  
    var bitlyUrl = jsonResponse.results[url].shortUrl;  
}

मैं एक फ़ायरफ़ॉक्स एडऑन में ऐसा करता हूं। जब मैं चलाता हूं तो मुझे लाइन के लिए "jsonResponse अपरिभाषित है" त्रुटि मिलती है var bitlyUrl = jsonResponse.results[url].shortUrl;। क्या मैं यहां JSON को पार्स करने में कुछ गलत कर रहा हूं? या इस कोड में क्या गलत है?

Answer 1

नए तरीके I: fetch

TL, डॉ। मैं इस तरह से अनुशंसा करता हूँ जब तक आपको तुल्यकालिक अनुरोध भेजने या पुराने ब्राउज़र का समर्थन करने की आवश्यकता नहीं है।

जब तक आपका अनुरोध अतुल्यकालिक है आप HTTP अनुरोध भेजने के लिए Fetch API का उपयोग कर सकते हैं । भ्रूण एपीआई वादों के साथ काम करता है , जो जावास्क्रिप्ट में अतुल्यकालिक वर्कफ़्लोज़ को संभालने का एक अच्छा तरीका है। इस दृष्टिकोण के साथ आप fetch()अनुरोध भेजने और ResponseBody.json()प्रतिक्रिया को पार्स करने के लिए उपयोग करते हैं:

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonResponse) {
    // do something with jsonResponse
  });

संगतता: Fetch API IE11 के साथ-साथ एज 12 और 13. द्वारा समर्थित नहीं है, हालांकि, पॉलीफिल हैं ।

नए तरीके II: responseType

जैसा कि लोन्डरेन ने अपने उत्तर में लिखा है , नए ब्राउज़र आपको responseTypeप्रतिक्रिया के अपेक्षित प्रारूप को परिभाषित करने के लिए संपत्ति का उपयोग करने की अनुमति देते हैं । पार्स किए गए प्रतिक्रिया डेटा को तब responseसंपत्ति के माध्यम से एक्सेस किया जा सकता है :

var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = req.response;
   // do something with jsonResponse
};
req.send(null);

संगतता: responseType = 'json'IE11 द्वारा समर्थित नहीं है।

क्लासिक तरीका है

मानक XMLHttpRequest के पास कोई responseJSONसंपत्ति नहीं है, बस responseTextऔर responseXML। जब तक बिट्स वास्तव में आपके अनुरोध पर कुछ JSON के साथ प्रतिक्रिया करता है, responseTextतब तक JSON कोड पाठ के रूप में होना चाहिए, इसलिए आपको इसे करने के लिए पार्स करना होगा JSON.parse():

var req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = JSON.parse(req.responseText);
   // do something with jsonResponse
};
req.send(null);

संगतता: यह दृष्टिकोण किसी भी ब्राउज़र के साथ काम करना चाहिए जो समर्थन करता है XMLHttpRequestऔर JSON।

JSONHttpRequest

यदि आप उपयोग करना पसंद करते हैं responseJSON, लेकिन JQuery की तुलना में अधिक हल्का समाधान चाहते हैं, तो आप मेरे JSONHttpRequest की जांच कर सकते हैं। यह बिल्कुल सामान्य XMLHttpRequest की तरह काम करता है, लेकिन यह responseJSONसंपत्ति भी प्रदान करता है। आपको अपने कोड में परिवर्तन करना होगा पहली पंक्ति होगी:

var req = new JSONHttpRequest();

JSONHttpRequest जावास्क्रिप्ट को JSON के रूप में आसानी से भेजने के लिए कार्यक्षमता प्रदान करता है। अधिक विवरण और कोड यहां पाया जा सकता है: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ ।

पूर्ण प्रकटीकरण: मैं पिक्सेल का मालिक हूँ | बाइट्स। मुझे लगता है कि मेरी स्क्रिप्ट समस्या का एक अच्छा समाधान है, इसलिए मैंने इसे यहां पोस्ट किया। कृपया एक टिप्पणी छोड़ दें, यदि आप चाहते हैं कि मैं लिंक को हटा दूं।

Comments

+1; IMO इस सवाल का असली जवाब था - कोई jQuery सिर्फ सादे पुराने वेनिला XMLHttpRequest; बस क्या सवाल था।

— फर्गस इन लंदन

वहाँ s a jquery version too. If you are getting crossbrowser issueयह कोशिश करो, आमतौर पर फ्रेमवर्क इन समस्याओं को बेहतर तरीके से

— संभालता है

चार साल बाद और यह अभी भी लोगों की मदद कर रहा है। :) ब्लॉग को जोड़ना ठीक है IMO, क्योंकि यह वास्तव में नमूना कोड और डाउनलोड के साथ प्रश्न का पूर्ण उत्तर है। धन्यवाद!

— user1094821

"नई लाइब्रेरी का उपयोग करें" उतना उपयोगी नहीं है जितना कि कोई सोच सकता है।

— ग्रुनियन शफेटो

@ GrunionShaftoe क्या आप समझा सकते हैं, क्या मतलब है? मैं एक नए पुस्तकालय का उपयोग करने का सुझाव नहीं दे रहा हूं। मेरा अनुशंसित समाधान fetchमानक जावास्क्रिप्ट है।

— तोरबेन

Answer 2

आप बस सेट कर सकते हैं xhr.responseType = 'json';

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.responseType = 'json';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log('response', this.response); // JSON response  
  }
};
xhr.send();
  

प्रतिक्रिया के लिए प्रलेखन

Comments

वहाँ एक बड़ी चेतावनी यहाँ है: न तो आईई, और न ही एज के वर्तमान संस्करण इस का समर्थन (शायद एज होगा अंत में क्रोमियम में संक्रमण के बाद)

— Machavity

Answer 3

नोट: मैंने केवल क्रोम में इसका परीक्षण किया है।

यह XMLHttpRequest के लिए एक प्रोटोटाइप फ़ंक्शन जोड़ता है .. XHR2 ,

में एक्सएचआर 1 आप शायद सिर्फ प्रतिस्थापित करने की आवश्यकता this.responseके साथthis.responseText

Object.defineProperty(XMLHttpRequest.prototype,'responseJSON',{value:function(){
 return JSON.parse(this.response);
},writable:false,enumerable:false});

xhr2 में जासन वापस करने के लिए

xhr.onload=function(){
 console.log(this.responseJSON());
}

संपादित करें

यदि आप XHR को arraybufferअन्य प्रतिक्रिया प्रकारों के साथ उपयोग करने की योजना बनाते हैं, तो आपको यह जांचना होगा कि प्रतिक्रिया क्या है string।

किसी भी मामले में आपको अधिक चेक जोड़ना होगा जैसे कि यह जसन को पार्स करने में सक्षम नहीं है।

Object.defineProperty(XMLHttpRequest.prototype,'responseJSON',{value:function(){
 return (typeof this.response==='string'?JSON.parse(this.response):this.response);
},writable:false,enumerable:false});

Comments

यदि मैं आप होता तो मैं किसी फ़ंक्शन विशेषता के बजाय एक गटर को परिभाषित करता। बस पास की गई वस्तु के valueसाथ बदलें , और आप का उपयोग कर सकते हैं जैसे आप किसी अन्य प्रतिक्रिया चर। getObject.definePropertyresponseJSON

— wizzwizz4

Answer 4

मुझे लगता है कि आपको उपयोग करने के लिए jQuery को शामिल करना होगा responseJSON।

JQuery के बिना, आप responseText के साथ कोशिश कर सकते हैं और पसंद कर सकते हैं eval("("+req.responseText+")");

अद्यतन : कृपया टिप्पणी के बारे में पढ़ें eval, आप eval के साथ परीक्षण कर सकते हैं, लेकिन इसका उपयोग कार्य विस्तार में न करें।

या

json_parse का उपयोग करें : यह उपयोग नहीं करता हैeval

Comments

क्रोम निजी के साथ चलने वाले फ़ायरफ़ॉक्स एडऑन के लिए, आपको किसी भी स्रोत से प्राप्त होने वाले कुछ को निकालने की कोशिश न करें। इसके बजाय, JSON.parse (कम से कम FF 3.5 और बाद में) का उपयोग करें।

— बेन कंबाइ

Answer 5

यदि यह FF एक्सटेंशन के लिए है तो nsIJSON का उपयोग करें :

var req = new XMLHttpRequest;
req.overrideMimeType("application/json");
req.open('GET', BITLY_CREATE_API + encodeURIComponent(url) + BITLY_API_LOGIN, true);
var target = this;
req.onload = function() {target.parseJSON(req, url)};
req.send(null);

parseJSON: function(req, url) {
if (req.status == 200) {
  var jsonResponse = Components.classes["@mozilla.org/dom/json;1"]
      .createInstance(Components.interfaces.nsIJSON.decode(req.responseText);
  var bitlyUrl = jsonResponse.results[url].shortUrl;
}

वेबपृष्ठ के लिए, JSON.parseइसके बजाय बस का उपयोग करेंComponents.classes["@mozilla.org/dom/json;1"].createInstance(Components.interfaces.nsIJSON.decode