programing

JSONP에서 .ajax()를 사용하는 기본적인 예?

yellowcard 2023. 4. 5. 21:28
반응형

JSONP에서 .ajax()를 사용하는 기본적인 예?

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/

경고는 매뉴얼에서 확인할 수 있는 한 생성되어야 합니다.: 그렇지 않습니다(하지만 오류도 생성되지 않습니다).

감사해요.

JSONP는 XMLHttpRequest와 같은 도메인정책을 극복하기 위한 단순한 트릭입니다.(알고 있듯이 AJAX(XMLHttpRequest) 요구를 다른 도메인으로 송신할 수 없습니다).

따라서 XMLHttpRequest를 사용하는 대신 JS 파일을 로드하기 위해 사용하는 스크립트 HTMLl 태그를 사용해야 합니다.이상하게 들리나요?

스크립트 태그는 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 데모(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 with Padding의 약자입니다.(대부분의 사람들이 생각하는 '기법'과는 전혀 관계가 없기 때문에 이름이 매우 좋지 않은 기술)

jQuery를 사용하여 JSONP를 사용하는 방법은 더욱 간단합니다.

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

그?URL 끝의 jQuery는 JSON이 아닌 JSONP 요청임을 알립니다.jQuery는 콜백 함수를 자동으로 등록하고 호출합니다.

자세한 내용은 jQuery.getJ를 참조하십시오.SON 문서

OP에 대한 응답으로, 코드에는 두 가지 문제가 있습니다. 즉, jsonp='callback'을 설정해야 하고, 작동하지 않는 것처럼 보이는 변수에 콜백 함수를 추가하는 것입니다.

업데이트: 제가 이 글을 썼을 때는 Twitter API가 오픈되어 있었는데, 변경되어 인증이 필요하게 되었습니다.두 번째 예시는 작업(2014년 Q1) 예시로 변경했지만, 현재는 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);
};

alert()와 같은 배열은 제대로 작동하지 않지만...Firebug의 "Net" 탭에 JSON이 올바르게 표시됩니다.또 다른 유용한 요령은

alert(JSON.stringify(data));

jQuery.getJ를 사용할 수도 있습니다.SON 방식다음은 github에서 "gists" 목록을 가져오는 완전한 html 예제입니다.이렇게 하면 무작위로 명명된 콜백 함수가 생성됩니다. 이것이 URL의 마지막 "callback=?"입니다.

<!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>

<!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에서 이미지를 가져오는 데 도움이 됩니다.이 방법에서는 JSONP를 사용한 이미지 취득에 GET 메서드를 사용합니다.자세한 내용은 이쪽에서 확인하실 수 있습니다.

언급URL : https://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp

반응형

'programing' 카테고리의 다른 글

코드의 ASP.NET Core appsettings.json 업데이트  (0) 2023.04.05
Json.NET: 중첩된 사전을 역직렬화하는 중  (0) 2023.04.05
Windows Azure 동적 콘텐츠에서 gzip HTTP 압축을 활성화하는 방법  (0) 2023.03.31
다음 js - 일부 페이지에서 서버 측 렌더링을 비활성화합니다.  (0) 2023.03.31
게시 제목에서 WordPress 게시 ID 가져오기  (0) 2023.03.31

'programing'의 다른글

  • 현재글JSONP에서 .ajax()를 사용하는 기본적인 예?

관련글

댓글

티스토리툴바