Web Api之Cors跨域以及其余跨域格局美学原理(三)

我们了解ajax不可以跨域访问,然则有时我们真的需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有此外实现跨域格局

美学原理 1

3、末了就是测试,查看效果了

美学原理 2

2、创建一个新Web项目并新建html文件

4、最终测试看看效果

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>手动实现JSONP实现跨域请求Demo</title>
 6     <!--引用jquery-->
 7     <script src="/jquery-1.7.1.js"></script>
 8     <script type="text/javascript">
 9         var urlPrefix = "http://localhost:2571";
10         //js跨域请求中的回调函数
11         function fun(data) {
12             for (var i in data) {
13                 alert(data[i]);
14             }
15         }
16         //js跨域请求
17         function jsRequest() {
18             var script = document.createElement("script");
19             script.setAttribute("id", "script1");
20             script.setAttribute("type", "text/javascript");
21             script.setAttribute("src", urlPrefix + "/demo.ashx?uName=zzq&callBack=fun");
22             //添加到body之后
23             document.documentElement.appendChild(script);
24             //使用完后移除
25             $("#script1").remove();
26         }
27 
28         //jq跨域请求
29         function jqRequest() {
30             $.ajax(
31             {
32                 url: urlPrefix + "/demo.ashx",
33                 type: "get",
34                 data: { uName: "zzq" },
35                 dataType: "jsonp",       //指定Jq发送jsonp请求
36                 jsonpCallback: "fun",  //指定回调函数,没有此项可以直接在success中写回调
37                 jsonp: 'callBack'       //默认callback
38                 //success: function (data) {
39                 //    for (var i in data) {
40                 //        alert(data[i]);
41                 //    }
42                 //}
43             });
44         }
45     </script>
46 </head>
47 <body>
48     <!--Js跨域请求和Jquery跨域请求都不支持post方式,jquery跨域其实就是JS跨域的封装-->
49     <input type="button" value="使用原生JS跨域请求" onclick="jsRequest()" />
50     <input type="button" value="使用Jquery跨域请求" onclick="jqRequest()" />
51 </body>
52 </html>

美学原理 3

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>WebApi跨域Demo</title>
 6     <script src="/jquery-1.10.2.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             getData();
10         });
11         function getData() {
12             var furl = "http://localhost:19125/api/home";
13             $.get(furl, function (data) {
14                 for (var i = 0; i < data.length; i++) {
15                     alert(data[i]);
16                 }
17             });
18         }
19     </script>
20 </head>
21 <body>
22     WebApi跨域Demo
23 </body>
24 </html>

美学原理 4

七个请求都是回来同样的音讯

     注意这两句放Application_Start方法最前边,否则会促成无法跨域,暂不知其原因

2、创设一个新Web项目并新建html文件

美学原理 5

1、首先创造一个Web项目,在这边我动用相似处理程序

 1         public void ProcessRequest(HttpContext context)
 2         {
 3             //接收参数
 4             string uName = context.Request["uName"];
 5             string data = "{\"name\":\"" + uName + "\",\"age\":\"23\"}";
 6             //只需在服务端添加以下两句
 7             context.Response.AddHeader("Access-Control-Allow-Origin", "*");
 8             //跨域可以请求的方式
 9             context.Response.AddHeader("Access-Control-Allow-Methods", "POST,GET");
10             context.Response.Write(data);
11         }

加了以下信息

美学原理 6

 1     public class Demo : IHttpHandler
 2     {
 3         public void ProcessRequest(HttpContext context)
 4         {
 5             //接收参数
 6             string callBack = context.Request["callBack"];
 7             string uName = context.Request["uName"];
 8             string data = "({\"name\":\"" + uName + "\",\"age\":\"23\"})";
 9             string josnStr = callBack + data;
10             context.Response.Write(josnStr);
11         }
12 
13         public bool IsReusable
14         {
15             get
16             {
17                 return false;
18             }
19         }
20     }

美学原理 7

1、同样是先创设一个Web项目,跟下边一样采纳的是形似处理程序,*.ashx,这里自己只贴出首要的一对

1 var cors = new EnableCorsAttribute("*", "*", "*");
2 GlobalConfiguration.Configuration.EnableCors(cors);

美学原理 8

加了以下音信

2、在Global的Application_Start中增长如下代码

美学原理 9

3、创制一个新Web项目并新建html文件

二、添加请求头实现跨域

1、新建WebApi项目并透过NuGet下载程序包,搜索程序包【Microsoft.AspNet.WebApi.Cors】,一般自己欣赏下载一个中文包,方便查看注释

美学原理,三、CROS实现WebApi跨域

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>添加请求头跨域访问Demo</title>
 6     <script src="/jquery-1.7.1.js"></script>
 7     <script type="text/javascript">
 8         function crosRequest() {
 9             $.post("http://localhost:2571/XHR2Demo.ashx", { uName: "zzq" }, function (data) {
10                 for (var i in data) {
11                     alert(data[i]);
12                 }
13             }, "json")
14         }
15     </script>
16 </head>
17 <body>
18     <input type="button" value="添加请求头跨域访问" onclick="crosRequest()" />
19 </body>
20 </html>

一、手动实现JSONP跨域

3、测试,将多少个网站都开辟,http://localhost:2571:填写第一步创建网站的地址

总结

1、手动创立JSONP跨域

亮点:无浏览器要求,可以在其余浏览器中使用此方法

症结:只襄助get请求模式,请求的后端出错不会有提示,造成不可以处理异常

2、添加请求头实现跨域

可取:帮忙任意请求情势,并且后端出错会像非跨域这样有报错,可以对特别举行拍卖

症结:包容性不是很好,IE的话 <IE10 都不辅助此办法

其两种的话我觉着原理就是第二种的实现,实际测试发现跟第二种同等,通过翻看请求报文中的Head也能观察