jsonp はどのようにしてドメイン間でデータを取得するのでしょうか? (コード例)

青灯夜游
リリース: 2019-01-05 10:24:14
転載
3300 人が閲覧しました

jsonp はどのようにしてドメイン間でデータを取得するのでしょうか?この記事では、jsonp を使用してクロスドメイン データを取得する方法を紹介します。必要な方は参考にしていただければ幸いです。

Jsonp クロスドメインデータ取得の説明

ブラウザには同一オリジンポリシーがあるため、オリジナル以外のオリジンを取得したい場合(プロトコル、ドメイン名、3 つのポートが異なる場合、それらはオリジナルではないとみなされます) ページのデータはクロスドメインである必要があります

#(1) jsonp 原則

script タグの src 属性はオリジナル以外の js スクリプトにアクセスできるため、src 属性を通じてサーバーにアクセスすると関数の js コードが返され、必要なデータが関数として返されます。パラメータを指定し、最初にこの関数を定義して戻ります。 js コードを実行できます。

(2) jsonp 実装コード

リクエスト ページ

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript">
    function jsonp(data){
        console.log(username)
    }
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.example.com/jsonp.php?callback=jsonp";
        var script = $('<script><\/script>');
        script.attr("src",url);
        $("body").append(script);
    });
</script>
</body>
</html>
ログイン後にコピー
<?php

$data = {&#39;name&#39;: &#39;张三&#39;};
$callback = $_GET[&#39;callback&#39;];
echo $callback."(".json_encode($data).")";

?php>
ログイン後にコピー
その後、php は戻ります

jsonp({
    name:'niuni
})
ログイン後にコピー
その後、PHP から返されたコード h は、要求されたページの jsonp メソッドによって実行されます

( 3) jQuery の単純な jsonp クロスドメイン

<script>
    function showData (data) {
        console.info(data);
    }
    $(document).ready(function () {
        $("#btn").click(function () {
            $.ajax({
                url: "http://www.example.comjsonp",
                type: "GET",
                dataType: "jsonp",// 返回数据类型
                jsonpCallback: "showData",//回调函数
                // 获取数据成功就执行success函数
                success: function (data) {
                    console.info("data");
                }
            });
        });
    });
</script>
ログイン後にコピー

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !

以上がjsonp はどのようにしてドメイン間でデータを取得するのでしょうか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート