具体策略限制情况可看下表:
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 |
不同域名 | 不允许 |
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。
举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:
- {"id": 123, "name" : 张三, "age": 17}
当然,如果服务端考虑得更加充分,返回的数据可能如下:
- 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:
function executeJsonp(url){ var eleScript= document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = url; document.getElementsByTagName("head")[0].appendChild(eleScript); } function foo(data){ for(var p in data){ console.log(data[p]); } } var url = "http://www.a.com/user?id=123?callback=foo"; executeJsonp(url)便可以使用foo函数来调用返回的数据了。
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
- $.ajax({
- dataType: "jsonp",
- url: "http://www.a.com/user?id=123",
- success: function(data){
- //处理data数据
- }
- });
- $.getJSON("http://www.a.com/user?id=123&callback=?", function(data){
- //处理data数据
- });
也可以简单地使用getScript方法:
- //此时也可以在函数外定义foo方法
- function foo(data){
- //处理data数据
- }
- $.getJSON("http://www.a.com/user?id=123&callback=foo");
JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)。
使用GET方式和POST方式都可以进行跨域调用
客户端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function aa() {
$.ajax({
url: "http://localhost:12079/WebForm2.aspx",
data: "p1=1&p2=2&callback=?",
type: "post",
processData: false,
timeout: 15000,
dataType: "jsonp", // not "json" we"ll parse
jsonp: "jsonpcallback",
success: function(result) {
alert(result.value1);
}
});
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<p>
<input id="Button1" type="button" value="button" onclick="aa()" /></p>
</body>
</html>
服务器端代码
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string callback = Request["callback"];
string v1="1";
string v2="2";
string response = "{"value1":"" + v1 + "","value2":"" + v2 + ""}";
string call = callback + "(" + response + ")";
Response.Write(call);
Response.End();
}
}
客户端页面和服务器端页面在两个项目中,以便进行跨域调用测试。
跨域实例代码(需要加载jquery,页面为utf-8编码):
<!--拉勾招聘数据-->
<script type="text/javascript">
function success_jsonpCallback(data){
var html = "";
var pos = "";
html += "<ul>";
jQuery.each(data, function(k, v) {
if(k<10){
pos = "【" + v.city+ "】" + v.positionName + "("+ v.salary +") - "+v.companyName;
if(pos.length > 20){
pos = pos.substring(0,19)+"...";
}
html += "<li><a href=""+v.posiitonDetailUrl+"" target="_blank" title="【" + v.city+ "】" + v.positionName + "("+ v.salary +") - "+v.companyName+"">"+pos+"</a></li>";
}
});
html += "</ul><div class="more-link"><a href="http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91" rel="external nofollow" target="_blank" target="_blank">更多</a></div>";
jQuery("#lagouData").html(html);
}
function getLagouData() {
jQuery.ajax({
async:false,
url: "http://www.lagou.com/join/listW3cplus?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91",
type: "GET",
dataType: "jsonp",
jsonpCallback: "success_jsonpCallback",
contentType: "application/jsonp; charset=utf-8",
success: function(data) {
success_jsonpCallback(data);
}
});
}
getLagouData();
</script>
<div id="lagouData"></div>
jsonp代码:
success_jsonpCallback([{"city":"广州","companyName":"POCO.CN","createTime":"15:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16868.html","positionAdvantage":"身处凝聚力团队,老城区上班交通便利,双休","positionName":"商业前端开发工程师","salary":"4k-7k"},{"city":"北京","companyName":"美通云动(北京)科技有限公司","createTime":"14:47发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16866.html","positionAdvantage":"Html5技术最棒的团队","positionName":"Web前端开发","salary":"4k-8k"},{"city":"杭州","companyName":"口袋购物","createTime":"14:42发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/13024.html","positionAdvantage":"广阔的发展平台、自我价值体现的地方","positionName":"web前端开发工程师","salary":"8k-12k"},{"city":"北京","companyName":"布丁移动","createTime":"14:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/1498.html","positionAdvantage":"三餐、周围美女如云","positionName":"Android开发工程师","salary":"10k-20k"},{"city":"北京","companyName":"布丁移动","createTime":"14:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/2539.html","positionAdvantage":"三餐,小桥流水人家,美女","positionName":"ios开发工程师","salary":"10k-20k"},{"city":"上海","companyName":"天天动听","createTime":"00:55发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/11494.html","positionAdvantage":"创业氛围 讲求小而美","positionName":"Android开发工程师","salary":"8k-16k"},{"city":"北京","companyName":"LBE安全大师","createTime":"11:39发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/5983.html","positionAdvantage":"五险一金 绩效奖金","positionName":"Android开发工程师","salary":"8k以上"},{"city":"北京","companyName":"点心移动","createTime":"11:24发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16736.html","positionAdvantage":"技术导向的团队氛围,全方位的福利待遇","positionName":"Android","salary":"15k-25k"},{"city":"广州","companyName":"荔枝FM","createTime":"10:44发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16634.html","positionAdvantage":"连坚持跑步、保持体重都有奖励哦!","positionName":"WP手机开发工程师","salary":"16k-25k"},{"city":"北京","companyName":"网银-京东子公司","createTime":"10:08发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/14162.html","positionAdvantage":"负责京东商城-互联网金融产品 JS开发","positionName":"Javascript 前端开发工程师","salary":"10k-20k"}])
JavaScript 数组对象实例返回数组的数目:array.lengthvar cars = ["Saab", "Volvo", "BMW"];//定义一个数组console.log(car...
HTML DOM 属性 对象HTML DOM 节点在 HTML DOM (Document Object Model) 中, 所有的都是节点:文档是文档节点所有 HTML 元素是元...
HTML DOM Embed 对象Embed 对象Embed 对象是 HTML5 中新增的。Embed 对象代表一个 HTML embed元素。访问 Embed 对象 你可以使用 ...
Fieldset disabled 属性 Fieldset 对象实例禁用 fieldset:document.getElementById("myFieldset").disabled=true;输出结果:Per...