通过jsonp解决ajax的跨域请求问题

原创 2016年08月31日 09:25:05

AJAX对于我们来说可能已经不是陌生的事情了,但如果你的是跨域请求,那么AJAX已经无能为力,其实这个也是可以弥补的,就是利用 jsonp。其实也不是什么技术,只是利用JS标签里面的跨域特性进行跨域数据访问,服务器返回的JS代码在客户端浏览器再次执行得到我们想要的效果,利 用jsonp可以做到防AJAX实现跨域请求,但是我们并不需要创建XMLHttpRequest,当然也得不到readyState,因为这并不是 AJAX了。

  下面举一个例子来说明:

假设需要在域名www.a.com下请求www.b.com/ajax.php,相比AJAX服务器端的代码没有什么太大的改变,关键是客户端代码,例如在ajax.php中随便写点代码:

<?php
$arr =array(
    'x' => array('id'=>10,'user'=>'zhangsan'),
    '3'=>array('id'=>11,'user'=>'lisi'),
    '8' =>array('id'=>14,'user'=>'wangwu')
);
$jsondata = json_encode($arr);
echo $_GET['callback'] . "($jsondata);";
?>

则www.a.com下的客户端代码可以是:

<html>
<head>
<script>
function ck(data){
        var str = '';
        for(i in data){
            str += data[i].id + '___' + data[i].user + '<br/>';
        }
        document.getElementById('content').innerHTML=str;
}
function test(){
        var s = document.createElement('script');
        s.src = "http://www.b.com/ajax.php?callback=ck";
        head=document.getElementsByTagName('head').item(0);
        head.appendChild(s);
}
</script>
</head>
<body>
<div id="content" style="border:1px solid red;width:300px;height:200px;"></div>
 <input type="button" value="test" onclick="test()" />
</body>
</html>

其 中test()函数的作用是创建script标签,动态请求www.b.com/ajax.php并传入回调函数名ck,服务器会返回js代码,就像我们 看到的输出执行函数的代码,并且将json数据作为参数传入回调函数,和AJAX中使用的回调函数一样,实现我们想要的效果。

  如果使用jquery则代码简洁并且更像AJAX的用法,代码示例:

<script src="jquery.js"></script>
<script>
function test(){
 $.ajax({
        url:'http://www.b.com/ajax.php',
        type:'GET',
        data:{name:'xxx'},
        dataType:'jsonp',
        jsonp:'callback',
        success:function(data){
           var str = '';
           for(i in data){
            str += data[i].id + '___' + data[i].user + '<br/>';
            }
            $('#content').html(str);
        }
    });
}
</script>
<div id="content" style="border:1px solid red;width:300px;height:200px;"></div>
<input type="button" value="test" onclick="test()" />

  在jquery中还有一个方法是,使用起来更简洁一点,只需要将函数内的代码更改为:

$.getJSON("http://www.b.com/ajax.php?callback=?",
            function(data){
                var str = '';
                for(i in data){
                    str += data[i].id + '___' + data[i].user + '<br/>';
                }
                $('#content').html(str);
        });

        最后要说的一点是jsonp和ajax不同,是利用script标签的跨域请求,应该是这个原因测试POST提交方式没有成功,如果有那位朋友测试POST方式成功并且代码不繁琐,请给我留言

版权声明:本文为博主原创文章,未经博主允许不得转载。

Jsonp解决ajax跨域问题

一、介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力...
  • saytime
  • saytime
  • 2016年05月30日 22:36
  • 17131

解决Ajax 跨域问题 - JSONP原理解析

解决Ajax 跨域问题 - JSONP原理解析为什么会有跨域问题? - 因为有同源策略 同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一...
  • qq_16415157
  • qq_16415157
  • 2016年11月11日 23:24
  • 6090

通过JSONP实现AJAX 跨域请求数据

通过JSONP实现AJAX 跨域请求数据
  • jinxingfeng_cn
  • jinxingfeng_cn
  • 2016年05月21日 08:49
  • 1717

【JSONP】通过nodejs做服务器简单模拟实现跨域请求

第一听说JSONP,看着名字以为使一中数据类型。其实不然,这是跨域请求的方式。 大家可能认为自己没接触过,但是大家一定用过这种方式,只是大家自己没有留意过。 如: 这个标签大家很熟悉的吧...
  • swl979623074
  • swl979623074
  • 2016年11月29日 19:03
  • 1371

跨域解决方案之一---->JQuery.Ajax JSONP解决跨域访问

JSONP的最基本的原理是:动态添加一个标签,而script标签的src属性是没有跨域的限制的。本文后端使用servlet做测试:前端页面代码: Insert title here $(...
  • puyangmengxue
  • puyangmengxue
  • 2015年02月02日 13:33
  • 1135

jsonp解决跨域请求以及其工作原理

jsonp解决跨域请求以及其工作原理    一.跨域问题 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Or...
  • lululove19870526
  • lululove19870526
  • 2016年09月19日 21:29
  • 2479

ajax跨域问题(jsonp(GET提交)以及 CORS (GET POST提交 毫无问题))

一、通过jsonp get提交: 服务端: ajax 客户端: 二、cors 处理post提交方法 主要是服务端加上头: 服务端: 客户端...
  • qqahanson
  • qqahanson
  • 2015年01月13日 21:40
  • 4489

js原生态跨域请求与ajax中jsonp跨域请求

在web开发中我们经常会说起脚本的跨域访问的问题,会出现跨域访问的限制是因为javascript语言安全限制中的同源策略(same-origin policy )所造成的。 同源策略简单的说就是一段...
  • jiandan217
  • jiandan217
  • 2016年04月29日 09:24
  • 2246

ajax中的跨域请求及原理

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于Java...
  • permike
  • permike
  • 2016年08月25日 15:36
  • 5517

JS跨域问题以及采用JSONP方式解决跨域问题

在做项目的时候,客户要做成客户端和服务端两部分,客户端向服务端进行认证,我开始的时候没有直接替换ip地址,后来采用ip地址替换之后,出现了问题,后台可以收到访问的请求,但是无法拿到后台返回的信息,后来...
  • wangyang1354
  • wangyang1354
  • 2016年05月18日 20:08
  • 1767
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:通过jsonp解决ajax的跨域请求问题
举报原因:
原因补充:

(最多只允许输入30个字)