XMLHttpRequest.responseJSON থেকে জেএসনকে পার্স করা হচ্ছে

Question 1

আমি জাভাস্ক্রিপ্টে কিছুটা পার্স করার চেষ্টা করছি। 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 পার্সিংয়ে কোন ভুল করছি? বা এই কোডটিতে কী ভুল?

Question 2

নতুন উপায় আমি: fetch

টিএল; ডিআর আমি যতক্ষণ না আপনাকে সিঙ্ক্রোনাস অনুরোধগুলি প্রেরণ করতে বা পুরাতন ব্রাউজারগুলিকে সমর্থন করতে না হয় ততক্ষণ আমি এইভাবে পরামর্শ দেব।

আপনার অনুরোধটি যতক্ষণ না অ্যাসিনক্রোনাস হয় আপনি এইচটিটিপি অনুরোধগুলি প্রেরণের জন্য ফেচ এপিআই ব্যবহার করতে পারেন । ফেচ এআইপি প্রতিশ্রুতি নিয়ে কাজ করে যা জাভাস্ক্রিপ্টে অ্যাসিঙ্ক্রোনাস ওয়ার্কফ্লো হ্যান্ডেল করার একটি দুর্দান্ত উপায়। এই পদ্ধতির সাহায্যে আপনি fetch()একটি অনুরোধ প্রেরণ ResponseBody.json()এবং প্রতিক্রিয়া পার্স করতে ব্যবহার করেন:

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

সামঞ্জস্যতা: ফেচ এপিআই আইই 11 এবং পাশাপাশি এজ 12 এবং 13 দ্বারা সমর্থিত নয় However তবে, পলিফিল রয়েছে ।

নতুন উপায় 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'আইই 11 দ্বারা সমর্থিত নয়।

ক্লাসিক উপায়

স্ট্যান্ডার্ড এক্সএমএলএইচটিপিআরকোয়েস্টের কোনও responseJSONসম্পত্তি নেই, কেবল responseTextএবং responseXML। যতক্ষণ না কিছুটা সত্যিই আপনার অনুরোধটির জন্য কিছু জেএসএনের সাথে প্রতিক্রিয়া জানায়, জাসন কোডটি responseTextপাঠ্য হিসাবে থাকা উচিত, তাই আপনাকে যা করতে হবে তা হ'ল এটিকে পার্স করা 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 পরীক্ষা করে দেখতে চাইতে পারেন। এটি সাধারণ এক্সএমএলএইচটিএইচটিপিআরকুয়েস্টের মতো ঠিক কাজ করে তবে responseJSONসম্পত্তি সরবরাহ করে । আপনার কোডে আপনাকে যা পরিবর্তন করতে হবে তা হ'ল প্রথম লাইন:

var req = new JSONHttpRequest();

JSONHttpRequest সহজে JSON হিসাবে জাভাস্ক্রিপ্ট অবজেক্টগুলি প্রেরণের জন্য কার্যকারিতা সরবরাহ করে। আরও বিশদ এবং কোডটি এখানে পাওয়া যাবে: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ ।

সম্পূর্ণ প্রকাশ: আমি পিক্সেল | বাইটসের মালিক। আমি মনে করি যে আমার স্ক্রিপ্টটি সমস্যার একটি ভাল সমাধান, তাই আমি এটি এখানে পোস্ট করেছি। আপনি যদি আমাকে লিঙ্কটি সরাতে চান তবে দয়া করে একটি মন্তব্য করুন।

Question 3

আপনি সহজভাবে সেট করতে পারেন 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();

স্নিপেট প্রসারিত করুন

প্রতিক্রিয়া টাইপ জন্য ডকুমেন্টেশন

Question 4

দ্রষ্টব্য: আমি কেবল Chrome এ এটি পরীক্ষা করেছি।

এটা XMLHttpRequest- এর .. করার জন্য একটি প্রোটোটাইপ ফাংশন যোগ করা XHR2 ,

মধ্যে XHR 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());
}

সম্পাদনা

আপনি যদি এক্সএইচআর arraybufferবা অন্যান্য প্রতিক্রিয়া প্রকারের সাথে ব্যবহার করার পরিকল্পনা করেন তবে আপনার প্রতিক্রিয়াটি এ string।

যে কোনও ক্ষেত্রে আপনাকে আরও চেক যুক্ত করতে হবে যেমন এটি জসনকে পার্স করতে সক্ষম না হয়।

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

Question 5

আমি মনে করি আপনি ব্যবহার করতে jQuery অন্তর্ভুক্ত করতে হবে responseJSON।

JQuery ব্যতীত, আপনি প্রতিক্রিয়া পাঠ্য চেষ্টা করে দেখতে পছন্দ করতে পারেন eval("("+req.responseText+")");

আপডেট : দয়া করে সম্পর্কিত মন্তব্যটি পড়ুন eval, আপনি ওয়াল দিয়ে পরীক্ষা করতে পারেন, তবে এটি কার্যকারী এক্সটেনশনে ব্যবহার করবেন না।

বা

json_parse ব্যবহার করুন : এটি ব্যবহার করে নাeval

Question 6

এটি যদি কোনও এফএফ এক্সটেনশনের জন্য হয় তবে এনএসআইজেএসএন ব্যবহার করুন :

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