JSONP跨域请求

JSONP

一，jsonp的原理

jsonp，跨域请求策略，是一种使用模式，利用script标签属性的src属性，绕过浏览器的同源策略，获取另一个服务器数据的方式。

什么是同源策略？

　　同源策略就是浏览器阻止从一个源加载文档或脚本获取或设置另一个源加载的文档的属性。

　　因为是浏览器的限制，所以请求和响应是可以进行的，我们可以使用一些特殊的方法绕过，例如img，ifame，script的src属性。

二，用法

 1 //jsonp跨域技术，在数据传递的时候需要使用GET请求
 2 <!DOCTYPE html>
 3 <html>
 4 <head lang="en">
 5     <meta charset="UTF-8">
 6     <title></title>
 7 </head>
 8 <body>
 9 
10     <p>
11         <input type="button" onclick="Jsonp1();"  value='提交'/>
12     </p>
13 
14     <p>
15         <input type="button" onclick="Jsonp2();" value='提交'/>
16     </p>
17 
18     <script type="text/javascript" src="jquery-1.12.4.js"></script>
19     <script>
20         //原生的ajax跨域
21         function Jsonp1(){
22             var tag = document.createElement('script');
23             tag.src = "http://c2.com:8000/test/";//发送数据内容
24             document.head.appendChild(tag);//添加内容至标签
25             document.head.removeChild(tag);
26         }
27 
28 
29        //基于JQuery的jsonp
30         function Jsonp2(){
31             $.ajax({
32                 url: "http://c2.com:8000/test/",
33                 type: 'GET',
34                 dataType: 'JSONP',//在使用跨域请求时需要指明数据类型为JSONP
35                 success: function(data, statusText, xmlHttpRequest){
36                     console.log(data);
37                 }
38             })
39         }
40     </script>
41 </body>
42 </html>

三，CORS

跨域资源共享，本质是设置响应头，使浏览器允许跨域请求。

简单请求与非简单请求

1，请求方式为HEAD,GET,POST

2，请求头信息：

　　Accept

　　 Accept-Language

Content-Language

Last-Event-ID

Content-Type 对应的值是以下三个中的任意一个

application/x-www-form-urlencoded

multipart/form-data

text/plain

注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

两种请求的区别：

1：简单请求：一次请求

2,：非简单请求：两次请求，在发送数据之前先发一次请求做预检。

基于cors实现ajax跨域

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <p>
 9         <input type="submit" onclick="XmlSendRequest();" />
10     </p>
11 
12     <p>
13         <input type="submit" onclick="JqSendRequest();" />
14     </p>
15 
16     <script type="text/javascript" src="jquery-1.12.4.js"></script>
17     <script>
18         function XmlSendRequest(){
19             var xhr = new XMLHttpRequest();
20             xhr.onreadystatechange = function(){
21                 if(xhr.readyState == 4) {
22                     var result = xhr.responseText;
23                     console.log(result);
24                 }
25             };
26             xhr.open('GET', "http://c2.com:8000/test/", true);
27             xhr.send();
28         }
29 
30         function JqSendRequest(){
31             $.ajax({
32                 url: "http://c2.com:8000/test/",
33                 type: 'GET',
34                 dataType: 'text',
35                 success: function(data, statusText, xmlHttpRequest){
36                     console.log(data);
37                 }
38             })
39         }
40 
41 
42     </script>
43 </body>
44 </html>