JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器不用做任何改造【使用jsonp的时候jsonp: "callback",callbackde的名字要和 服务器设置保持一致】。
它的基本思想是,网页通过添加一个<script>
元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
首先,网页动态插入<script>
元素,由它向跨源网址发出请求。
1.js原生写法(来自阮大师的博客浏览器同源政策及其规避 http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html)
1 function addScriptTag(src) { 2 var script = document.createElement('script'); 3 script.setAttribute("type","text/javascript"); 4 script.src = src; 5 document.body.appendChild(script); 6 } 7 8 window.onload = function () { 9 addScriptTag('http://example.com/ip?callback=foo'); 10 } 11 12 function foo(data) { 13 console.log('Your public IP address is: ' + data.ip); 14 };
2.jquery写法 (来源http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html)
1 $("#getJsonpByHand").click(function () { 2 CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback") 3 }) 4 function jsonpcallback(data) { 5 console.log(data) 6 }
3.ajax (来源http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html)
1 $("#getJsonpByJquery").click(function () { 2 $.ajax({ 3 url: 'http://localhost:2701/home/somejsonp', 4 dataType: "jsonp", 5 jsonp: "callback", 6 success: function (data) { 7 console.log(data) 8 } 9 }) 10 })