මට JSON තේරෙනවා, නමුත් JSONP නොවේ. JSON පිළිබඳ විකිපීඩියා ලේඛනය (JSONP) සඳහා ඉහළම සෙවුම් ප්‍රති result ලය විය. එය මෙසේ කියයි:

JSONP හෝ "JSON with padding" යනු JSON දිගුවකි, එහි උපසර්ගය ඇමතුමේ ආදාන තර්කයක් ලෙස දක්වා ඇත.

හහ්? මොන ඇමතුමක්ද? ඒක මට කිසිම තේරුමක් නැහැ. JSON යනු දත්ත ආකෘතියකි. ඇමතුමක් නැත.

මෙම 2 වන සෙවීම් නම් මනුස්සයෙක් වෙතින් වන Remy JSONP ගැන මේ ලියන:

JSONP යනු ස්ක්‍රිප්ට් ටැග් ඉන්ජෙක්ෂන් වන අතර එය සේවාදායකයෙන් ලැබෙන ප්‍රතිචාරය පරිශීලක නිශ්චිත ශ්‍රිතයකට යවයි.

මට එය තේරුම් ගත හැකිය, නමුත් එය තවමත් තේරුමක් නැත.

ඉතින් JSONP යනු කුමක්ද? එය නිර්මාණය කළේ ඇයි (එය විසඳන්නේ කුමන ගැටලුවද)? ඇයි මම එය භාවිතා කරන්නේ?

දරන පරිපූරකයේ : මම විසින් නිර්මාණය කර ඇති JSONP සඳහා නව පිටුවක් විකිපීඩියා, නිදහස් විශ්වකෝෂය පිළිබඳ; එය දැන් Jvenema ගේ පිළිතුර මත පදනම්ව JSONP පිළිබඳ පැහැදිලි හා සවිස්තරාත්මක විස්තරයක් ඇත .

එය ඇත්ත වශයෙන්ම එතරම් සංකීර්ණ නොවේ ...

ඔබ වසමේ සිටින බව පවසන්න, ඔබට වසම example.comසඳහා ඉල්ලීමක් කිරීමට අවශ්‍යය example.net. එසේ කිරීමට නම්, ඔබට අවශ්ය හරස් වසම මායිම් වූ කිසිදු-කිසිදු browserland බොහෝ ය.

මෙම සීමාව මඟහරින එක් අයිතමයක් <script>ටැග් වේ. ඔබ තිර රචනය ටැගය භාවිතා කරන විට, වසම් සීමාවක් නොතකා, නමුත්, සාමාන්ය තත්වයන් යටතේ, ඔබ ඇත්තටම නොහැකි කරන්න ප්රතිඵල කිසිවක්, ස්ක්රිප්ට් පමණක් ඇගයීමට ලක්වෙයි.

ඇතුලත් කරන්න JSONP. ඔබ JSONP සක්‍රීය කර ඇති සේවාදායකයක් වෙත ඔබගේ ඉල්ලීම කළ විට, ඔබ විශේෂ පරාමිතියක් සම්මත කර ඔබගේ පිටුව ගැන සේවාදායකයාට ටිකක් කියයි. එමඟින්, ඔබේ පිටුවට හැසිරවිය හැකි අයුරින් එහි ප්‍රතිචාරය මනාව ආවරණය කිරීමට සේවාදායකයාට හැකි වේ.

උදාහරණයක් ලෙස, සේවාදායකය callbackඑහි JSONP හැකියාවන් සක්‍රීය කිරීම සඳහා කැඳවන ලද පරාමිතියක් අපේක්ෂා කරන බව පවසන්න. එවිට ඔබගේ ඉල්ලීම මෙසේ වනු ඇත:

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

JSONP නොමැතිව, මෙය මූලික ජාවාස්ක්‍රිප්ට් වස්තුවක් නැවත ලබා දෙනු ඇත.

{ foo: 'bar' }

කෙසේ වෙතත්, JSONP සමඟ, සේවාදායකයාට "ඇමතුම් ආපසු" පරාමිතිය ලැබුණු විට, එය ප්‍රති result ලය ටිකක් වෙනස් ලෙස ඔතා, මේ වගේ දෙයක් ආපසු ලබා දෙයි:

