<object id="oakae"></object><object id="oakae"></object>
<bdo id="oakae"><label id="oakae"></label></bdo>
<code id="oakae"><samp id="oakae"></samp></code>
  • <code id="oakae"></code><input id="oakae"><label id="oakae"></label></input><bdo id="oakae"><samp id="oakae"></samp></bdo>

    JSONP 教程

    JSONP是一種使用模式,人們常常把JSONP和JSON混淆,他們雖然有關系,但是描述的不是一個事物,JSONP是JSON with Padding的簡稱。本篇會說明JSONP是一個什么?怎么是去使用。

    通俗講,JSONP 為解決跨域而誕生。是為了基于瀏覽器Web請求不通源之間的請求。

    為了下面更好的講解JSONP,先解釋一下跨域。

    具體講,是解決不同源,被瀏覽器監管Javascript的安全限制。

    • http://www.ycnxq.com調用http://www.ycnxq.com/json/是不會跨域的。
    • http://www.ycnxq.com 調用http://www.itboy.net/json/是跨域的,因為不同域名。
    • http://www.ycnxq.com調用https://icp.sojson.com/search1_baidu.com.html 是跨域的。因為是不同二級域名。
    • http://www.ycnxq.com:8080調用http://www.ycnxq.com:8081 是跨域的。因為是不同端口。
    • http://www.ycnxq.com調用http://www.ycnxq.com 是跨域的。因為是不同請求協議,http和https。
    • 188.188.188.20調用199.199.199.99 是跨域的。因為不同IP。
    • localhost調用127.0.0.1 也是跨域的。其實他也是不同域名。

    JSONP for Java (一)

    前端代碼,Javascript:

    <script>
        //jsonp回調方法,一定要寫在jsonp請求前面
        function callback(txt){
            alert(txt);
        }
    </script>
    <script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>

    后端代碼,Java:

    /**
     * jsonp 測試
     * @return
     */
    @RequestMapping(value="testJsonp",method=RequestMethod.GET)
    @ResponseBody
    public String testJsonp(){
    	return "callback('test jsonp');";
    }

    前端會alert彈出的內容“test jsonp”

    JSONP for Java ,自定義callback函數(二)

    前端代碼,Javascript:

    <script>
        //jsonp回調方法,一定要寫在jsonp請求前面
        function testjson(txt){
            alert(txt);
        }
    </script>
    <script src ="/demo/testJsonp.shtml?callback=testjson" type="text/javascript" ></script>

    后端代碼,Java:

    /**
     * jsonp 測試
     * @return
     */
    @RequestMapping(value="testJsonp",method=RequestMethod.GET)
    @ResponseBody
    public String testJsonp(String callback){
    	return callback +"('test jsonp');";
    }

    JSONP for Java ,jQuery Ajax請求

    前端代碼,Javascript:

    <script>
    var testjsonp = function(data){
        $.each(data.data,function () {
            alert("時間:" + this.time +",內容:" + this.info);
        });
    }
    var demoJSONP = function () {
        $.getScript("http://www.ycnxq.com/open/api/kuaidi/get.shtml?orderNo=887180351164743887&callback=testjsonp");
    }
    </script>

    這個接口您不要去嘗試使用,因為它的數據來自百度而已。

    JSONP for PHP ,jQuery

    PHP代碼:

    <?php
        $data = ".......";
        $callback = $_GET['callback'];
        echo $callback.'('.json_encode($data).')';
        exit;
    ?>

    前端代碼,Javascript:

    <script>
    $.ajax({
        type : "post",
        url : "ajax.php",
        dataType : "jsonp",
        jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(默認為:callback)
        jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名
        success : function(json){
            alert('success');
        },
        error:function(){
            alert('fail');
        }
    });
    </script>
    支付掃碼

    所有贊助/開支都講公開明細,用于網站維護:贊助名單查看

    正在加載... ...

    甘肃11选5软件