ตัวอย่างพื้นฐานของการใช้. jax () กับ JSONP?

187

โปรดใครช่วยฉันหาวิธีเริ่มต้นกับ JSONP

รหัส:

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

ซอ: http://jsfiddle.net/R7EPt/6/

ควรสร้างการแจ้งเตือนเท่าที่ฉันสามารถทำงานได้จากเอกสาร: ไม่ใช่ (แต่ไม่ได้ทำข้อผิดพลาดใด ๆ )

ขอบคุณ

ajax json jsonp

— simon
แหล่งที่มา

$ .ajax ({url: pm_url, dataType: 'jsonp', jsonpCallback: ภาพถ่าย, jsonp: false,}); คุณป้อนรูปภาพเป็นสตริง

— wOlVeRiNe

388

JSONPเป็นเพียงกลลวงที่จะเอาชนะนโยบายโดเมนเดียวกันของXMLHttpRequest (ดังที่คุณทราบว่าไม่สามารถส่งคำขอAJAX (XMLHttpRequest)ไปยังโดเมนอื่นได้)

ดังนั้น - แทนที่จะใช้XMLHttpRequestเราต้องใช้แท็ก HTMLl ของสคริปต์ , แท็กที่คุณมักใช้โหลดไฟล์ JS, เพื่อให้ 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 สคริปต์เหล่านี้ไม่ใช่สคริปต์ที่ใช้งานจริง

