জেএসএনপি কী এবং কেন এটি তৈরি করা হয়েছিল?

2126

আমি জেএসওএন বুঝতে পারি, তবে জেএসএনপি নয়। জেএসএন- তে উইকিপিডিয়ায় নথিটি জেএসওএনপি-র শীর্ষ অনুসন্ধান ফলাফল (ছিল)। এটি এটি বলে:

জেএসএনপি বা "প্যাডিং সহ জেএসওএন" একটি জেএসওএন এক্সটেনশন যেখানে একটি উপসর্গটি কলটির নিজেই একটি ইনপুট আর্গুমেন্ট হিসাবে নির্দিষ্ট করা হয়।

তাই না? কি ফোন? এটা আমার কোন মানে করে না। জেএসএন একটি ডেটা ফর্ম্যাট। কোন কল নেই।

2nd অনুসন্ধান ফলাফলে কিছু লোক নামে থেকে রেমি যারা jsonp সম্পর্কে এই লিখেছে:

জেএসওএনপি হ'ল স্ক্রিপ্ট ট্যাগ ইঞ্জেকশন, যা কোনও সার্ভার থেকে প্রতিক্রিয়ার দ্বারা নির্দিষ্ট একটি ব্যবহারকারী নির্দিষ্ট ফাংশনে passing

আমি এটি বাছাই করতে পারি, তবে এটি এখনও কোনও অর্থ বোধ করে না।

তাহলে জেএসওএনপি কী? কেন এটি তৈরি করা হয়েছিল (এটি কোন সমস্যার সমাধান করে)? এবং কেন আমি এটি ব্যবহার করব?

সংযোজন : আমি সবেমাত্র উইকিপিডিয়াতে জেএসএনপি- র জন্য একটি নতুন পৃষ্ঠা তৈরি করেছি ; এটা এখন উপর ভিত্তি করে, jsonp একটি পরিষ্কার এবং পুঙ্খানুপুঙ্খ বিবরণ নেই jvenema এর উত্তর।

javascript  json  jsonp  terminology 
— Cheeso
সূত্র
29
রেকর্ডের জন্য, আপনি যদি 100% এর সাথে কথা বলছেন এমন সার্ভারকে বিশ্বাস না করেন তবে JSONP ব্যবহার করবেন না। যদি এটি আপোস করা হয় তবে আপনার ওয়েবপৃষ্ঠা তুচ্ছভাবে আপোষ করা হবে।
— নিনজেকেকো
7
এছাড়াও লক্ষ করুন যে সঠিকভাবে প্রয়োগ না করা হলে জেএসএনপি হাইজ্যাক করা যেতে পারে ।
— পেসেরিয়র
3
আমি জেএসওএনপি-র লেখককে কৃতিত্ব দিতে চাই যিনি এর পেছনে দর্শন দিয়েছেন: জেএসএনপি-তে বব আইপোলিটোর সংরক্ষণাগার । তিনি জেএসওএনপিকে "ক্রস-ডোমেন ডেটা আনার জন্য স্ক্রিপ্ট ট্যাগ পদ্ধতির জন্য একটি নতুন প্রযুক্তি অজ্ঞেস্টিক স্ট্যান্ডার্ড পদ্ধতি" হিসাবে পরিচয় করিয়ে দিয়েছেন।
— হার্শ্বচাওলা

উত্তর:

2047

এটি আসলে খুব জটিল নয় ...

বলুন আপনি ডোমেনে আছেন example.comএবং আপনি ডোমেনে একটি অনুরোধ করতে চান example.net। এটি করতে, আপনাকে ডোমেন সীমানা অতিক্রম করতে হবে , বেশিরভাগ ব্রাউজারল্যান্ডে কোনও নম্বর নেই।

এই সীমাবদ্ধতাটিকে বাইপাস করে এমন একটি আইটেম হ'ল <script>ট্যাগ। আপনি যদি একটি স্ক্রিপ্ট ট্যাগ ব্যবহার করেন, তখন ডোমেইন সীমাবদ্ধতা উপেক্ষা করা হয়, কিন্তু স্বাভাবিক পরিস্থিতিতে, আপনি কি সত্যিই না পারেন না ফলাফল সঙ্গে কিছু, স্ক্রিপ্ট শুধু মূল্যায়ন পায়।

