এইচটিএমএল / জাভাস্ক্রিপ্ট: এসসিআর সেট সহ স্ক্রিপ্ট ট্যাগে লোড জেএসএন ডেটা কীভাবে অ্যাক্সেস করবেন

Question 1

পৃষ্ঠাটি দৃশ্যমান হওয়ায় আমি ক্লায়েন্টটিতে অ্যাক্সেসযোগ্য করতে চাইলে আমি এই জেএসএন ফাইলটি সার্ভারে উত্পন্ন করি। মূলত আমি যা অর্জন করতে চাই তা হ'ল:

আমার এইচটিএমএল ডকুমেন্টে আমার নীচের ট্যাগটি ঘোষিত হয়েছে:

<script id="test" type="application/json" src="http://myresources/stuf.json">

এর উত্সে উল্লিখিত ফাইলটির জেএসওএন ডেটা রয়েছে। আমি যেমন দেখেছি, স্ক্রিপ্টগুলির সাথে ঘটেছিল ঠিক তেমনই ডেটাও ডাউনলোড করা হয়েছে।

এখন, আমি এটি জাভাস্ক্রিপ্টে কীভাবে অ্যাক্সেস করব? আমার JSON ডেটা পাওয়ার চেষ্টা করার জন্য প্রচুর পদ্ধতি ব্যবহার করে, jQuery সহ এবং ছাড়াও আমি স্ক্রিপ্ট ট্যাগটি অ্যাক্সেস করার চেষ্টা করেছি, তবে কোনওভাবে এটি কাজ করে না। হচ্ছে তার innerHTMLকাজ করে JSON তথ্য লিপিতে ইনলাইন লিখিত হয়েছে। যা এটি ছিল না এবং তা আমি অর্জন করার চেষ্টা করছি না।

পৃষ্ঠা লোডের পরে রিমোট জেএসএন অনুরোধও কোনও বিকল্প নয়, যদি আপনি এটি প্রস্তাব করতে চান তবে।

Question 2

আপনি JSON এর মতো লোড করতে পারবেন না, দুঃখিত।

আমি জানি আপনি ভাবছেন "আমি srcএখানে কেন ব্যবহার করতে পারি না ? আমি এই জাতীয় জিনিস দেখেছি ...":

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

... এটি সহজভাবে বলতে গেলে, এটি ছিল কেবলমাত্র স্ক্রিপ্ট ট্যাগটিকে ডেটা হোল্ডার হিসাবে "আপত্তিজনক" করা হয়েছিল। আপনি সব ধরণের ডেটা দিয়ে এটি করতে পারেন। উদাহরণস্বরূপ, টেম্পলেটগুলি ধরে রাখার জন্য প্রচুর টেম্প্লেটিং ইঞ্জিনগুলি লিভারেজ স্ক্রিপ্ট ট্যাগগুলি দেয় ।

রিমোট ফাইল থেকে আপনার জেএসএন লোড করার জন্য বিকল্পগুলির একটি সংক্ষিপ্ত তালিকা রয়েছে:

ব্যবহার করুন $.get('your.json')বা এই জাতীয় কিছু অন্যান্য এজেএক্স পদ্ধতি।
এমন একটি ফাইল লিখুন যা আপনার জসনের একটি বৈশ্বিক পরিবর্তনশীল সেট করে। (মনে হচ্ছে হকি)
এটি একটি অদৃশ্য আইফ্রেমে টানুন, তারপরে এটি লোড হওয়ার পরে এর সামগ্রীগুলি স্ক্র্যাপ করুন (আমি এই "1997 মোড" বলি)
একটি ভুডু পুরোহিতের সাথে পরামর্শ করুন।

চূড়ান্ত পয়েন্ট:

পৃষ্ঠা লোডের পরে রিমোট জেএসএন অনুরোধও কোনও বিকল্প নয়, যদি আপনি এটি প্রস্তাব করতে চান তবে।

... এটা বোঝা যায় না। আপনার প্রক্রিয়াকরণের সময় একটি এজেএক্স অনুরোধ এবং ব্রাউজার দ্বারা প্রেরিত একটি অনুরোধের মধ্যে পার্থক্যটি <script src="">মূলত কিছুই নয়। তারা দু'জনই রিসোর্সে জিইটি করবে। কোনও স্ক্রিপ্ট ট্যাগ বা একটি এজেএক্স কলের কারণে এটি করা হয়েছে কিনা এইচটিটিপি যত্ন করে না এবং আপনার সার্ভারটিও করবে না।

Question 3

আর একটি সমাধান হ'ল সার্ভার-সাইড স্ক্রিপ্টিং ভাষার ব্যবহার করা এবং জেসন-ডেটা ইনলাইন কেবল অন্তর্ভুক্ত করা। এখানে একটি উদাহরণ যা পিএইচপি ব্যবহার করে:

<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>

উপরের উদাহরণটি প্রকার সহ একটি অতিরিক্ত স্ক্রিপ্ট ট্যাগ ব্যবহার করে application/json। একটি এমনকি সহজ সমাধানটি সরাসরি জাভাস্ক্রিপ্টে জেএসএনকে অন্তর্ভুক্ত করা:

<script>var jsonData = <?php include('stuff.json');?>;</script>

অতিরিক্ত ট্যাগ সহ সমাধানটির সুবিধা হ'ল জাভাস্ক্রিপ্ট কোড এবং জেএসএন ডেটা একে অপরের থেকে পৃথক রাখা হয়েছে।

Question 4

এটি প্রদর্শিত হবে এটি সম্ভব নয়, বা কমপক্ষে সমর্থিত নয়।

