ajax实现JSONP跨域

URL	说明	允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	http://www.a.com/a.js http://a.com/b.js	同一域名下不同二级域名	http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取

JSONP的应用

@L_403_30@

JSONP跨域的原理

同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码

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

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

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

foo({"id": "name" : 张三,116)">"age": 17});

当然，如果服务端考虑得更加充分，返回的数据可能如下：

try{foo({17});}catch(e){}

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

function executeJsonp(url){ 　　var eleScript= document.createElement("script"); 　　eleScript.type = "text/javascript"; 　　eleScript.src = url; 　　document.getElementsByTagName("head")[0].appendChild(eleScript); } foo(data){ for(var p in data){ console.log(data[p]); } } var url = "http://www.a.com/user?id=123?callback=foo"; executeJsonp(url)

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

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

 $.ajax({ type:"get",data:"random="+Math.random(),url:url,dataType:"jsonp",jsonp:"callback",success:function(data){ //处理data数据 $.each(data,key,val) { $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); }); } });

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ q: "Arsenal" },242)">tweets) { console.info("Twitter returned: ",tweets); });

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法 foo(data){}//处理data数据 $.getScript('http://www.a.com/user?id=123&callback=foo');

jquery中的ajax方法怎样通过JSONP进行远程调用

$.ajax的参数

type：请求方式 GET/POST

原文链接

原文链接：https://www.f2er.com/ajax/161021.html

什么是跨域

什么是JSONP？

JSONP的应用

JSONP跨域的原理

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

jquery中的ajax方法怎样通过JSONP进行远程调用

$.ajax的参数

猜你在找的Ajax相关文章