প্রবেশ করুন JSONP। আপনি যখন JSONP সক্ষম এমন কোনও সার্ভারে আপনার অনুরোধটি করেন, আপনি একটি বিশেষ প্যারামিটার পাস করেন যা সার্ভারটিকে আপনার পৃষ্ঠা সম্পর্কে কিছুটা বলে। এইভাবে, সার্ভারটি আপনার প্রতিক্রিয়াটিকে এমনভাবে পরিচালনা করতে পারে যাতে তার প্রতিক্রিয়াটি সুন্দরভাবে গুটিয়ে নিতে সক্ষম হয়।

উদাহরণস্বরূপ, বলুন যে সার্ভারটি callbackতার JSONP ক্ষমতা সক্ষম করতে একটি প্যারামিটার কল করবে। তাহলে আপনার অনুরোধটি দেখতে হবে:

http://www.example.net/sample.aspx?callback=mycallback

জেএসএনপি ব্যতীত, এটি কিছু বেসিক জাভাস্ক্রিপ্ট অবজেক্টটি ফিরে আসতে পারে:

{ foo: 'bar' }

তবে, জেএসএনপি-র সাথে, সার্ভারটি যখন "কলব্যাক" প্যারামিটারটি গ্রহণ করে, তখন ফলাফলটি কিছুটা আলাদাভাবে গুটিয়ে রাখে, এরকম কিছু ফিরিয়ে দেয়:

mycallback({ foo: 'bar' });

আপনি দেখতে পাচ্ছেন, এটি এখন আপনার নির্দিষ্ট করা পদ্ধতিটি শুরু করবে। সুতরাং, আপনার পৃষ্ঠায়, আপনি কলব্যাক ফাংশন সংজ্ঞায়িত:

mycallback = function(data){
  alert(data.foo);
};

এবং এখন, যখন স্ক্রিপ্টটি লোড হবে, এটি মূল্যায়ন করা হবে এবং আপনার ফাংশনটি কার্যকর করা হবে। ভয়েলা, ক্রস-ডোমেন অনুরোধ!

এটি জেএসওএনপি-র একটি বড় বিষয়ও লক্ষ্য করার মতো: আপনি অনুরোধটির অনেকগুলি নিয়ন্ত্রণ হারাবেন। উদাহরণস্বরূপ, সঠিক ব্যর্থতার কোডগুলি ফিরে পাওয়ার কোনও "দুর্দান্ত" উপায় নেই। ফলস্বরূপ, আপনি অনুরোধ ইত্যাদি পর্যবেক্ষণ করতে টাইমার ব্যবহার করে শেষ করেন যা সর্বদা কিছুটা সন্দেহজনক। ক্রম ডোমেন স্ক্রিপ্টিং অনুমতি, সুরক্ষা বজায় রাখা এবং অনুরোধের যথাযথ নিয়ন্ত্রণের অনুমতি দেওয়ার জন্য জেএসনরউয়েস্টের প্রস্তাবনাটি একটি দুর্দান্ত সমাধান।

এই দিন (2015), CORS বনাম JSONRequest প্রস্তাবিত পন্থা। জেএসএনপি এখনও পুরানো ব্রাউজার সমর্থনের জন্য দরকারী, তবে সুরক্ষা জরুরী বিষয়গুলি প্রদত্ত, যদি না আপনার কোনও পছন্দ না থাকে তবে CORS ভাল পছন্দ the

