JSONP(JSON with Padding)는 서버 측에서 스크립트 태그를 통합하고 클라이언트에 반환하여 자바스크립트 콜백 형식으로 도메인 간 액세스를 가능하게 하는 비공식 프로토콜입니다(JSONP의 간단한 구현일 뿐입니다).
Ajax(Asynchronous JavaScript and XML)는 차세대 웹 사이트(일반적으로 Web 2.0 사이트로 알려짐)를 주도하는 핵심 기술입니다. Ajax는 웹 애플리케이션의 표시 및 동작을 방해하지 않고 백그라운드에서 데이터 검색을 허용합니다. 클라이언트측 JavaScript가 HTTP를 통해 원격 서버에 연결할 수 있게 해주는 API인 XMLHttpRequest 함수를 사용하여 데이터를 가져옵니다. Ajax는 여러 위치의 콘텐츠를 단일 웹 애플리케이션으로 통합하는 많은 매시업의 원동력이기도 합니다.
단, 브라우저 제한으로 인해 이 방법은 도메인 간 통신을 허용하지 않습니다. 다른 도메인에서 데이터를 요청하려고 하면 보안 오류가 발생합니다. 데이터가 있는 원격 서버를 제어할 수 있고 모든 요청이 동일한 도메인으로 이동하는 경우 이러한 보안 오류를 피할 수 있습니다. 하지만 웹 애플리케이션이 자체 서버에만 유지된다면 무슨 소용이 있을까요? 여러 타사 서버에서 데이터를 수집해야 하는 경우 어떻게 해야 합니까?
동일 출처 정책 제한 이해
동일 출처 정책은 한 도메인에 로드된 스크립트가 다른 도메인의 문서 속성을 얻거나 조작하는 것을 방지합니다. 즉, 요청한 URL의 도메인은 현재 웹페이지의 도메인과 동일해야 합니다. 이는 브라우저가 서로 다른 소스의 콘텐츠를 격리하여 소스 간 작업을 방지한다는 의미입니다. 이 브라우저 정책은 오래된 것이며 Netscape Navigator 버전 2.0부터 존재했습니다.
이 제한을 극복하는 비교적 간단한 방법은 웹 페이지가 원래 웹 서버에서 데이터를 요청하도록 하고, 웹 서버가 프록시처럼 작동하여 요청을 실제 제3자 서버로 전달하도록 하는 것입니다. 이 기술은 널리 사용되기는 하지만 확장성이 없습니다. 또 다른 방법은 프레임 요소를 사용하여 현재 웹 페이지 내에 새 영역을 만들고 GET 요청을 사용하여 타사 리소스를 얻는 것입니다. 그러나 리소스를 얻은 후에는 프레임의 콘텐츠가 동일 출처 정책에 의해 제한됩니다.
이 제한을 극복하는 더 이상적인 방법은 소스가 다른 도메인의 서비스 URL을 가리키는 웹 페이지에 동적 스크립트 요소를 삽입하고 자체 스크립트에서 데이터를 얻는 것입니다. 스크립트가 로드되면 실행이 시작됩니다. 이 접근 방식은 동일 원본 정책이 동적 스크립트 삽입을 방지하지 않고 스크립트가 웹 페이지를 제공하는 도메인에서 로드된 것처럼 처리되기 때문에 효과적입니다. 그러나 스크립트가 다른 도메인에서 문서를 로드하려고 하면 성공하지 못합니다. 다행히도 이 기술은 JSON(JavaScript Object Notation)을 추가하여 향상될 수 있습니다.
1. JSONP란 무엇인가요?
JSONP를 이해하려면 먼저 JSON을 언급해야 하는데, JSON이 무엇인가요?
JSON은 JavaScript의 객체 리터럴 표기법의 하위 집합입니다. JSON은 JavaScript의 하위 집합이므로 번거로움 없이 언어에서 사용할 수 있습니다.
JSONP(JSON with Padding)는 비공식 프로토콜입니다. 서버 측에서 스크립트 태그를 통합하고 이를 클라이언트에 반환하여 자바스크립트 콜백 형식으로 도메인 간 액세스를 활성화합니다(이는 JSONP의 간단한 구현일 뿐입니다).
2. JSONP의 용도는 무엇인가요?
동일 출처 정책의 제한으로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)에서만 리소스를 요청할 수 있습니다. 도메인 간 요청을 구현하려면 도메인 간 요청을 구현할 수 있습니다. 스크립트 태그를 통해 JSON 데이터를 서버에 출력하고 콜백 함수를 실행하여 도메인 간 데이터 요청을 해결합니다.
3. JSONP를 사용하는 방법은 무엇인가요?
아래 DEMO는 실제로 클라이언트가 콜백 함수를 선언한 후 스크립트 태그를 통해 서버에 크로스 도메인 데이터를 요청하면 서버가 해당 데이터를 반환하고 콜백을 동적으로 실행하는 간단한 JSONP 표현입니다. 기능.
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>로그인 후 복사
또는
Html 코드
<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 링크는 함수 아래에 있어야 합니다.
서버측 PHP 코드(services.php):
<?php
//服务端返回JSON数据
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";로그인 후 복사
위의 JS 클라이언트 코드를 jQuery를 이용하여 구현한다면 역시 매우 간단합니다.
$.getJSON
$.ajax
$.get
jQuery 1에서 클라이언트 JS 코드가 구현되는 방식:
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 2에서 클라이언트 JS 코드가 구현되는 방식:
Js code
<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 3에서 클라이언트 JS 코드를 구현하는 방법:
Js 코드
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');
</script>로그인 후 복사
여기서 jsonCallback은 크로스 도메인 서버에서 json 데이터를 얻은 후 콜백하기 위해 클라이언트가 등록한 함수입니다.
http://crossdomain.com/services.php?callback=jsonpCallback
이 URL은 크로스 도메인 서버가 json 데이터를 가져오기 위한 인터페이스입니다. 매개변수는 콜백 함수의 이름이고 반환되는 형식은
입니다. Js 코드
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 서비스를 사용하려는 경우 발생할 수 있는 위협을 이해하는 것이 중요합니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
h5 ajax 기반 휴대폰 위치 구현
H5 기능 FormData를 활용하여 새로 고침 없이 파일 업로드 가능
다양한 AJAX 방법 사용에 대한 자세한 설명
위 내용은 JSON 데이터를 얻기 위해 AJAX 교차 도메인 요청 JSONP의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