mycallback({ foo: 'bar' });

ඔබට පෙනෙන පරිදි, එය දැන් ඔබ නියම කළ ක්‍රමයට ආයාචනා කරනු ඇත. එබැවින්, ඔබගේ පිටුවේ, ඔබ ඇමතුම් ලබා ගැනීමේ කාර්යය අර්ථ දක්වයි:

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

දැන්, ස්ක්‍රිප්ට් පූරණය වූ විට, එය ඇගයීමට ලක් කෙරෙන අතර, ඔබේ ක්‍රියාකාරිත්වය ක්‍රියාත්මක වේ. Voila, හරස් වසම් ඉල්ලීම්!

JSONP සමඟ ඇති එක් ප්‍රධාන ගැටලුවක් ද සඳහන් කිරීම වටී: ඔබට ඉල්ලීම පිළිබඳ විශාල පාලනයක් අහිමි වේ. උදාහරණයක් ලෙස, නිසි අසාර්ථක කේත නැවත ලබා ගැනීමට "හොඳ" ක්‍රමයක් නොමැත. එහි ප්‍රති As ලයක් වශයෙන්, ඔබ ඉල්ලීම අධීක්ෂණය කිරීම සඳහා ටයිමර් භාවිතා කිරීම අවසන් කරයි, එය සැමවිටම තරමක් සැක සහිත ය. හරස් වසම් ස්ක්‍රිප්ටින් කිරීමට, ආරක්ෂාව පවත්වා ගැනීමට සහ ඉල්ලීම නිසි ලෙස පාලනය කිරීමට ඉඩ දීම සඳහා JSONRequest සඳහා වන යෝජනාව හොඳ විසඳුමකි.

මේ දිනවල (2015), CORS යනු JSONRequest එදිරිව නිර්දේශිත ප්‍රවේශයයි. පැරණි බ්‍රව්සර් සහාය සඳහා JSONP තවමත් ප්‍රයෝජනවත් වේ, නමුත් ආරක්ෂක ඇඟවුම් ලබා දී ඇත, ඔබට විකල්පයක් නොමැති නම් CORS වඩා හොඳ තේරීම වේ.

JSONP යනු XMLHttpRequest එකම වසම් ප්‍රතිපත්තිය මඟහරවා ගැනීම සඳහා සරල උපක්‍රමයකි . (ඔබ දන්නා පරිදි කෙනෙකුට වෙනත් වසමකට AJAX (XMLHttpRequest) ඉල්ලීම යැවිය නොහැක .)

එබැවින් - XMLHttpRequest භාවිතා කරනවා වෙනුවට, අපි සාමාන්‍යයෙන් js ගොනු පැටවීම සඳහා භාවිතා කරන ස්ක්‍රිප්ට් HTML ටැග් භාවිතා කළ යුතුය, js වෙනත් වසමකින් දත්ත ලබා ගැනීම සඳහා. අමුතුයි වගේද?

කාරණය නම් - 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>

කෙසේ වෙතත් මෙය ටිකක් අපහසුයි, මන්ද අපට මෙම අරාව ස්ක්‍රිප්ට් ටැගයෙන් ලබා ගත යුතුය. එබැවින් JSONP නිර්මාණකරුවන් තීරණය කළේ මෙය වඩා හොඳින් ක්‍රියාත්මක වනු ඇති බවයි (සහ එය):

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

එහි ඇති my_callback ක්‍රියාකාරිත්වය සැලකිල්ලට ගන්න? ඉතින් - JSONP සේවාදායකයාට ඔබගේ ඉල්ලීම ලැබී ඇමතුම් ලබා ගැනීමේ පරාමිතිය සොයාගත් විට - සරල js අරාව නැවත ලබා දෙනවා වෙනුවට එය මෙය ලබා දෙනු ඇත:

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 සමඟ Padding ය . (ඉතා දුර්වල ලෙස නම් කරන ලද තාක්‍ෂණය, බොහෝ දෙනා “පැඩින්” ලෙස සිතන දෙයට සැබවින්ම කිසිදු සම්බන්ධයක් නැති නිසා.)