— jvenema
সূত্র
180
দয়া করে নোট করুন যে JSONP ব্যবহারের কিছু সুরক্ষা জড়িত রয়েছে। যেহেতু জেএসএনপি সত্যিই জাভাস্ক্রিপ্ট, এটি জাভাস্ক্রিপ্ট যা কিছু করতে পারে তা করতে পারে, তাই আপনাকে জেএসএনপি ডেটার সরবরাহকারীকে বিশ্বাস করা দরকার। : আমি এখানে এটি সম্পর্কে সোম ব্লগ পোস্টে লিখেছি erlend.oftedal.no/blog/?blogid=97
— Erlend
72
জেএসওএনপিতে আসলেই কোনও নতুন সুরক্ষা জড়িত আছে যা <script> ট্যাগে উপস্থিত নেই? স্ক্রিপ্ট ট্যাগের সাহায্যে ব্রাউজারটি অ-ক্ষতিকারক জাভাস্ক্রিপ্ট সরবরাহ করার জন্য সার্ভারকে পুরোপুরি বিশ্বাস করে, যা ব্রাউজার অন্ধভাবে মূল্যায়ন করে। জেএসএনপি কি সেই সত্যটি পরিবর্তন করে? মনে হয় এটা হয় না।
— চিজো
23
না, না। এটি আপনার বিশ্বাস জাভাস্ক্রিপ্ট বিতরণ করার জন্য, একই জিনিসটি JSONP এর জন্য প্রযোজ্য।
— jvenema
15
এটি কীভাবে তথ্য ফিরে আসে তা পরিবর্তন করে আপনি সুরক্ষা সামান্য র‌্যাম্প করতে পারেন তা লক্ষ করার মতো। আপনি যদি স্ক্রিপ্টটিকে সত্যিকারের JSON ফর্ম্যাটে যেমন মাইক্যালব্যাক ('{"foo": "বার"}') তে ফিরে আসেন (নোট করুন যে প্যারামিটারটি এখন একটি স্ট্রিং), তারপরে আপনি নিজেই তথ্যটিকে "পরিষ্কার" করতে পার্স করতে পারেন মূল্যায়নের।
— jvenema
8
সিআরএল হ'ল একটি সার্ভার-সাইড সমাধান, ক্লায়েন্ট-সাইড নয়। তারা দুটি ভিন্ন উদ্দেশ্যে পরিবেশন।
— jvenema
712

XMLHttpRequest একই ডোমেন নীতিটি কাটিয়ে উঠতে JSONP আসলেই একটি সহজ কৌশল । (যেমন আপনি জানেন যে কেউ এজেএক্স (এক্সএমএলএইচটিপিআরকোয়েস্ট) অন্য কোনও ডোমেইনে প্রেরণ করতে পারবেন না ) )

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

কথাটি হ'ল - স্ক্রিপ্ট ট্যাগগুলি XMLHttpRequest এর অনুরূপ ফ্যাশনে ব্যবহার করা যেতে পারে ! এটা দেখ:

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>

তবে এটি কিছুটা অসুবিধাজনক, কারণ স্ক্রিপ্ট ট্যাগ থেকে আমাদের এই অ্যারেটি আনতে হবে । সুতরাং জেএসওএনপি নির্মাতারা সিদ্ধান্ত নিয়েছেন যে এটি আরও ভাল কাজ করবে (এবং এটি):

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

সেখানে my_callback ফাংশন লক্ষ্য করুন ? সুতরাং - যখন জেএসওএনপি সার্ভার আপনার অনুরোধটি গ্রহণ করবে এবং কলব্যাক প্যারামিটারটি সন্ধান করবে - সাদামাটা জেএস অ্যারে ফিরিয়ে দেওয়ার পরিবর্তে এটি ফিরে আসবে:

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

লাভ কোথায় তা দেখুন: এখন আমরা অটোমেটিক কলব্যাক (মাই_ক্যালব্যাক) পাই যা ডেটা পাওয়ার পরে ট্রিগার করা হবে। জেএসএনপি
সম্পর্কে যা জানার দরকার তা এটি: এটি একটি কলব্যাক এবং স্ক্রিপ্ট ট্যাগ।

দ্রষ্টব্য: এগুলি 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>


জেএসএনপি প্যাডিং সহ জেএসওএনকে বোঝায় । (খুব খারাপ নামকরণ করা কৌশল যেমন এর বেশিরভাগ লোক "প্যাডিং" বলে মনে করবে তার সাথে আসলে কোনও সম্পর্ক নেই))