การสาธิต RAW JavaScript (ฟีด Twitter แบบง่ายโดยใช้ 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 พื้นฐาน (ฟีด Twitter แบบง่ายโดยใช้ 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 (เทคนิคที่มีชื่อไม่ดีนักเนื่องจากไม่มีส่วนเกี่ยวข้องกับสิ่งที่คนส่วนใหญ่คิดว่าเป็น“ ช่องว่างภายใน”)

— ThatGuy
แหล่งที่มา

3

คำตอบนี้ค่อนข้างล้าสมัยเพราะตอนนี้เบราว์เซอร์รองรับAccess-Control-Allow-Originส่วนหัวที่อนุญาตให้มีการโทรอาแจ็กซ์ปกติไปยังบางโดเมนข้ามโดเมน

— jfriend00

โปรดทราบว่าคุณไม่สามารถทำแบบฟอร์ม POST ด้วย JSONP ข้อมูลเพิ่มเติมได้ที่นี่: markhneedham.com/blog/2009/08/27/…

— thdoan

4

คุณต้องพิจารณาอะไรบ้างหากคุณต้องการทำให้สคริปต์เหล่านี้พร้อมใช้งานจริง

— แขกรับเชิญ

1

ว้าวนี่มีประโยชน์จริงๆ! ในที่สุดฉันก็รู้ว่า JSONP คืออะไรและทำงานอย่างไร!

— Jerry Liu

146

มีวิธีที่ง่ายยิ่งขึ้นในการทำงานกับ JSONP โดยใช้ jQuery

$.getJSON("http://example.com/something.json?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

?ในส่วนท้ายของ URL บอก jQuery ว่ามันเป็นคำขอ JSONP แทน JSON jQuery ลงทะเบียนและเรียกฟังก์ชั่นการโทรกลับโดยอัตโนมัติ

สำหรับรายละเอียดเพิ่มเติมดูที่เอกสาร jQuery.getJSON

— Petr Peller
แหล่งที่มา

2

@ PetrPeller ดูเหมือนว่าจะดี แต่ฉันดูเหมือนจะไม่ทำผลิตภัณฑ์ออกมา คุณเคยเห็นสิ่งนี้ไหม? JSFiddleมันแจ้งเตือนไม่มีข้อมูล บางทีฉันอาจพลาดบางสิ่งบางอย่าง

— tika

เซิร์ฟเวอร์ตอบสนอง @xDNP JSONP ต้องได้รับการสนับสนุน เซิร์ฟเวอร์ของคุณดูเหมือนจะไม่รองรับเพราะฉันไม่เห็นการโทรกลับเพิ่มที่นี่: mylivecanvas.com/api/… . นอกจากนี้คุณควรใช้&callback=?เนื่องจากไม่ใช่พารามิเตอร์ตัวแรกในกรณีของคุณ

— Petr Peller

1

@ PetrPeller ฉันสนใจโซลูชันของคุณอย่างมาก แต่นั่นไม่ได้ผลกับฉัน ฉันไม่ต้องการโพสต์คำถามใหม่ แต่ไม่ได้ช่วยฉัน อะไรไม่ได้ดูเหมือนจะสนับสนุนโดยเซิร์ฟเวอร์หมายถึง? ฉันควรทำอย่างไรดี? และคุณสามารถให้ URL ที่สมบูรณ์ที่ใช้กับเซิร์ฟเวอร์ของฉันได้หรือไม่ ฉันจะขอบคุณคุณ ฉันต้องการการกำหนดค่าเซิร์ฟเวอร์หรือไม่?

— tika

3

การแก้ไขครั้งล่าสุดคืออะไรโปรด "โปรดอย่าใช้ jQuery อีกต่อไป!" หมายความว่าอย่างไร

— ParkCheolu

1

ตอนนี้เป็นปี 2018 และฉันไม่แน่ใจว่าควรจะใช้อะไรในปี 2017!

— Vasily Hall

28

ในการตอบสนองต่อ OP มีปัญหาสองประการเกี่ยวกับรหัสของคุณ: คุณต้องตั้งค่า jsonp = 'callback' และเพิ่มฟังก์ชั่นการโทรกลับในตัวแปรเช่นเดียวกับที่คุณไม่ทำงาน

อัปเดต: เมื่อฉันเขียน Twitter API เพิ่งเปิด แต่พวกเขาเปลี่ยนและตอนนี้ต้องมีการรับรองความถูกต้อง ฉันเปลี่ยนตัวอย่างที่สองเป็นตัวอย่างการทำงาน (2014Q1) แต่ตอนนี้ใช้ github

สิ่งนี้ไม่ทำงานอีกต่อไป - ในแบบฝึกหัดดูว่าคุณสามารถแทนที่ด้วย Github API:

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
});
function photos (data) {
    alert(data);
    console.log(data);
};

แม้ว่าการแจ้งเตือน () กำลังเรียงอาเรย์แบบที่ไม่ได้ผลดีนัก ... แท็บ "Net" ใน Firebug จะแสดง JSON ให้คุณเห็นอย่างถูกต้อง เคล็ดลับที่มีประโยชน์อีกอย่างคือกำลังทำ

alert(JSON.stringify(data));

คุณยังสามารถใช้วิธีการjQuery.getJSON นี่คือตัวอย่าง html แบบสมบูรณ์ที่ได้รับรายชื่อ "gists" จาก github วิธีนี้มันจะสร้างฟังก์ชั่นการโทรกลับแบบสุ่มสำหรับคุณนั่นคือ "callback = สุดท้าย" ใน url

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQuery (cross-domain) JSONP Twitter example</title>
        <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.getJSON('https://api.github.com/gists?callback=?', function(response){
                    $.each(response.data, function(i, gist){
                        $('#gists').append('<li>' + gist.user.login + " (<a href='" + gist.html_url + "'>" + 
                            (gist.description == "" ? "undescribed" : gist.description) + '</a>)</li>');
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="gists"></ul>
    </body>
</html>

— PapaFreud
แหล่งที่มา

2

คุณพูดถูกมันไม่ทำงานอีกต่อไป Twitter เปลี่ยน API ของพวกเขาแล้ว

— PapaFreud

3

<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>An JSONP example </title>
</head>
<body>
<!-- DIV FOR SHOWING IMAGES -->
<div id="images">
</div>
<!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
  format: "json"
},
//RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV
function(data) {
  $.each(data.items, function(i,item){
  $("<img/>").attr("src", item.media.m).appendTo("#images");

 });
});</script>
</body>
</html>

รหัสด้านบนช่วยในการรับภาพจาก Flicker API วิธีนี้ใช้วิธี GET เพื่อรับรูปภาพโดยใช้ JSONP รายละเอียดสามารถพบได้ในที่นี่

— Ganesh Babu
แหล่งที่มา