Ajax 교차 도메인 요청에 대한 솔루션: JSONP를 사용하여 JSON 데이터 얻기

브라우저 제한으로 인해 ajax는 도메인 간 통신을 허용하지 않습니다. 다른 도메인에서 데이터를 요청하려고 하면 보안 오류가 발생합니다. 데이터가 있는 원격 서버를 제어할 수 있고 모든 요청이 동일한 도메인으로 이동한다면 이러한 보안 실수를 피할 수 있습니다. 하지만 웹 애플리케이션이 자체 서버에만 유지된다면 무슨 소용이 있을까요? 여러 타사 서버에서 데이터를 수집해야 하는 경우 어떻게 해야 합니까?

동일 출처 정책 제한 이해

동일 출처 정책은 한 도메인에서 로드된 스크립트가 다른 도메인의 문서 속성을 얻거나 조작하는 것을 방지합니다. 즉, 요청한 URL의 도메인은 현재 웹페이지의 도메인과 동일해야 합니다. 이는 브라우저가 서로 다른 소스의 콘텐츠를 격리하여 소스 간 작업을 방지한다는 의미입니다. 이 브라우저 정책은 오래된 것이며 Netscape Navigator 버전 2.0부터 존재했습니다.

이 제한을 극복하는 비교적 간단한 방법은 웹 페이지가 원래 웹 서버에서 데이터를 요청하도록 하고, 웹 서버가 프록시처럼 작동하여 요청을 실제 제3자 서버로 전달하도록 하는 것입니다. . 이 기술은 널리 사용되기는 하지만 확장성이 없습니다. 또 다른 방법은 프레임 요소를 사용하여 현재 웹 페이지 내에 새 영역을 만들고 GET 요청을 사용하여 타사 리소스를 얻는 것입니다. 그러나 리소스를 얻은 후에는 프레임의 콘텐츠가 동일 출처 정책에 의해 제한됩니다.

이 제한을 극복하는 더 이상적인 방법은 소스가 다른 도메인의 서비스 URL을 가리키고 자체 스크립트에서 데이터를 가져오는 웹 페이지에 동적 스크립트 요소를 삽입하는 것입니다. 스크립트가 로드되면 실행이 시작됩니다. 이 접근 방식은 동일 원본 정책이 동적 스크립트 삽입을 방지하지 않고 스크립트가 웹 페이지를 제공하는 도메인에서 로드된 것처럼 처리되기 때문에 효과적입니다. 그러나 스크립트가 다른 도메인에서 문서를 로드하려고 하면 성공하지 못합니다. 다행히도 이 기술은 JSON(JavaScript Object Notation)을 추가하여 향상될 수 있습니다.

JSONP란 무엇인가요?

JSONP를 이해하려면 먼저 JSON을 언급해야 합니다. 그러면 JSON이 무엇일까요?

JSONP(JSON with Padding)는 서버측에서 스크립트 태그를 통합하고 이를 클라이언트에 반환하여 자바스크립트 콜백을 통해 도메인 간 액세스를 달성할 수 있는 비공식 프로토콜입니다(이는 JSONP의 간단한 구현일 뿐입니다) .

JSONP는 어떤 용도로 사용되나요?

동일 출처 정책의 제한으로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)의 리소스 요청만 허용합니다. 교차 도메인 요청을 구현하려면 스크립트 태그를 통해 도메인 요청을 수행한 후 서버에 JSON 데이터를 출력하고 콜백 기능을 실행하여 도메인 간 데이터 요청을 해결합니다.

JSONP를 어떻게 사용하나요?

아래 DEMO는 실제로 JSONP를 단순하게 표현한 것입니다. 클라이언트가 콜백 함수를 선언한 후 스크립트 태그를 통해 도메인 전반에 걸쳐 서버에 데이터를 요청하면 서버가 해당 데이터를 반환하고 동적으로 실행합니다. 콜백 함수.

1. HTML 코드(아무거나):

