jsonp解决ajax跨域问题

来源:互联网 发布:我的世界天堂js怎么下 编辑:程序博客网 时间:2024/06/14 07:43

“已阻止交叉源请求:同源策略不允许读取…”
jsonp的基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。
(也就是可以用<script type=”text/javascript” src=”http://xxx.com/js.js”>访问xxx.com上的js文件,而不受跨域的影响,jsonp的原理就像这样)。
不需要XMLHttpRequest或ActiveX的支持,并且在请求完毕后可以通过调用callback的方式回传结果。
但是,它只支持GET请求,不支持POST等其它类型的请求。
举例:

$.ajax({
url:'http://另一域名下的.com/result/',
type:'GET',
data:"id="+id,
dataType:'jsonp',
jsonpCallback:'jsoncallback',
success:function(data){
//返回后应执行的操作
}
})

另一域名下的php:

//执行程序得到需要返回的值$result
$callback = $_GET['callback'];
echo $callback.'('.$result.')';//必须用括号括起来

原理:首先在客户端注册一个callback (如:’jsoncallback’), 然后把callback的名字(如:jsonp1236827957501)传给服务器。
注意:服务端得到callback的数值后,要用jsonp1236827957501(……)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 ‘jsoncallback’的值 jsonp1236827957501 。
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

0 0
原创粉丝点击