通过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方式成功并且代码不繁琐,请给我留言

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

相关文章推荐

ajax请求中遇到的跨域问题的解决办法(jsonp)

有时候工作中我们需要从A网站访问B网站请求数据,但是这种方式浏览器是拒绝的,jquery的ajax为我们提供了一种解决办法,那就是通过标签进行包装,因为您标签是能实现跨域访问的,下面讲解具体的用法。 ...

ajax完美解决跨域问题(jsonp、nginx反向代理)

ajax完美解决跨域问题(jsonp、nginx反向代理) 做过web前端人都知道,经常会有ajax跨域问题,下面列举我经常使用的解决办法 第一种:使用jsonp,jQuery的a...

深入浅出JSONP:解决AJAX跨域问题

取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序...

深入浅出JSONP--解决ajax跨域问题

转载链接 取不到数据!  上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异...

JSONP解决ajax跨域问题(转)

由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个小白从遇到跨域不...

用JSONP解决ajax跨域问题

JSONP:JSON With Padding 要点: 1.script标签 2.用script标签加载资源是没有跨域问题的 概要: 在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函...

解决ajax跨域问题-深入浅出JSONP

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。JSON系统...

JSONP--解决ajax跨域问题

取不到数据!   上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个...
  • maoobo
  • maoobo
  • 2013年08月22日 14:41
  • 440

jsonp解决ajax跨域问题!

利用jsonp解决ajax跨域问题:(至于success里面的操作可以忽略:) 某工程下ajax请求代码: var isVisible = true; function getLog() { i...

深入浅出JSONP–解决Ajax跨域问题

[转载]深入浅出JSONP–解决ajax跨域问题 – 快乐乔巴 – 博客园. 取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(AS...
  • fer_ba
  • fer_ba
  • 2012年05月19日 09:42
  • 543
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:通过jsonp解决ajax的跨域请求问题
举报原因:
原因补充:

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