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

2019-11-06 08:27:03

字体：大中小

来源：转载

供稿：网友

　　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的用法，代码示例：

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