JSONP

Posted on Edited on In Views: Disqus:

 

一、

1、JSONP 代表 JSON with Padding。

2、有時候需要做跨網域傳送 JSON 格式時，瀏覽器預設是不允許的，這時可利用 JSONP 來處理。

 

二、後端的建立

HomeController.cs 內容為

using System.Text;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(string mycallback)
        {
            string s = @"{ ""name"":""John"", ""age"":30, ""city"":""New York"" }";
            return Content(mycallback + "(" + s + ");", "application/json", Encoding.UTF8);
        }
    }
}

 

三、前端的測試

<!DOCTYPE html>
<html>

<body>

    <h2>Request With a Callback Function</h2>
    <p>The backend returns a call to the function you send as a callback.</p>

    <button onclick="clickButton()">Click me!</button>

    <p id="demo"></p>

    <script>
        function clickButton() {
            var s = document.createElement("script");
            s.src = "http://219.85.157.132/Home/Index?mycallback=myDisplayFunction";
            document.body.appendChild(s);
        }

        function myDisplayFunction(myObj) {
            document.getElementById("demo").innerHTML = myObj.name;
        }
    </script>

</body>

</html>

 

假設後端主機的位置是 http://219.85.157.132，

則路徑 http://219.85.157.132/Home/Index?mycallback=myDisplayFunction，將會回傳如下內容

myDisplayFunction({ "name":"John", "age":30, "city":"New York" });

其意思為一旦發出 request 到路徑 http://219.85.157.132/Home/Index?mycallback=myDisplayFunction 之後，

response 回來要求立刻執行 myDisplayFunction(); 方法，

從上面範例可得知已經定義好方法的執行內容

function myDisplayFunction(myObj) {
    document.getElementById("demo").innerHTML = myObj.name;
}

而 myObj 參數內容已知為 { "name":"John", "age":30, "city":"New York" }

 

結果畫面則為

 

最後再提供一個 JSONP 來源供讀者測試

https://demos.telerik.com/kendo-ui/service/products?callback=funcName