— ThatGuy
সূত্র
34
স্ক্রিপ্ট ট্যাগ ব্যাখ্যার জন্য ধন্যবাদ। জেএসএনপি দ্বারা ক্রস ডোমেন সুরক্ষা নীতি কীভাবে বাইপাস করা হয়েছিল তা অনুধাবন করতে পারছিলাম না। ব্যাখ্যার পরে আমি বিন্দুটি মিস করতে একটি লিট্ট বোকা বোধ করি ...
— এডুয়ার্ড
13
এটি জেভেন্মার উত্তরের একটি খুব পরিপূরক উত্তর - আপনি বুঝতে না পেরে কেন কলব্যাকটি প্রয়োজনীয় ছিল তা আমি বুঝতে পারিনি যে জেসন ডেটা অন্যথায় স্ক্রিপ্ট উপাদানটির মাধ্যমে অ্যাক্সেস করতে হবে।
— ম্যাট
5
এই ধরনের সুস্পষ্ট ব্যাখ্যা জন্য ধন্যবাদ। আমি চাই আমার কলেজের পাঠ্যপুস্তকগুলি আপনার মতো লোকেরা
— লিখেছিল
1
আগেরটির তুলনায় ভাল ব্যাখ্যা। অবশ্যই - আপনার সংক্ষেপে "আপনি সাধারণত জেএস ফাইল লোড করতে ব্যবহার করেন, অন্য কোনও ডোমেন থেকে ডেটা পাওয়ার জন্য জেএসের জন্য? অদ্ভুত লাগছে?" আমার জন্য চোখের ওপেনারও। খুব প্রশংসনীয় উদাহরণ কোড।
— এসআইস্লাম
প্যাডিং আক্ষরিক হতে হবে না। এটি এক রূপক। সুতরাং এর অর্থ "কিছু 'স্পেস' সহ জেএসএন" "হতে পারে। lol
— marvinIsSacul
48

জেএসএনপি একটি "স্ক্রিপ্ট" উপাদান তৈরি করে কাজ করে (হয় HTML মার্কআপে বা জাভাস্ক্রিপ্টের মাধ্যমে ডোমটিতে )োকানো), যা কোনও দূরবর্তী ডেটা পরিষেবা অবস্থানের জন্য অনুরোধ করে। প্রতিক্রিয়াটি এমন একটি জাভাস্ক্রিপ্ট যা আপনার ব্রাউজারে পূর্বনির্ধারিত ফাংশনের নাম সহ প্যারামিটারটি পাস করে যা JSON ডেটা অনুরোধ করা হচ্ছে name যখন স্ক্রিপ্টটি কার্যকর করে, অনুরোধ পৃষ্ঠায় ডেটা গ্রহণ এবং প্রক্রিয়া করার অনুমতি দিয়ে JSON ডেটা সহ ফাংশনটি ডাকা হয়।

আরও পড়ার জন্য দেখুন: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

কোডের ক্লায়েন্ট সাইড স্নিপেট

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

সার্ভার পার্শ্ব টুকরা পিএইচপি কোড

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>
— আজাইন বিবেক
সূত্র
3
লিঙ্কটি এখন কেবল 404 সেকেন্ডে রয়েছে
— কেভিন বিল
এই লিঙ্কটির সামগ্রীটি এখন http://scn.sap.com/commune/developer-center/front-end/blog/2013/07/15/secret-behind-jsonp এ উপলব্ধ ।
— 19
42

কারণ আপনি সার্ভারকে ফিরে আসা জেএসওএন অবজেক্টে একটি উপসর্গ প্রিপেন্ড করতে বলেছেন। যেমন

function_prefix(json_object);

ব্রাউজারটি evalJSON স্ট্রিংটিকে একটি এক্সপ্রেশন হিসাবে "ইনলাইন" করার জন্য । এই কৌশলটি সার্ভারের পক্ষে সরাসরি ক্লায়েন্ট ব্রাউজারে জাভাস্ক্রিপ্ট কোড "ইনজেকশন" করা এবং এটি "একই উত্স" বিধিনিষেধকে বাইপাস করে তোলে।

অন্য কথায়, আপনি ক্রস-ডোমেন ডেটা এক্সচেঞ্জ অর্জন করতে পারেন ।

