什么是jsonp

什么是jsonp,jsonp是什么,jsonp如何使用

首先先知道

1. jsonp的核心原理就是目標頁(yè)面回調本地頁(yè)面的方法,并帶入參數
2. 我們常用的動(dòng)態(tài)頁(yè)面有jsp,php,aspx

為什么需要JSONP?

由于瀏覽器安全限制,數據是不可以直接跨域(包括不同的根域名、二級域名、或不同的端口)請求的,除非目標域名授權你可以訪(fǎng)問(wèn)。比如設置crossdomain.xml 或在http頭部里授權

但是crossdomain.xml會(huì )允許設置的網(wǎng)站訪(fǎng)問(wèn)所有的數據,而頭部設置又非常麻煩。

所以可以在你授權的數據返回里設置jsonp來(lái)讓該接口允許所有的調用者獲取數據。

JSONP的原理

jsonp是使用方法回調的原理.

在網(wǎng)頁(yè)里,你如果引入其他網(wǎng)頁(yè)的js,那這個(gè)頁(yè)面的js是可以調用你網(wǎng)頁(yè)的代碼的

直接請求js 和 請求的動(dòng)態(tài)頁(yè)面(jsp,php,aspx)里輸出的javascript代碼 效果一樣

function showjson(json){
    alert(json.url);
}

如果引用的js或動(dòng)態(tài)頁(yè)面里有 showjson({"url":"http://www.foxrdc.com"});這行代碼的話(huà),那就會(huì )彈出 http://www.foxrdc.com

jsonp的第一種方式,將目標作為js形式加載過(guò)來(lái),盡管其實(shí)對方是一個(gè)php

下面我們在這個(gè)頁(yè)面里來(lái)請求http://www.ibilibili.com/static/js/forbejson/userinfo.php頁(yè)面的數據,這個(gè)php頁(yè)面數據會(huì )有回調函數showjson,來(lái)調用我們這個(gè)bejson頁(yè)面里的 showjson方法 并將一個(gè)json傳入：

< ?php 
    //這里是php頁(yè)面里,回調showjson方法,這里的方法必須和上面定義的本地頁(yè)面中的回調方法一致
    echo 'showjson({"url":"http://www.foxrdc.com"})';
?>

請求又回調函數的php：

$("#getuserp").click(function(){
    $.getScript("http://www.foxrdc.com/test/userinfop.php");
});

那如果我們抓包后就會(huì )看到(如上圖),點(diǎn)擊按鈕后發(fā)起了一個(gè)http請求,

請求了//www.foxrdc.com/test/userinfop.php頁(yè)面,

頁(yè)面里輸出了 showjson({"url":"http://www.foxrdc.com"}) ,

因為是以javascript文件形式加載過(guò)來(lái) ,所以他會(huì )對本地頁(yè)面showjson發(fā)起回調(看綠色箭頭),并傳入json參數(看紅色箭頭),所以就會(huì )彈出了json中的url。

直接用jquery的ajax來(lái)請求jsonp

感謝葫蘆指出代碼錯誤，并提供正確代碼

?x
 $.ajax({
     url:'//www.foxrdc.com/test/userinfop.php',
     type:"GET",
            dataType:"jsonp",
            jsonp: false, 
            jsonpCallback: "showjson", //這里的值需要和回調函數名一樣
            success:function(data){
                console.log("Script loaded and executed.");
            },
            error:function (textStatus) { //請求失敗后調用的函數
                console.log(JSON.stringify(textStatus));
            }
});