javascript - jsonp 크로스도메인




JSONP는 무엇에 관한 것입니까? (5)

JSONP는 원격 데이터 서비스 위치에 요청하는 "script"요소 (HTML 마크 업 또는 JavaScript를 통해 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을 이해하지만 JSONP는 이해하지 못한다. Wikipedia의 JSON에 대한 문서 는 JSONP에 대한 최고 검색 결과입니다. 그것은 이것을 말한다 :

JSONP 또는 "패딩이있는 JSON"은 접두어가 호출 자체의 입력 인수로 지정되는 JSON 확장입니다.

응? 무슨 전화? 그게 나에게 어떤 의미가 없지. JSON은 데이터 형식입니다. 전화가 없습니다.

번째 검색 결과 는 JSONP에 대해이 글을 쓴 Remy 라는 사람에게서 온 것입니다.

JSONP는 스크립트 태그 주입으로, 서버의 응답을 사용자가 지정한 함수로 전달합니다.

나는 그것을 이해할 수는 있지만, 여전히 의미가 없습니다.

그렇다면 JSONP이란 무엇입니까? 왜 그것을 만들었습니까 (어떤 문제가 해결됩니까?)? 왜 내가 그것을 사용할 것인가?

부록 : Wikipedia 에서 JSONP 용 새 페이지를 만들었습니다. 이제 jvenema 의 대답을 기반으로 JSONP에 대한 명확하고 철저한 설명이 있습니다.


JSONP는 크로스 도메인 스크립팅 오류를 해결하는 데 큰 도움이됩니다. 서버 측에서 AJAX 프록시를 구현할 필요없이 JSONP 서비스를 JS로만 사용할 수 있습니다.

b1t.co 서비스를 사용하여 작동 방식을 확인할 수 있습니다. 이것은 무료 JSONP 서비스로 URL 축소를 허용합니다. 다음은 서비스에 사용할 URL입니다.

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

예를 들어 http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

돌아올거야.

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

따라서 get이 src로로드 될 때 콜백 함수로 구현해야하는 whatJavascriptName이 자동으로 실행됩니다.

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;

    ?>    

사실 너무 복잡하지는 않습니다 ...

도메인 example.com에 있고 example.net 도메인에 요청하고 싶다고 가정 해보십시오. 그렇게하려면 대부분의 브라우저 랜드에서 도메인 경계를 넘어야합니다.

이 제한을 우회하는 한 항목은 <script> 태그입니다. 스크립트 태그를 사용하면 도메인 제한이 무시되지만 정상적인 상황에서는 결과로 아무 것도 할 수 없으므로 스크립트가 평가됩니다.

JSONP를 입력하십시오. JSONP를 사용할 수있는 서버에 요청하면 페이지에 대해 서버에 조금 알려주는 특수 매개 변수를 전달합니다. 그러면 서버는 페이지에서 처리 할 수있는 방식으로 응답을 멋지게 마무리 할 수 ​​있습니다.

예를 들어 서버가 JSONP 기능을 사용하려면 "콜백"이라는 매개 변수가 필요하다고 가정합니다. 그럼 당신의 요청은 다음과 같이 보일 것입니다 :

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

JSONP가 없으면 다음과 같이 기본 JavaScript 객체를 반환 할 수 있습니다.

{ foo: 'bar' }

그러나 JSONP를 사용하면 서버가 "callback"매개 변수를 받으면 결과를 조금 다르게 처리하여 다음과 같이 반환합니다.

mycallback({ foo: 'bar' });

보시다시피 지정한 메서드가 호출됩니다. 따라서 귀하의 페이지에서 콜백 함수를 정의하십시오 :

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

이제 스크립트가로드되면 평가되고 함수가 실행됩니다. Voila, 도메인 간 요청!

또한 JSONP의 주요 문제점 중 하나는 주목할 가치가있다. 예를 들어 적절한 실패 코드를 다시 얻는 "좋은"방법은 없습니다. 결과적으로, 당신은 타이머를 사용하여 결국 조금 의심되는 요청 등을 모니터링하게됩니다. JSONRequest 의 제안은 크로스 도메인 스크립팅을 허용하고 보안을 유지하며 요청을 적절하게 제어 할 수있는 훌륭한 솔루션입니다.

요즘 (2015) CORS 가 JSONRequest에 비해 권장되는 접근 방식입니다. JSONP는 이전 브라우저 지원에 여전히 유용하지만 CORS를 선택하지 않는 한 보안상의 영향을 고려할 때 더 나은 선택입니다.


JSONPXMLHttpRequest 동일한 도메인 정책을 극복하기위한 간단한 트릭입니다. (아시다시피 AJAX (XMLHttpRequest) 요청을 다른 도메인으로 보낼 수 없습니다.)

따라서 XMLHttpRequest 를 사용하는 대신 js가 다른 도메인의 데이터를 가져 오기 위해 일반적으로 js 파일을로드하는 데 사용하는 스크립트 HTML 태그를 사용해야합니다. 이상한데?

문제는 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 사용법의 간단한 예제이며 프로덕션 준비 스크립트가 아닙니다.

기본 JavaScript 예제 (JSONP를 사용하는 간단한 Twitter 피드)

<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를 사용하는 간단한 Twitter 피드)

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


JSONPPadding 으로 JSON을 나타냅니다. (대부분의 사람들이 "패딩"이라고 생각하는 것과는 아무런 관련이 없기 때문에 이름이 매우 약한 기술입니다.)







terminology