原生js實現簡單JSONP

JSONP是一種非常常見的實現跨域請求的方法。其基本思想是利用瀏覽器中可以跨域請求外鏈的JS文件，利用這一特性實現數據傳輸。

用原生JS實現JSONP非常簡單，無非幾點：

1）定義一個函數，用於處理接收到的跨域數據。

2）生成一個dom節點(script節點)，然后src屬性上面記入發送的目的URL以及參數。

3）在跨域服務器端接收GET請求，返回數據（返回之前定義函數的調用的字符串）。

4）刪除之前生成的script節點。

演示如下：

1）首先需要一個是同源服務器，一個跨域訪問的服務器。

最簡單的方式就是使用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) ."')";