JSONP跨域请求
Posted 左岸边
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于JSONP跨域请求的主要内容，如果未能解决你的问题，请参考以下文章