jsonp解决跨域问题
jsonp跨域解决方案原理介绍：
正常情况下由于同源策略，前端js中A网站无法请求B网站数据，而html的script元素开放策略，A网站可以利用script元素从B网站获取可执行的js语句。在这种前提条件下，如果在A网站js中定义一个方法function funcCallback(data){}，并且在B网站后台返回这个funCallback(data)，那么A网站就可以通过加载script元素请求B网站，然后再通过funcCallback方法获取来自B网站的数据。
例子： A.html
1 <html> 2 <head> 3 <scrtip type="text/javascript" src="B网站"></script> 4 <script type="text/javascript"> 5 var funCallback = function(data){ 6 console.log(data); 7 } 8 </script> 9 </head> 10 <body></body> 11 </html>
B网站后台，如java：
1 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 response.getWriter().write("funCallback('hello');"); 3 }
从上面的例子中，可以使得A网站获取B网站的数据hello，注意后台输出的一定要是对应的js语句。
下面我们来说说，如何使用jsonp规范交互请求。
我们可以在A网站通过ajax去请求B网站的数据，一般数据以json格式传递。可以看一个例子。
A网站:
1 <html> 2 <head> 3 <scrtip type="text/javascript" src="jquery.js"></script> 4 <script type="text/javascript"> 5 document.ready({ 6 $.ajax({ 7 type: "get", 8 url: "B网站", 9 dataType: "jsonp", 10 jsonp: "jsonpcallback", 11 jsonpCallack: "success_jsonpCallback", 12 success: function(data){ 13 console.log(data); 14 } 15 }); 16 }); 17 </script> 18 </head> 19 <body></body> 20 </html>
B网站后台，如java：
1 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 String jsonpcallback = request.getParameter("jsonpcallback"); 3 response.getWriter().write(jsonpcallback + "{name: \"hello\"};"); 4 }
最后几个jsonp使用的注意点：
- 只能发送get请求
- 只能异步请求
- url前缀记得加上http://
