当前位置:编程学习 > JS >>

ajax jsonp跨域的方法实例方法

CORS正好可以解决这个问题。

CORS与JSONP相比,无疑更为先进、方便和可靠。

1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。

举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:

{"id": 123, "name" : 张三, "age": 17}

那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:

foo({"id": 123, "name" : 张三, "age": 17});当然,如果服务端考虑得更加充分,返回的数据可能如下:

try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo:

<script type="text/javascript" src="http://www.a.com/user?id=123?callback=foo"></script>

便可以使用foo函数来调用返回的数据了。

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp':

$.ajax({ 2.dataType: 'jsonp', 3.url: 'http://www.a.com/user?id=123', 4.success: function(data){ 5.//处理data数据 6.} 7.});第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){ 2.//处理data数据 3.});也可以简单地使用getScript方法:

//此时也可以在函数外定义foo方法

function foo(data){
/处理data数据 }
$.getScript('http://www.a.com/user?id=123&callback=foo');

2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。

PHP中: header(”"Access-Control-Allow-Origin: *”");
html中: <meta http-equiv=”Access-Control-Allow-Origin” content=”*”>

如果CORS中包含了302跳转,则需要302跳转之后的网址也包含CORS的header请求。

目前IE8以上和其他主流浏览器都已经支持了CORS跨域,相信这个技术未来会非常实用。

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,