[javascript] JSONP 란 무엇이며 왜 만들어 졌습니까?

JSONP는 이해하지만 JSONP는 이해하지 못합니다. JSON에 대한 Wikipedia의 문서 는 JSONP의 최상위 검색 결과입니다. 이것은 말합니다 :

JSONP 또는 “패딩이있는 JSON”은 JSON 확장이며 접두사가 호출 자체의 입력 인수로 지정됩니다.

응? 무슨 전화? 그건 말이되지 않습니다. JSON은 데이터 형식입니다. 전화가 없습니다.

두 번째 검색 결과 는 JSONP에 대해 쓴 Remy 라는 사람의 검색 결과 입니다 .

JSONP는 서버에서 사용자 지정 함수로 응답을 전달하는 스크립트 태그 삽입입니다.

나는 그것을 이해할 수 있지만 여전히 이해가되지 않습니다.

JSONP 란 무엇입니까? 왜 만들어 졌습니까 (어떤 문제가 해결 되었습니까)? 왜 내가 그것을 사용합니까?

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

답변

실제로 너무 복잡하지는 않습니다 …

domain example.com에 있고 domain 에 요청하려고 한다고 가정하십시오 example.net. 이렇게하려면, 당신은 할 필요가 없습니다 크로스 도메인 A, 경계 없는 더 browserland의 대부분.

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

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

예를 들어, 서버 callback가 JSONP 기능을 사용하기 위해 호출되는 매개 변수를 예상한다고 가정하십시오 . 그런 다음 요청은 다음과 같습니다.

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

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

{ foo: 'bar' }

그러나 JSONP를 사용하면 서버가 “콜백”매개 변수를 수신하면 결과가 약간 다르게 마무리되어 다음과 같은 결과가 리턴됩니다.

mycallback({ foo: 'bar' });

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

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

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

JSONP의 주요 문제 중 하나는 주목할 가치가 있습니다. 요청에 대한 많은 제어권을 잃게됩니다. 예를 들어, 적절한 오류 코드를 다시 얻는 “좋은”방법은 없습니다. 결과적으로 타이머 등을 사용하여 요청 등을 모니터링하게되며, 이는 항상 약간 의심됩니다. JSONRequest 제안은 도메인 간 스크립팅을 허용하고 보안을 유지하며 요청을 적절히 제어 할 수있는 훌륭한 솔루션입니다.

요즘 (2015) CORS 는 JSONRequest와 비교하여 권장되는 접근 방식입니다. JSONP는 여전히 오래된 브라우저 지원에 유용하지만 CORS가 더 나은 선택이 아닌 한 보안에 영향을 미칩니다.

답변

JSONP 는 XMLHttpRequest 와 동일한 도메인 정책 을 극복하는 간단한 방법입니다 . (알다시피 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>

JSONP 는 JSON with Padding을 나타냅니다 . (대부분의 사람들이“패딩”이라고 생각하는 것과는 아무 관련이 없기 때문에 이름이 매우 낮은 기술입니다.)

답변

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 오브젝트 앞에 접 두부를 추가하도록 서버에 요청할 수 있기 때문입니다. 예 :

function_prefix(json_object);

브라우저가 evalJSON 문자열을 표현식으로 “인라인” 하기 위해 . 이 트릭을 사용하면 서버가 클라이언트 브라우저에서 직접 자바 스크립트 코드를 “주입”할 수 있으며 “동일한 원점”제한을 무시할 수 있습니다.

즉, 도메인 간 데이터 교환을 달성 할 수 있습니다 .

일반적으로 XMLHttpRequest도메인 간 데이터 교환을 직접 허용하지 않습니다 (동일한 도메인의 서버를 통과해야 함).

<script src="some_other_domain/some_data.js&prefix=function_prefix>`원점이 아닌 도메인의 데이터에 액세스 할 수 있습니다.

주목할 가치가 있습니다. “트릭”을 시도하기 전에 서버를 “신뢰할 수있는”것으로 간주해야하지만 개체 형식 등의 변경으로 인한 부작용이 포함될 수 있습니다. 경우 function_prefix(즉, 적절한 기능 JS)가 JSON 객체를 수신하기 위해 사용되는 상기 기능은 상기 반환 된 데이터를 처리 / 승인하기 전에 검사를 수행 할 수있다.

답변

JSONP는 도메인 간 스크립팅 오류를 해결할 수있는 좋은 방법입니다. 서버 측에서 AJAX 프록시를 구현할 필요없이 JS만으로 JSONP 서비스를 사용할 수 있습니다.

b1t.co 서비스를 사용하여 작동 방식을 확인할 수 있습니다. URL을 축소 할 수있는 무료 JSONP 서비스입니다. 서비스에 사용할 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로 js에로드되면 콜백 함수로 구현 해야하는 JavascriptName을 자동으로 실행합니다.

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은 매우 복잡합니다. 사용자가 웹 페이지에 포함 된 프로세스를 불편하게 만듭니다.

데이터 처리 프로그램이라 할지라도 JavaScript가 데이터를 쉽게 교환 할 수 있도록 JavaScript 객체에 따른 표현을 사용하고 간단한 데이터 교환 형식 인 JSON을 개발했습니다. JSON은 데이터 또는 JavaScript 프로그램으로 사용할 수 있습니다.

JSON은 JavaScript에 직접 임베드 될 수 있으며이를 사용하면 특정 JSON 프로그램을 직접 실행할 수 있지만 보안 제한으로 인해 브라우저 샌드 박스 메커니즘은 도메인 간 JSON 코드 실행을 비활성화합니다.

실행 후 JSON을 전달할 수 있도록 JSONP를 개발했습니다. JSONP는 JavaScript 콜백 기능 및 <script> 태그를 사용하여 브라우저의 보안 제한을 무시합니다.

간단히 말해 JSONP가 무엇인지, 어떤 문제가 해결되는지 (사용 할 때) 설명합니다.