ネイティブJSシンプルJSONP

オリジナルリンク： https://www.mk2048.com/blog/blog.php?id=h02bb1hchjkj&title=%E5%8E%9F%E7%94%9Fjs%E5%AE%9E%E7%8E%B0%E7% AEの％80％E5％8D％以下の 95JSONP

JSONPがクロスドメインリクエストを達成するための非常に一般的な方法です。基本的な考え方は、ブラウザがJSファイルは、チェーンの外側クロスドメイン、データ伝送のために、この機能を使用することも要求し使用することです。

JS非常に単純なネイティブJSONP、それ以上何も達成：

1）受信したデータのクロスドメイン処理のための関数を定義します。

2）DOMノード（スクリプトノード）を生成し、src属性とURLの送信パラメータの上記目的に充電。

3）では、サーバ間）が復帰する前に、データ（文字列定義された関数呼び出しを返すGET要求を受信します。

削除する前に、ノードによって生成された4）スクリプト。

プレゼンテーション次のように：

1）まず、サーバ、クロスドメインアクセスに相同である必要があります。

最も簡単な方法は、2つの仮想ホストApacheの設定を使用することです。

//浏览器器端
<script type="text/javascript">
    //定义一个发送Jsonp请求的函数
    function jsonp(obj) {
        //定义一个处理Jsonp返回数据的回调函数
	window["callback"] = function(object) {
            obj.success(JSON.parse(object));
        }
        var script = document.createElement("script");
        //组合请求URL
        script.src = obj.url   "?fn=callback";
        for(key in obj.data){
            script.src  ="&"   key   "="   obj.data[key];
        }
        //将创建的新节点添加到BOM树上
        document.getElementsByTagName("body")[0].appendChild(script);	
    }
</script>

<script type="text/javascript">
    //调用Jsonp函数发送jsonp请求
    jsonp({
        url:"http://localhost/index.php",
        data:{
            name:"小明",
        },
        success:function(obj) {
            alert("性别"   obj.sex);
        }
    });
</script>

//服务器端
<?php
header('Content-Type: application/json; charset=UTF-8');

$fn = $_GET["fn"];

$name = $_GET["name"];
$result = array();
if($name == "小明"){
$result["sex"] = "男";
} else if($name == "小红"){
$result["sex"] = "女";
}else {
$result["sex"] = "未知";
}

echo $fn . "('" . json_encode($result) ."')";

より専門的なフロントエンドの知識、作る [2048] APE www.mk2048.comを

おすすめ