zoukankan      html  css  js  c++  java
  • 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://
  • 相关阅读:
    Css3 常见鼠标滑过效果集合
    HTML5 Media事件
    HTML 5 Audio/Video DOM buffered 属性
    Cocos2d-x 3.X 事件分发机制
    在 WPF 程序中使用 MVVM 模式
    Windows Phone 版 Cocos2d-x 程序的结构
    转载:Cocos2D-x 游戏接入 Windows 设备所需做的六件事
    使用 Cocos2d-x 3.1.1 创建 Windows Phone 8 游戏开发环境
    转载:Windows Phone 8.1 投影我的屏幕使用教程
    NHibernate 中使用 nvarchar(max) 类型
  • 原文地址:https://www.cnblogs.com/chenhao1990/p/4627576.html
Copyright © 2011-2022 走看看