AJAX クロスドメイン リクエスト JSONP JSON データを取得する詳細な手順 (コード付き)

今回は、AJAX クロスドメイン リクエスト JSONP で JSON データを取得する手順を詳しく説明します (コード付き) AJAX クロスドメイン リクエスト JSONP で JSON データを取得するための 注意事項 は何ですか? 、見てみましょう。

非同期 JavaScript と XML (Ajax) は、新世代の Web サイト (一般に Web 2.0 サイトとして知られています) を推進する主要なテクノロジです。 Ajax を使用すると、Web アプリケーションの表示や動作を妨げることなく、バックグラウンドでデータを取得できます。 XMLHttpRequest 関数を使用してデータを取得します。これは、クライアント側 JavaScript が HTTP 経由でリモート サーバーに接続できるようにする API です。 Ajax は、複数の場所のコンテンツを 1 つの Web アプリケーションに統合する多くのマッシュアップの原動力でもあります。

ただし、ブラウザーの制限により、この方法ではクロスドメイン通信は許可されません。別のドメインからデータをリクエストしようとすると、セキュリティ エラーが発生します。データが存在するリモート サーバーを制御でき、すべてのリクエストが同じドメインに送信される場合、これらのセキュリティ上の間違いは回避できます。しかし、Web アプリケーションが独自のサーバー上に留まるだけでは、何の役に立つのでしょうか?複数のサードパーティサーバーからデータを収集する必要がある場合はどうすればよいでしょうか?

同一生成元ポリシーについて理解する

同一生成元ポリシーは、あるドメインに読み込まれたスクリプトが別のドメインのドキュメント プロパティを取得または操作することを防ぎます。つまり、要求された URL のドメインは、現在の Web ページのドメインと同じである必要があります。これは、ブラウザがさまざまなソースからコンテンツを分離して、ソース間での操作を防止することを意味します。このブラウザ ポリシーは古いもので、Netscape Navigator バージョン 2.0 から存在しています。

この制限を克服する比較的簡単な方法は、Web ページが元の Web サーバーにデータを要求し、Web サーバーがプロキシのように機能して、その要求を実際のサードパーティ サーバーに転送することです。このテクノロジーは広く使用されていますが、拡張性がありません。もう 1 つの方法は、フレーム要素を使用して現在の Web ページ内に新しい領域を作成し、GET リクエストを使用してサードパーティのリソースを取得することです。ただし、リソースを取得した後は、フレーム内のコンテンツは同一生成元ポリシーによって制限されます。

この制限を克服するより理想的な方法は、ソースが別のドメインのサービス URL を指す動的スクリプト要素を Web ページに挿入し、独自のスクリプトでデータを取得することです。スクリプトがロードされると実行が開始されます。このアプローチが機能するのは、同一生成元ポリシーが動的スクリプトの挿入を妨げず、スクリプトが Web ページを提供するドメインから読み込まれたかのように扱われるためです。ただし、スクリプトが別のドメインからドキュメントをロードしようとすると、成功しません。幸いなことに、この手法は JavaScript Object Notation (JSON) を追加することで改善できます。

1. JSONPとは何ですか?

JSONP を理解するには、JSON について触れなければなりません。それでは、JSON とは何でしょうか?

JSON は JavaScript のオブジェクト リテラル表記のサブセットです。JSON は JavaScript のサブセットであるため、問題なく言語で使用できます。

JSONP (JSON with Padding) は非公式のプロトコルです。サーバー側でスクリプト タグを統合し、それらをクライアントに返すことで、JavaScript コールバックの形式でクロスドメイン アクセスが可能になります (これは単なる JSONP の実装です)。

2. JSONP の用途は何ですか?

同一オリジンポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみをリクエストできます。クロスドメインリクエストを実装するために、クロスドメインを実装できます。スクリプト タグを介してリクエストを送信し、サーバー側で JSON データを出力し、コールバック関数を実行してクロスドメイン データ リクエストを解決します。

3. JSONP の使用方法?

以下のデモは、実際には 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コード

<?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 中国語 Web サイトの他の関連記事を参照してください。