থেকে HTML5 এর স্পেসিফিকেশন :

যখন ডেটা ব্লক (স্ক্রিপ্টগুলির বিপরীতে) অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয় , তখন ডেটা অবশ্যই ইনলাইন এম্বেড করা আবশ্যক, প্রকারের বৈশিষ্ট্যটি ব্যবহার করে ডেটা ফর্ম্যাট অবশ্যই দিতে হবে, এসসিআর বৈশিষ্ট্য নির্দিষ্ট করা আবশ্যক নয় এবং স্ক্রিপ্ট উপাদানটির বিষয়বস্তু অবশ্যই মেনে চলতে হবে ব্যবহৃত বিন্যাস জন্য সংজ্ঞায়িত প্রয়োজনীয়তা।

Question 5

যদিও এটি scriptট্যাগ দিয়ে বর্তমানে সম্ভব নয় , iframeযদি এটি একই ডোমেন থেকে আসে তবে এটির মাধ্যমে এটি সম্ভব ।

<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>

উপরেরটি ব্যবহার করতে, কেবল আপনার যা প্রয়োজন তার সাথে প্রতিস্থাপন করুন idএবং srcগুণাবলীটি। id(যা আমরা এই অবস্থায় অনুমান করব সমান mySpecialIdসংরক্ষণ করা হবে না) তথ্য মধ্যে window.jsonData["mySpecialId"]।

অন্য কথায়, প্রতিটি আইফ্রেমের জন্য idযা onloadস্ক্রিপ্টটি ব্যবহার করে এবং ব্যবহার করে সেগুলিতে নির্দিষ্ট ডেটার মধ্যে সিঙ্ক্রোনজ করে সেই ডেটাটি সিঙ্ক্রোনসিভ করে window.jsonDataবস্তুটিতে লোড করা idহবে।

আমি মজা করার জন্য এবং যে এটি "সম্ভব 'কিন্তু আমি দেখানোর জন্য এটা করেছে না সুপারিশ করছি যে এটি ব্যবহৃত হবে।

এখানে এমন একটি বিকল্প রয়েছে যা পরিবর্তে কলব্যাক ব্যবহার করে।

<script>
    function someCallback(data){
        /** do something with data */
        console.log(data);

    }
    function jsonOnLoad(callback){
        const raw = this.contentWindow.document.body.textContent.trim();
        try {
          const data = JSON.parse(raw);
          /** do something with data */
          callback(data);
        }catch(e){
          console.warn(e.message);
        }
        this.remove();
    }
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>

ক্রোমে পরীক্ষিত এবং ফায়ারফক্সে কাজ করা উচিত। আইই বা সাফারি সম্পর্কে অনিশ্চিত।

Question 6

আমি বেনের সাথে একমত আপনি সাধারণ JSON ফাইল লোড / আমদানি করতে পারবেন না।

তবে আপনি যদি একেবারে এটি করতে চান এবং json ফাইল আপডেট করার নমনীয়তা পান তবে আপনি এটি করতে পারেন

আমার- json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

index.html

<head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>

Question 7

এই উত্তরটি দেখুন: https://stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Question 8

আপনার যদি অন্য ডোমেইন থেকে জেএসএন লোড করতে হয়: http://en.wikedia.org/wiki/JSONP
তবে এক্সএসএসআই এর সম্ভাব্য আক্রমণ সম্পর্কে সচেতন হন: https://www.scip.ch/en/?labs.20160414

যদি এটি একই ডোমেন তাই কেবল অ্যাজাক্স ব্যবহার করুন।

Question 9

আপনার স্ক্রিপ্ট ফাইলে এই জাতীয় কিছু রাখুন json-content.js

var mainjson = { your json data}

তারপরে স্ক্রিপ্ট ট্যাগ থেকে কল করুন

<script src="json-content.js"></script>

তারপরে আপনি এটি পরবর্তী স্ক্রিপ্টে ব্যবহার করতে পারেন

<script>
console.log(mainjson)
</script>

Question 10

জাভাস্ক্রিপ্টের মধ্যে হ'ল জসনটি ব্যবহারের জন্য অন্য একটি বিকল্প। এটি জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন হিসাবে আপনি ঠিক আপনার জাস্টস নোটেশন দিয়ে সরাসরি সরাসরি অবজেক্ট তৈরি করতে পারেন। আপনি যদি এটি একটি .js ফাইলে সংরক্ষণ করেন তবে আপনি নিজের অ্যাপ্লিকেশনটিতে অবজেক্টটি ব্যবহার করতে পারেন। এটি আমার জন্য একটি দরকারী বিকল্প ছিল যখন আমার কিছু স্থির জসন ডেটা ছিল যা আমি আমার অ্যাপ্লিকেশনটির বাকী অংশ থেকে আলাদা করে একটি ফাইলে ক্যাশে রাখতে চেয়েছিলাম।

    //Just hard code json directly within JS
    //here I create an object CLC that represents the json!
    $scope.CLC = {
        "ContentLayouts": [
            {
                "ContentLayoutID": 1,
                "ContentLayoutTitle": "Right",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png",
                "ContentLayoutIndex": 0,
                "IsDefault": true
            },
            {
                "ContentLayoutID": 2,
                "ContentLayoutTitle": "Bottom",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png",
                "ContentLayoutIndex": 1,
                "IsDefault": false
            },
            {
                "ContentLayoutID": 3,
                "ContentLayoutTitle": "Top",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png",
                "ContentLayoutIndex": 2,
                "IsDefault": false
            }
        ]
    };