JSONP ක්‍රියා කරන්නේ දුරස්ථ දත්ත සේවා ස්ථානයකට ඉල්ලන “ස්ක්‍රිප්ට්” අංගයක් (HTML සලකුණු කිරීමේදී හෝ ජාවාස්ක්‍රිප්ට් හරහා DOM තුළට ඇතුළත් කිරීමෙනි). ප්‍රතිචාරය යනු ඔබගේ බ්‍රව්සරයට පෙර නිර්වචනය කරන ලද ශ්‍රිතයේ නම සහ පරාමිතිය සම්මත කර ඇති ජාවාස්ක්‍රිප්ට් එකක් වන අතර එය JSON දත්ත ඉල්ලා ඇත. ස්ක්‍රිප්ට් ක්‍රියාත්මක වන විට, ශ්‍රිතය 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 කේතයේ සේවාදායකය

<?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 . ")";
?>

ආපසු ලබා දුන් JSON වස්තුවට උපසර්ගයක් සැකසීමට ඔබට සේවාදායකයාගෙන් ඉල්ලා සිටිය හැකි බැවිනි. උදා

function_prefix(json_object);

බ්‍රව්සරය සඳහා eval ප්‍රකාශනයක් ලෙස JSON නූල “පේළිගත කිරීම” සඳහා. මෙම උපක්‍රමය මඟින් සේවාදායකයාට ජාවාස්ක්‍රිප්ට් කේතය කෙලින්ම සේවාලාභී බ්‍රව්සරයේ “එන්නත්” කිරීමට හැකි වන අතර මෙය “එකම මූලාරම්භය” සීමාවන් ඉක්මවා යයි.

වෙනත් වචන වලින් කිවහොත්, ඔබට හරස් වසම් දත්ත හුවමාරුව සාක්ෂාත් කරගත හැකිය .

