이번에는 AJAX 교차 도메인 요청 JSONP가 JSON 데이터를 얻는 단계(코드 포함)에 대해 자세히 설명합니다. AJAX 교차 도메인 요청 JSONP가 JSON 데이터를 얻는 주의사항은 무엇인가요? , 살펴 보겠습니다.
비동기 JavaScript 및 XML(Ajax)은 차세대 웹 사이트(일반적으로 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 code
<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 코드
<?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>客户端JS代码在jQuery中的实现方式2：
Js代码
<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>客户端JS代码在jQuery中的实现方式3：
其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为
jsonpCallback({msg:'this is json data'})Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
使用JSON的优点在于：
比XML轻了很多，没有那么多冗余的东西。
JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
在JavaScript中处理JSON很简单。
其他语言例如PHP对于JSON的支持也不错。
JSON也有一些劣势：
JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
如果你使用eval()来解析的话，会容易出现安全问题。
尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的方式。
主要提示：
JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。
第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 AJAX 교차 도메인 요청 JSONP JSON 데이터를 얻기 위한 세부 단계(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
