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://
  • 相关阅读:
    Django(app的概念、ORM介绍及编码错误问题)
    Django(完整的登录示例、render字符串替换和redirect跳转)
    Construct Binary Tree from Preorder and Inorder Traversal
    Single Number II
    Single Number
    Binary Tree Level Order Traversal II
    Binary Tree Level Order Traversal
    Binary Tree Zigzag Level Order Traversal
    Recover Binary Search Tree
    Add Binary
  • 原文地址:https://www.cnblogs.com/chenhao1990/p/4627576.html
Copyright © 2011-2022 走看看