සාමාන්‍යයෙන්, XMLHttpRequestහරස් වසම් දත්ත හුවමාරුවට කෙලින්ම ඉඩ නොදේ (යමෙකුට එකම වසමේ සේවාදායකයක් හරහා යා යුතුය) එහෙත්:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `කෙනෙකුට මූලාරම්භයට වඩා වෙනස් වසමකින් දත්ත ලබා ගත හැකිය.

සඳහන් කිරීම වටී: එවැනි "උපක්‍රමයක්" කිරීමට පෙර සේවාදායකය "විශ්වාසදායක" ලෙස සැලකිය යුතු වුවද, වස්තු ආකෘතියේ වෙනස් විය හැකි අතුරු ආබාධ අඩංගු විය හැකිය. නම්, එවැනි function_prefix(එනම්, නිසි JS ක්රියාත්මක) එම JSON වස්තුව ලබා ගැනීමට භාවිතා වන අතර, මෙම උත්සවය පිළිගැනීම / යළි දත්ත තවදුරටත් සැකසීම පෙර චෙක්පත් ඉටු කළ හැකි බවයි.

හරස් වසම් ස්ක්‍රිප්ටින් දෝෂ මඟහරවා ගැනීමට JSONP බොහෝ දුරයි. සේවාදායක පැත්තේ AJAX ප්‍රොක්සියක් ක්‍රියාත්මක නොකර ඔබට JSONP සේවාවක් JS සමඟ තනිකරම පරිභෝජනය කළ හැකිය.

එය ක්‍රියාත්මක වන්නේ කෙසේදැයි බැලීමට ඔබට b1t.co සේවාව භාවිතා කළ හැකිය . මෙය නොමිලේ JSONP සේවාවක් වන අතර එය ඔබගේ URL අවම කිරීමට ඉඩ දෙයි. සේවාව සඳහා භාවිතා කළ යුතු url එක මෙන්න:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback= LeisresresultsCallBack ]&url= EisesescapedUrlToMinify]

උදාහරණයක් ලෙස ඇමතුම, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&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);
}

ඇත්ත වශයෙන්ම JSONP ඇමතුම ලබා ගැනීම සඳහා, ඔබට එය ක්‍රම කිහිපයක් ගැන කළ හැකිය (jQuery භාවිතා කිරීම ඇතුළුව) නමුත් මෙහි පිරිසිදු JS උදාහරණයක් ඇත:

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 වෙබ් සේවාවක් ලබා ගත හැකිය: මෙම ලිපිය

JSONP භාවිතය සඳහා සරල උදාහරණයක්.

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;

    ?>    

JSONP තේරුම් ගැනීමට පෙර, ඔබ JSON ආකෘතිය සහ XML දැන සිටිය යුතුය. දැනට වෙබයේ වැඩිපුරම භාවිතා වන දත්ත ආකෘතිය XML වේ, නමුත් XML ඉතා සංකීර්ණයි. වෙබ් පිටු තුළට කාවැද්දීමට පරිශීලකයින්ට අපහසුතාවයක් ඇති කරයි.

ජාවාස්ක්‍රිප්ට් සෑදීම සඳහා දත්ත සැකසුම් වැඩසටහන ලෙස පවා පහසුවෙන් දත්ත හුවමාරු කර ගත හැකි අතර, අපි ජාවාස්ක්‍රිප්ට් වස්තු අනුව වචන භාවිතා කර සරල දත්ත හුවමාරු ආකෘතියක් නිර්මාණය කළෙමු, එය JSON වේ. JSON දත්ත ලෙස හෝ ජාවාස්ක්‍රිප්ට් වැඩසටහනක් ලෙස භාවිතා කළ හැකිය.

JSON කෙලින්ම ජාවාස්ක්‍රිප්ට් තුළට කාවැද්දිය හැකිය, ඒවා භාවිතා කිරීමෙන් ඔබට සමහර JSON වැඩසටහන් කෙලින්ම ක්‍රියාත්මක කළ හැකිය, නමුත් ආරක්ෂක බාධක හේතුවෙන් බ්‍රව්සරයේ සැන්ඩ්බොක්ස් යාන්ත්‍රණය හරස් වසම් JSON කේත ක්‍රියාත්මක කිරීම අක්‍රීය කරයි.

ක්‍රියාත්මක කිරීමෙන් පසු JSON සම්මත කර ගැනීම සඳහා, අපි JSONP එකක් සංවර්ධනය කළෙමු. JSONP ජාවාස්ක්‍රිප්ට් ඇමතුම් ආපසු ගැනීමේ ක්‍රියාකාරිත්වය සහ <ස්ක්‍රිප්ට්> ටැගය සමඟ බ්‍රව්සරයේ ආරක්ෂක සීමාවන් මඟ හරියි.

එබැවින් කෙටියෙන් එය JSONP යනු කුමක්ද, එය විසඳන්නේ කුමන ගැටළුවද (එය භාවිතා කළ යුත්තේ කවදාද) යන්න පැහැදිලි කරයි.

ටීඑල්; ඩී.ආර්

JSONP යනු වෙනත් සේවාදායකයකින් (වෙනස් සම්භවයක් * ) JSON දත්ත ලබා ගැනීම තහනම් කරන ආරක්ෂක සීමාව මඟහරවා ගැනීම සඳහා නිර්මාණය කරන ලද පැරණි උපක්‍රමයකි .

උපක්‍රමය ක්‍රියාත්මක <script>වන්නේ එම ස්ථානයෙන් JSON ඉල්ලා සිටින ටැගයක් භාවිතා කිරීමෙනි , උදා :,{ "user":"Smith" } නමුත් ශ්‍රිතයකින් ඔතා ඇති සැබෑ JSONP ("JSON with Padding "):

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

මෙම පෝරමයෙන් එය ලැබීම අපගේ peopleDataJSONPශ්‍රිතය තුළ දත්ත භාවිතා කිරීමට අපට හැකියාව ලබා දෙයි . JSONP නරක පුරුද්දකි , එය භාවිතා නොකරන්න (පහත කියවන්න)

ගැටලුව වන්නේ

අපි සැරිසැරූ බව පවසන්න, අපට ourweb.comJSON දත්ත (හෝ ඇත්තෙන්ම ඕනෑම අමු දත්ත) ලබා ගැනීමට අවශ්‍යය anotherweb.com. අපි ලබා ගන්න ඉල්ලීමක් (වගේ භාවිතා කිරීමට නම් XMLHttpRequest, එය fetchඇමතුමක් $.ajax, ආදිය), අපගේ වෙබ් බ්රව්සරය මේ කැත දෝෂය සමඟ අවසර නැහැ අපිට කියන්න ඇත:

අපට අවශ්‍ය දත්ත ලබා ගන්නේ කෙසේද? හොඳයි, <script>ටැග්ස් මෙම සමස්ත සේවාදායකයේ (සම්භවය *) සීමාවට යටත් නොවේ! CDN වැනි ඕනෑම සේවාදායකයකින් jQuery හෝ ගූගල් සිතියම් වැනි පුස්තකාලයක් කිසිදු දෝෂයකින් තොරව පූරණය කළ හැක්කේ එබැවිනි.

වැදගත් කරුණ : ඔබ ඒ ගැන සිතන්නේ නම්, එම පුස්තකාල සත්‍ය, ක්‍රියාත්මක කළ හැකි JS කේතය (සාමාන්‍යයෙන් ඇතුළත ඇති සියලුම තර්කනයන් සහිත දැවැන්ත කාර්යයකි). අමු දත්ත? JSON දත්ත කේතය නොවේ . ධාවනය කිරීමට කිසිවක් නැත; එය සරල දත්ත පමණි.

එබැවින් අපගේ වටිනා දත්ත හැසිරවීමට හෝ හැසිරවීමට ක්‍රමයක් නොමැත. බ්‍රව්සරය අපගේ <script>ටැගය මඟින් පෙන්වා ඇති දත්ත බාගත කරනු ඇති අතර එය සැකසීමේදී එය නිවැරදිව පැමිණිලි කරනු ඇත:

wtf {"user":"Smith"}අපි පැටවූ මේ කපටිකමද ? එය කේතය නොවේ. මට ගණනය කළ නොහැක, සින්ටැක්ස් දෝෂයකි!

JSONP හැක්

එම දත්ත භාවිතා කිරීමට පැරණි / අනවසර ක්‍රමය? යම් තර්කනයකින් එය යැවීමට අපට එම සේවාදායකය අවශ්‍යයි, එබැවින් එය පටවන විට, බ්‍රව්සරයේ ඇති ඔබේ කේතයට එම දත්ත භාවිතා කිරීමට හැකි වේ. එබැවින් විදේශීය සේවාදායකය අපට JS ශ්‍රිතයක් තුළ JSON දත්ත යවයි. දත්ත එම ශ්‍රිතයේ ආදානය ලෙස සකසා ඇත. එය මේ වගේ ය:

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

එය කරයි කේතය JS අපගේ වෙබ් බ්රව්සරය පැමිණිලි තොරව විග්රහ කළ ඇත! හරියටම jQuery පුස්තකාලය හා සමානයි. දැන්, එය එලෙස ලබා ගැනීම සඳහා, සේවාදායකයා ඒ සඳහා JSONP හිතකාමී සේවාදායකය "අසයි", සාමාන්‍යයෙන් මේ ආකාරයට සිදු කරයි:

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

අපගේ බ්‍රව්සරයට එම ශ්‍රිත නාමය සමඟ JSONP ලැබෙනු ඇත, එබැවින් අපගේ කේතයේ එකම නමක් සහිත ශ්‍රිතයක් අවශ්‍ය වේ.

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

හෝ මේ හා සමාන ප්‍රති come ල:

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

බ්‍රව්සරය JSONP බාගත කර එය ක්‍රියාත්මක කරනු ඇත, එය අපගේ ශ්‍රිතය ලෙස හැඳින්වේ , එහිදී තර්කය dataඅපගේ JSON වනු ඇත. අපට අවශ්‍ය ඕනෑම දෙයක් දැන් අපගේ දත්ත සමඟ කළ හැකිය.

JSONP භාවිතා නොකරන්න, CORS භාවිතා කරන්න

JSONP යනු අවාසි කිහිපයක් සහිත හරස් අඩවි හැක් කිරීමකි:

• අපට කළ හැක්කේ GET ඉල්ලීම් පමණි
• එය සරල ස්ක්‍රිප්ට් ටැගයකින් අවුලුවන ලද GET ඉල්ලීමක් බැවින්, අපට ප්‍රයෝජනවත් දෝෂ හෝ ප්‍රගති තොරතුරු නොලැබේ
• ඔබගේ සේවාදායක ජේඑස් කේතය තුළ අනිෂ්ට ගෙවීමක් ලෙස වෙනස් කළ හැකි සමහර ආරක්ෂක ගැටළු තිබේ
• එය විසඳන්නේ JSON දත්ත සමඟ පමණි, නමුත් එකම-ප්‍රභව ආරක්ෂණ ප්‍රතිපත්තිය අනෙකුත් දත්ත වලට අදාළ වේ (වෙබ් ෆොන්ට්ස්, පින්තූර / වීඩියෝ අදින ලද ඉමේජ් () ...)
• එය ඉතා අලංකාර හෝ කියවිය නොහැකි ය.

රැගෙන යාම යනු වර්තමානයේ එය භාවිතා කිරීමේ අවශ්‍යතාවයක් නොමැති වීමයි .

JSONP යනු වෙනත් සේවාදායකයකින් JSON දත්ත ලබා ගැනීමේ උපක්‍රමයයි, නමුත් අපට වෙනත් ආකාරයේ හරස් අඩවි දේවල් අවශ්‍ය නම් අපි එකම ආරක්ෂක මූලධර්මය (එකම-සම්භවය) උල්ලං will නය කරන්නෙමු.

ඔබ මෙහි CORS ගැන කියවිය යුතුය , නමුත් එහි සාරාංශය:

හරස්-ප්‍රභව සම්පත් හුවමාරුව (CORS) යනු එක් මූලාරම්භයකින් ක්‍රියාත්මක වන වෙබ් යෙදුමක් ලබා දෙන ලෙස බ්‍රව්සර්ට පැවසීමට අතිරේක HTTP ශීර්ෂයන් භාවිතා කරන යාන්ත්‍රණයකි, තෝරාගත් සම්පත් වෙනත් ප්‍රභවයකින් ලබා ගත හැකිය. වෙබ් යෙදුමක් තමන්ගේම වෙනත් ප්‍රභවයක් (වසමක්, ප්‍රොටෝකෝලයක් හෝ වරායක්) ඇති සම්පතක් ඉල්ලා සිටින විට හරස් සම්භවයක් ඇති HTTP ඉල්ලීමක් ක්‍රියාත්මක කරයි.

* සම්භවය කරුණු 3 කින් අර්ථ දක්වා ඇත: ප්‍රොටෝකෝලය , වරාය සහ ධාරකය . උදාහරණයක් ලෙස, (වෙනස් ප්‍රොටෝකෝලය) සහ (වෙනස් වරාය) සහ පැහැදිලිවම (වෙනස් ධාරක) https://web.comට වඩා වෙනස් සම්භවයකි.http://web.comhttps://web.com:8081https://thatotherweb.net

හොඳ පිළිතුරු දැනටමත් ලබා දී ඇත, මට මගේ කොටස ජාවාස්ක්‍රිප්ට් හි කේත බ්ලොක් ස්වරූපයෙන් ලබා දිය යුතුය (හරස් සම්භව ඉල්ලීම් සඳහා වඩාත් නවීන හා වඩා හොඳ විසඳුමක් ද මම ඇතුළත් කරමි: HTTP ශීර්ෂයන් සහිත CORS):

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);

CORS :

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);

JSONP සඳහා කි්රයා JSON සමග පිරවුම .

මෙන්න සමඟ, වෙබ් අඩවිය වේ මහා උදාහරණ , සරලතම භාවිතා කිරීම පැහැදිලි කිරීමක් සඳහා මෙම තාක්ෂණය ඉතා උසස් කිරීමට තලය JavaScript දී:

w3schools.com / JSONP

ඉහත විස්තර කර ඇති මගේ වඩාත් ප්‍රියතම ශිල්පීය ක්‍රමවලින් එකක් වන්නේ ඩයිනමික් JSON ප්‍රති ult ලය , එය URL පරාමිතියෙහි ඇති PHP ගොනුවට JSON යැවීමට ඉඩ සලසයි , සහ PHP ගොනුවට 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)
);