js跨域请求jsonp解决方案-最简单的小demo

最新推荐文章于 2020-08-22 06:26:43 发布

diangan2660

最新推荐文章于 2020-08-22 06:26:43 发布

阅读量147

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/shianliang/p/9239870.html

版权

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

直接用ajax调用不同域的数据：

调用的文件

文件内容

<html>
<head>
<title>跨域测试_ajax</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script>

    $(function() {
        $("#but").click(function(){
             $.ajax({
                    type:"post",
                    url:"http://localhost:8081/category2.json",
                    success:function(data){
                        /* console(data); */
                        $("#text").html(data);
                    }
             }) 
        })
        
    })
</script>

</head>
<body>
    <button type="button" id="but">获取跨域的数据</button>

    <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

报错：Failed to load http://localhost:8081/category2.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9003' is therefore not allowed access.

跨域请求被拒绝，其实数据已经获取成功了，只不过是被浏览器给拒绝了

通过js引用将数据引进来：

 <html>
 <head>
     <title>跨域测试-引用js片段的形式将数据引进来</title>
     <script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
     <script>
         //回调函数
         function service (result) {
             var data = JSON.stringify(result); //json对象转成字符串
             $("#text").val(data);
         }
     </script>
    
 </head>
 <body>
   
     跨域的数据：<textarea id="text" style="width: 400px; height: 100px;"></textarea>
    
   <!-- 要在上面的回调函数、文本域标签加载完了再跨域引用 -->
  <script src='http://localhost:8081/category2.json'></script>
 </body>
 </html>

页面

数据获取成功

所以通过http://localhost:8081/category2.json得到的js文件，就是我们之前定义的service函数,并且它的参数就是我们需要的json数据，这样我们就跨域获得了我们需要的数据。

这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

其实ajax有对jsonp的访问进行处理：

<html>
<head>
<title>跨域测试_ajax</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script>

    $(function() {
        $("#but").click(function(){
             $.ajax({
                    url:"http://localhost:8081/category2.json",
                    dataType: 'jsonp',  
                   //  jsonp: 'callback',      //为服务端准备的参数  
                    jsonpCallback: 'service',   //回调函数 
                    success:function(){
                        /* console(data); */
                        
                    }
             })
        })
    })
    function service(data){
                var str=JSON.stringify(data);
                $("#text").text(str);
            }
</script>

</head>
<body>
    <button type="button" id="but">获取跨域的数据1111</button>

    <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>