AJAX 교차 도메인 요청 JSONP JSON 데이터를 얻기 위한 세부 단계(코드 포함)

이번에는 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(&#39;a&#39;=>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中文网其它相关文章！

推荐阅读：

使用Blod做出ajax的进度条下载

在实战项目中Ajax应该如何传递JSON

위 내용은 AJAX 교차 도메인 요청 JSONP JSON 데이터를 얻기 위한 세부 단계(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!