<meta content=“text/html; charset=utf-8″ http-equiv=“Content-Type” />  
<script type=“text/javascript”>  
    function jsonpCallback(result) {  
        //alert(result);  
        for(var i in result) {  
            alert(i+”:”+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
    var JSONP=document.createElement(“script”);  
    JSONP.type=“text/javascript”;  
    JSONP.src=“http://crossdomain.com/services.php?callback=jsonpCallback”;  
    document.getElementsByTagName(“head”)[0].appendChild(JSONP);  
</script>

또는

<meta content=“text/html; charset=utf-8″ http-equiv=“Content-Type” />  
<script type=“text/javascript”>  
    function jsonpCallback(result) {  
        alert(result.a);  
        alert(result.b);  
        alert(result.c);  
        for(var i in result) {  
            alert(i+”:”+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
</script>  
<script type=“text/javascript” src=“http://crossdomain.com/services.php?callback=jsonpCallback”>    </script>

JavaScript 링크가 함수 아래에 있어야 합니다.

2. 서버 측 PHP 코드

<?php  
//服务端返回JSON数据  
$arr=array(‘a’=>1,‘b’=>2,‘c’=>3,‘d’=>4,‘e’=>5);  
$result=json_encode($arr);  
//echo $_GET[&#39;callback&#39;].’(“Hello,World!”)’;  
//echo $_GET[&#39;callback&#39;].”($result)”;  
//动态执行回调函数  
$callback=$_GET[‘callback’];  
echo $callback.“($result)”;

3. jQuery 구현

jQuery의 클라이언트 측 JS 코드 구현 방법:

<script type=“text/javascript” src=“jquery.js”></script>  
<script type=“text/javascript”>  
    $.getJSON(“http://crossdomain.com/services.php?callback=?”,  
    function(result) {  
        for(var i in result) {  
            alert(i+“:”+result[i]);//循环输出a:1,b:2,etc.  
        }  
    });  
</script>

jQuery에서 클라이언트 JS 코드 구현 방법 2:

<script type=“text/javascript” src=“jquery.js”></script>  
<script type=“text/javascript”>  
    $.ajax({  
        url:“http://crossdomain.com/services.php”,  
        dataType:‘jsonp’,  
        data:”,  
        jsonp:‘callback’,  
        success:function(result) {  
            for(var i in result) {  
                alert(i+“:”+result[i]);//循环输出a:1,b:2,etc.  
            }  
        },  
        timeout:3000  
    });  
</script>

jQuery에서 클라이언트 JS 코드 구현 방법 3:

<script type=&#39;text/javascript&#39; src=&#39;jquery.js&#39;></script>  
<script type=&#39;text/javascript&#39;>  
    $.get(&#39;http://crossdomain.com/services.php?callback=?&#39;, 
        {name: encodeURIComponent(&#39;tester&#39;)},         
        function (json) { for(var i in json) alert(i+&#39;:&#39;+json[i]); }, &#39;jsonp&#39;);  
</script>

여기서 jsonCallback은 클라이언트 등록, 콜백 크로스 도메인 서버에서 json 데이터를 얻은 후 함수를 실행합니다.

http://crossdomain.com/services.php?callback=jsonpCallback

이 URL은 크로스 도메인 서버에서 json 데이터를 가져오기 위한 인터페이스입니다. 매개변수는 콜백 함수의 이름입니다. 반환되는 형식은

jsonpCallback({msg:'this is json data'})

jsonp 원칙입니다.

먼저 클라이언트에 콜백을 등록한 후 콜백 이름을 서버에 전달합니다.

이때, 서버는 먼저 json 데이터를 생성합니다.

그런 다음 자바스크립트 구문을 사용하여 함수를 생성합니다. 함수 이름은 전달된 매개변수 jsonp입니다.

마지막으로 json 데이터를 매개변수로 함수에 직접 배치하여 js가 포함된 문서를 만듭니다. 구문이 생성되어 클라이언트에 반환됩니다.

클라이언트 브라우저는 스크립트 태그를 파싱하여 반환된 자바스크립트 문서를 실행합니다. 이때 해당 데이터는 클라이언트가 미리 정의한 콜백 함수에 매개변수로 전달됩니다(콜백 함수의 동적 실행). >

JSON을 사용하면 장점은 다음과 같습니다.

XML보다 훨씬 가볍고 중복되는 내용이 많지 않습니다.

JSON도 읽기 쉽지만 일반적으로 압축되어 반환됩니다. 브라우저에서 직접 표시할 수 있는 XML과 달리 브라우저는 JSON 형식을 지정하기 위해 일부 플러그인을 사용해야 합니다.

JavaScript에서 JSON을 처리하는 것은 쉽습니다.

PHP 등 다른 언어도 JSON을 잘 지원합니다.

JSON에는 몇 가지 단점도 있습니다.

JSON의 서버 측 언어 지원은 XML만큼 광범위하지 않지만 JSON.org는 다양한 언어에 대한 라이브러리를 제공합니다.

eval()을 사용하여 구문 분석하면 보안 문제가 쉽게 발생할 수 있습니다.

그럼에도 불구하고 JSON의 장점은 여전히 ​​분명합니다. Ajax 데이터 상호작용에 이상적인 데이터 형식입니다.

핵심 팁:

JSONP는 매시업 구축을 위한 강력한 기술이지만 안타깝게도 모든 도메인 간 통신 요구에 대한 만병통치약은 아닙니다. 여기에는 몇 가지 결함이 있으므로 개발에 리소스를 투입하기 전에 신중하게 고려해야 합니다.

먼저 가장 중요한 것은 JSONP 호출에 대한 오류 처리가 없다는 것입니다. 동적 스크립트 삽입이 유효하면 호출이 실행되고, 유효하지 않으면 자동으로 실패합니다. 실패에 대한 메시지는 없습니다. 예를 들어 404 오류는 서버에서 포착할 수 없으며 요청을 취소하거나 다시 시작할 수 없습니다. 하지만, 한참을 기다려도 응답이 없으면 무시하세요. (향후 버전의 jQuery에는 JSONP 요청을 종료하는 기능이 있을 수 있습니다.)

JSONP의 또 다른 주요 단점은 신뢰할 수 없는 서비스에서 사용하면 위험할 수 있다는 것입니다. JSONP 서비스는 브라우저에서 실행되는 함수 호출로 래핑된 JSON 응답을 반환하기 때문에 호스트 웹 애플리케이션이 다양한 공격에 더욱 취약해집니다. JSONP 서비스를 사용하려는 경우 발생할 수 있는 위협을 이해하는 것이 중요합니다.