সাধারণত XMLHttpRequestক্রস-ডোমেন ডেটা-এক্সচেঞ্জের সরাসরি অনুমতি দেয় না (একই ডোমেনে সার্ভারের মাধ্যমে যাওয়ার প্রয়োজন হয়) যেখানে:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `উত্স থেকে আলাদা কোনও ডোমেন থেকে ডেটা অ্যাক্সেস করতে পারে।

লক্ষণীয় বিষয়: যদিও এই ধরণের "কৌশল" চালানোর আগে সার্ভারটিকে "বিশ্বস্ত" হিসাবে বিবেচনা করা উচিত, তবে অবজেক্ট ফর্ম্যাট ইত্যাদির সম্ভাব্য পরিবর্তনের পার্শ্ব-প্রতিক্রিয়াগুলি অন্তর্ভুক্ত থাকতে পারে। যদি কোন function_prefix(যেমন একটি যথাযথ জেএস ফাংশন) জেএসওএন অবজেক্ট গ্রহণ করতে ব্যবহৃত হয় তবে উল্লিখিত ফাংশন প্রত্যাবর্তিত ডেটা গ্রহণ / পরবর্তী প্রক্রিয়া করার আগে চেক সম্পাদন করতে পারে।

— jldupont
সূত্র
"সংযোজন একটি উপসর্গ" বিভ্রান্তিকর :)
— jub0bs
19

ক্রস-ডোমেন স্ক্রিপ্টিং ত্রুটিগুলি ঘুরে দেখার জন্য জেএসওএনপি একটি দুর্দান্ত। আপনি সার্ভারের পাশে AJAX প্রক্সি প্রয়োগ না করেই JS এর ​​সাথে খাঁটিভাবে JSONP পরিষেবা গ্রাস করতে পারেন।

এটি কীভাবে কাজ করে তা দেখতে আপনি b1t.co পরিষেবাটি ব্যবহার করতে পারেন । এটি একটি নিখরচায় JSONP পরিষেবা যা আপনাকে আপনার ইউআরএলগুলি হ্রাস করতে প্ররোচিত করে। পরিষেবার জন্য ইউআরএলটি এখানে ব্যবহার করুন:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

উদাহরণস্বরূপ কলটি, http://b1t.co/Site/api/Extern// MakeUrlWithGet?callback=w যাইহোক জাভাস্ক্রিপ্টনাম &url=google.com

ফিরে আসবে

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

এবং এইভাবে এটি যখন আপনার সিএসসি হিসাবে আপনার জেএসে লোড হয়ে যায়, এটি স্বয়ংক্রিয়ভাবে যা যা জাভাস্ক্রিপ্টনামে চালিত হবে যা আপনার কলব্যাক ফাংশন হিসাবে প্রয়োগ করা উচিত:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

আসলে জেএসএনপি কল করতে, আপনি এটি বেশ কয়েকটি উপায়ে (jQuery ব্যবহার সহ) করতে পারেন তবে এখানে খাঁটি জেএস উদাহরণ রয়েছে:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

ধাপে ধাপে উদাহরণ এবং একটি jsonp ওয়েব পরিষেবা অনুশীলন করতে উপলভ্য: এই পোস্টে

— dardawk
সূত্র
2
আপনার উত্তর পোস্ট করার জন্য ধন্যবাদ! দয়া করে মনে রাখবেন যে উত্তরের প্রয়োজনীয় অংশগুলি এখানে, এই সাইটে আপনার পোস্ট করা উচিত, বা আপনার পোস্ট ঝুঁকিগুলি মুছে ফেলা উচিত FAQ দেখুন যেখানে এটি এমন উত্তরগুলির উল্লেখ করে যেখানে 'লিঙ্কের চেয়ে সবেমাত্র বেশি' more আপনি চাইলে লিঙ্কটি অন্তর্ভুক্ত করতে পারেন তবে কেবল 'রেফারেন্স' হিসাবে। উত্তরটি লিঙ্কটির প্রয়োজন ছাড়াই নিজেরাই দাঁড়ানো উচিত।
— তারিন
14

জেএসএনপি ব্যবহারের জন্য একটি সাধারণ উদাহরণ

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>
— সরথ জোসেফ
সূত্র
8

জেএসএনপি বোঝার আগে আপনার জেএসওএন ফর্ম্যাট এবং এক্সএমএল জানতে হবে। বর্তমানে ওয়েবে সর্বাধিক ব্যবহৃত ডেটা ফর্ম্যাটটি এক্সএমএল, তবে এক্সএমএল খুব জটিল। এটি ব্যবহারকারীকে ওয়েব পৃষ্ঠাগুলিতে এম্বেড থাকা প্রক্রিয়া করতে অসুবিধে করে তোলে।

জাভাস্ক্রিপ্ট সহজেই ডেটা প্রসেসিং প্রোগ্রাম হিসাবেও ডেটা বিনিময় করতে পারে, আমরা জাভাস্ক্রিপ্ট অবজেক্ট অনুসারে শব্দটি ব্যবহার করি এবং একটি সাধারণ ডেটা এক্সচেঞ্জ ফর্ম্যাট তৈরি করি, যা জেএসএন। JSON ডেটা বা জাভাস্ক্রিপ্ট প্রোগ্রাম হিসাবে ব্যবহার করা যেতে পারে।

জেএসএন সরাসরি জাভাস্ক্রিপ্টে এম্বেড করা যেতে পারে, সেগুলি ব্যবহার করে আপনি সরাসরি কিছু জেএসএন প্রোগ্রাম চালিয়ে দিতে পারেন তবে সুরক্ষার সীমাবদ্ধতার কারণে ব্রাউজার স্যান্ডবক্স প্রক্রিয়া ক্রস-ডোমেন জেএসএন কোড প্রয়োগ নিষ্ক্রিয় করে।

মৃত্যুদন্ড কার্যকর হওয়ার পরে জেএসএন পাস করার জন্য, আমরা একটি জেএসওএনপি তৈরি করেছি। জেএসএনপি জাভাস্ক্রিপ্ট কলব্যাক কার্যকারিতা এবং <স্ক্রিপ্ট> ট্যাগ সহ ব্রাউজারের সুরক্ষা সীমাটিকে বাইপাস করে।

সুতরাং সংক্ষেপে এটি ব্যাখ্যা করে যে জেএসএনপি কী, এটি কোন সমস্যার সমাধান করে (কখন এটি ব্যবহার করবে)।

— মার্কাস থর্নটন
সূত্র
4
আমি এটিকে অগ্রাহ্য করেছি কারণ ডিসেম্বরের ১৫ তারিখে এক্সএমএল ওয়েবে সর্বাধিক ব্যবহৃত ডেটা ফর্ম্যাট ছিল বলে আমি বিশ্বাস করি না।
— রবিবিডি
এটি এখনও জবাবদিহি করে না যে কেন জসনপ এর পরিবর্তে জসনপ ব্যবহার করা হয়। এই সমস্ত সুরক্ষা নিষেধাজ্ঞাগুলি কোথা থেকে আসছে? আমরা ক্রস-ডোমেনের জন্য জসনপ না করে জসনপ ব্যবহার করতে পারি কেন?
— মেরুনাস গ্রিনকালাইটিস
4

দুর্দান্ত উত্তরগুলি ইতিমধ্যে দেওয়া হয়েছে, আমার কেবল জাভাস্ক্রিপ্টে কোড ব্লক আকারে আমার টুকরোটি দেওয়া দরকার (আমি ক্রস-আর্জি অনুরোধগুলির জন্য আরও আধুনিক এবং আরও ভাল সমাধান অন্তর্ভুক্ত করব: এইচটিটিপি শিরোনাম সহ কর্স):

jsonp:

1.client_jsonp.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/?callback=?",
    dataType: "jsonp",
    success: function(data) {
        console.log(data);    
    }
});​​​​​​​​​​​​​​​​​​

2.server_jsonp.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {

    var callback = url.parse(req.url, true).query.callback || "myCallback";
    console.log(url.parse(req.url, true).query.callback);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    data = callback + '(' + JSON.stringify(data) + ');';

    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(data);
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

কর্স :

3.client_cors.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/",
    success: function(data) {
        console.log(data);    
    }
});​

4.server_cors.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {
    console.log(req.headers);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    res.writeHead(200, {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    });

    res.end(JSON.stringify(data));
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);
— হুমায়ুন আহমদ
সূত্র
4

টি এল; ডিআর

জেএসএনপি হ'ল সুরক্ষা নিষেধাজ্ঞাকে বাইপাস করার জন্য উদ্ভাবিত একটি পুরানো কৌশল যা আমাদের আলাদা সার্ভারের (আলাদা উত্স * ) থেকে জেএসএন ডেটা পেতে নিষেধ করে ।

কৌতুকটি <script>এমন ট্যাগ ব্যবহার করে কাজ করে যা সেই জায়গা থেকে জেএসএনকে জিজ্ঞাসা করে, যেমন :,{ "user":"Smith" } তবে একটি কার্যক্রমে আবৃত প্রকৃত জেএসএনপি ("প্যাডিং সহ জেএসএন "):

peopleDataJSONP({"user":"Smith"})

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


সমস্যাটি

বলুন আমরা নেভিগেট করছি ourweb.com, এবং আমরা এর থেকে জেএসএন ডেটা (বা কোনও কাঁচা ডেটা) পেতে চাই anotherweb.com। যদি আমরা জিইটি অনুরোধটি (যেমন XMLHttpRequest, কোনও fetchকল $.ajaxইত্যাদি) ব্যবহার করতে পারি তবে আমাদের ব্রাউজারটি আমাদের বলবে যে এই কুরুচিপূর্ণ ত্রুটির সাথে এটি অনুমোদিত নয়:

Chrome CORS কনসোল ত্রুটি

আমরা কীভাবে ডেটা চাই? ঠিক আছে, <script>ট্যাগগুলি এই পুরো সার্ভারের (মূল *) বিধিনিষেধের শিকার হয় না! এ কারণেই আমরা কোনও ত্রুটি ছাড়াই কোনও সার্ভার, যেমন সিডিএন থেকে jQuery বা গুগল ম্যাপের মতো লাইব্রেরি লোড করতে পারি।

গুরুত্বপূর্ণ বিষয় : আপনি যদি এটির বিষয়ে চিন্তা করেন তবে those লাইব্রেরিগুলি আসল, চলমানযোগ্য জেএস কোড (সাধারণত সমস্ত লজিকের অভ্যন্তরে একটি বিশাল ফাংশন)। কিন্তু কাঁচা ডাটা? JSON ডেটা কোড নয় । চালানোর মতো কিছুই নেই; এটি কেবল সরল তথ্য।

অতএব, আমাদের মূল্যবান ডেটা পরিচালনা বা পরিচালনা করার কোনও উপায় নেই। ব্রাউজারটি আমাদের <script>ট্যাগ দ্বারা নির্দেশিত ডেটা ডাউনলোড করবে এবং এটি প্রক্রিয়া করার সময় সঠিকভাবে অভিযোগ করবে:

ডাব্লুটিএফ কি {"user":"Smith"}আমরা এই বোমাটি বোঝাই? এটি কোড নয়। আমি গণনা করতে পারি না, সিনট্যাক্স ত্রুটি!


জেএসএনপি হ্যাক

সেই ডেটা ব্যবহারের পুরানো / হ্যাকি উপায়? এটি কিছু যুক্তি সহ প্রেরণ করার জন্য আমাদের সেই সার্ভারের প্রয়োজন, সুতরাং এটি লোড হওয়ার পরে, ব্রাউজারে আপনার কোডটি ডেটা ব্যবহার করতে সক্ষম হবে। সুতরাং বিদেশী সার্ভারটি একটি জেএস ফাংশনের অভ্যন্তরে আমাদের JSON ডেটা প্রেরণ করে। ডেটা নিজেই সেই ফাংশনের ইনপুট হিসাবে সেট আপ করা হয়। দেখে মনে হচ্ছে:

peopleDataJSONP({"user":"Smith"})

যা এটিকে জেএস কোড করে তোলে আমাদের ব্রাউজারটি অভিযোগ ছাড়াই পার্স করবে! ঠিক যেমন এটি jQuery লাইব্রেরির সাথে করে। এখন, এটির মতো পেতে, ক্লায়েন্টটি এটির জন্য JSONP- বান্ধব সার্ভারটি সাধারণত জিজ্ঞাসা করে:

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

আমাদের ব্রাউজারটি সেই ফাংশনটির নাম সহ JSONP গ্রহণ করবে, সুতরাং আমাদের কোডে আমাদের একই নামের সাথে একটি ফাংশন প্রয়োজন:

const peopleDataJSONP = function(data){
  alert(data.user); // "Smith"
}

বা এই মত, একই ফলাফল:

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

ব্রাউজারটি JSONP ডাউনলোড করবে এবং এটি চালাবে, যা আমাদের ফাংশনটিকে কল করে , যেখানে আর্গুমেন্টটি dataআমাদের JSON হবে। আমরা এখন যা চাই আমাদের ডেটা দিয়েই করতে পারি।


জেএসএনপি ব্যবহার করবেন না, কর্ন ব্যবহার করুন

জেএসএনপি হ'ল কয়েকটি ডাউনসাইড সহ একটি ক্রস-সাইট হ্যাক:

  • আমরা কেবল জিইটি অনুরোধগুলি সম্পাদন করতে পারি
  • যেহেতু এটি একটি জিইটি অনুরোধটি একটি সাধারণ স্ক্রিপ্ট ট্যাগ দ্বারা ট্রিগার করা হয়, তাই আমরা সহায়ক ত্রুটি বা অগ্রগতির তথ্য পাই না
  • সুরক্ষা সংক্রান্ত কিছু উদ্বেগও রয়েছে যেমন আপনার ক্লায়েন্ট জেএস কোড চালানো যা দূষিত পেইডে পরিবর্তিত হতে পারে
  • এটি কেবল JSON ডেটা দিয়েই সমস্যাটি সমাধান করে, তবে একই-উত্স সুরক্ষা নীতি অন্যান্য ডেটার ক্ষেত্রেও প্রযোজ্য (ওয়েবফন্টস, চিত্র / ভিডিও চিত্রের সাথে আঁকা ())
  • এটি খুব মার্জিত বা পাঠযোগ্য নয়।

গ্রহণযোগ্যতাটি হ'ল আজকাল এটি ব্যবহার করার দরকার নেই ।

অন্য সার্ভার থেকে জেএসএন ডেটা পাওয়ার কৌশলটি জেএসএনপি, তবে আমাদের যদি অন্য ধরণের ক্রস-সাইট স্টাফের প্রয়োজন হয় তবে আমরা একই সুরক্ষা নীতি (সেম-অরিজিন) লঙ্ঘন করব।

আপনি এখানে CORS সম্পর্কে পড়া উচিত , কিন্তু এর সংক্ষিপ্তসারটি হ'ল:

ক্রস-অরিজিন রিসোর্স শেয়ারিং (সিওআরএস) এমন একটি প্রক্রিয়া যা অতিরিক্ত উত্স থেকে HTTP শিরোনাম ব্যবহার করে ব্রাউজারগুলিকে একটি উত্স অনুসারে চলমান একটি ওয়েব অ্যাপ্লিকেশন দিতে, আলাদা উত্স থেকে নির্বাচিত সংস্থাগুলিতে অ্যাক্সেস দেয়। একটি ওয়েব অ্যাপ্লিকেশন ক্রস-অরিজিন HTTP অনুরোধ কার্যকর করে যখন এটি এমন কোনও সংস্থার জন্য অনুরোধ করে যার নিজস্ব থেকে আলাদা উত্স (ডোমেন, প্রোটোকল বা পোর্ট) থাকে।


* উত্সটি 3 টি জিনিস দ্বারা সংজ্ঞায়িত করা হয়: প্রোটোকল , পোর্ট এবং হোস্ট । সুতরাং, উদাহরণস্বরূপ, (বিভিন্ন প্রোটোকল) এবং (পৃথক বন্দর) এবং স্পষ্টতই (পৃথক হোস্ট) এর থেকে https://web.comআলাদা উত্সhttp://web.comhttps://web.com:8081https://thatotherweb.net

— কার্লস আলকোলিয়া
সূত্র
1

Jsonp ঘোরা তাদেরকে JSON সঙ্গে প্যাডিং ।

এখানে সাইট, সাথে আছেন মহান উদাহরণ , সহজ ব্যবহার থেকে ব্যাখ্যা এই কৌশলের সবচেয়ে উন্নত করার সমতল জাভাস্ক্রিপ্ট মধ্যে:

w3schools.com / JSONP

আমার আরো পছন্দের কৌশল এক উপরে বর্ণিত হয় ডায়নামিক তাদেরকে JSON ফল , যা URL মাপদণ্ড মধ্যে পিএইচপি ফাইলে তাদেরকে JSON পাঠাতে অনুমতি দেয় , এবং দিন পিএইচপি ফাইল এছাড়াও তথ্য এটি পায় উপর ভিত্তি করে একটি JSON বস্তু আসতে ।

JQuery এর মতো সরঞ্জামগুলিতেও JSONP ব্যবহার করার সুবিধা রয়েছে :

jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);
— simhumileco
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.