javascript - What is JSONP, and why was it created

Mots clés : javascriptjsonjsonpterminologyjavascript

meilleur 4 Réponses javascript - What is JSONP, and why was it created

vote vote

98

http://www.example.net/sample.aspx?callback=mycallback 
{ foo: 'bar' } 
mycallback({ foo: 'bar' }); 
mycallback = function(data){   alert(data.foo); }; 
vote vote

89

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({['some string 1', 'some data', 'whatever data']}); 
<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> 
<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> 
vote vote

72

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

65

peopleDataJSONP({"user":"Smith"}) 
peopleDataJSONP({"user":"Smith"}) 
<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script> 
function peopleDataJSONP(data){   alert(data.user); // "Smith" } 

Questions similaires