Jsonp简单认识(后端使用的是asp.net mvc)

一、Jsonp简介：由于浏览器基于安全有同源策略(同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性)机制，所以前端无法使用Ajax来获取来获取其他域名下返回的数据，而Jsonp可以实现跨域访问。

　　Jsonp是基于<script>标签不受同源策略限制，可以加载任意地方的JavaScript文件来实现的。Jsonp实现理念就是，和服务端约定好一个函数名，当请求文件时，服务端返回一段JavaScript。这段JavaScript调用了约定好的函数，并且将数据当做参数传入。

二、简单Demo

1、在visual studio新建项目JsonpDemo和项目OtherDomain，项目结构如下

Jsonp简单认识(后端使用的是asp.net mvc)

2、在JsonpDemo项目中新增HomeController及其视图，视图中代码如下：

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <title>Index</title>
11 </head>
12 <body>
13     <div>
14         <input type="button" id="getJsonpByHand" value="get jsonp by hand" />
15     </div>
16     <script type="text/javascript" >
17         $("#getJsonpByHand").click(function () {
18 　　　　　　　//55157位OtherDomain项目启动后网站的端口
19             CreateScript("http://localhost:55157/home/somejsonp?");
20         })
21         function CreateScript(src) {
22             $("<script><//script>").attr("src", src).appendTo("body")
23         }
24 　　　　　//myCallBack就是与后端约定好的函数
25         function myCallBack(data) {
26             console.log(data);
27         }
28     </script>
29 </body>
30 </html>

View Code