建站
咨詢
售后
建站咨詢
新聞中心
什么是跨域？
簡單的來說，出于安全方面的考慮，頁面中的JavaScript無法訪問其他服務(wù)器上的數(shù)據(jù)，即“同源策略”。而跨域就是通過某些手段來繞過同源策略限制，實(shí)現(xiàn)不同服務(wù)器之間通信的效果。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了邵武免費(fèi)建站歡迎大家使用！
具體策略限制情況可看下表：
| 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 | 同一域名，不同協(xié)議 | 不允許 |
| http://www.a.com/a.js http://127.0.0.100/b.js | 域名和域名對應(yīng)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) 是一種輕量級的數(shù)據(jù)交換格式，而JSONP（JSON with Padding）則是JSON 的一種“使用模式”，通過這種模式可以實(shí)現(xiàn)數(shù)據(jù)的跨域獲取。
JSONP跨域的原理
在同源策略下，在某個(gè)服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的，但img、iframe、script等標(biāo)簽是個(gè)例外，這些標(biāo)簽可以通過src屬性請求到其他服務(wù)器上的數(shù)據(jù)。利用script標(biāo)簽的開放策略，我們可以實(shí)現(xiàn)跨域請求數(shù)據(jù)，當(dāng)然，也需要服務(wù)端的配合。當(dāng)我們正常地請求一個(gè)JSON數(shù)據(jù)的時(shí)候，服務(wù)端返回的是一串JSON類型的數(shù)據(jù)，而我們使用JSONP模式來請求數(shù)據(jù)的時(shí)候，服務(wù)端返回的是一段可執(zhí)行的JavaScript代碼。
舉個(gè)例子，假如需要從服務(wù)器（http://www.a.com/user?id=123）獲取的數(shù)據(jù)如下：
- {"id": 123, "name" : 張三, "age": 17}
那么，使用JSONP方式請求（http://www.a.com/user?id=123?callback=foo）的數(shù)據(jù)將會(huì)是如下：
- foo({"id": 123, "name" : 張三, "age": 17});
當(dāng)然，如果服務(wù)端考慮得更加充分，返回的數(shù)據(jù)可能如下：
- try{foo({"id": 123, "name" : 張三, "age": 17});}catch(e){}
這時(shí)候我們只要定義一個(gè)foo()函數(shù)，并動(dòng)態(tài)地創(chuàng)建一個(gè)script標(biāo)簽，使其的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函數(shù)來調(diào)用返回的數(shù)據(jù)了。
在jquery中如何通過JSONP來跨域獲取數(shù)據(jù)
第一種方法是在ajax函數(shù)中設(shè)置dataType為'jsonp'：
- $.ajax({
- dataType: 'jsonp',
- url: 'http://www.a.com/user?id=123',
- success: function(data){
- //處理data數(shù)據(jù)
- }
- });
第二種方法是利用getJSON來實(shí)現(xiàn)，只要在地址中加上callback=?參數(shù)即可：
- $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
- //處理data數(shù)據(jù)
- });
也可以簡單地使用getScript方法：
- //此時(shí)也可以在函數(shù)外定義foo方法
- function foo(data){
- //處理data數(shù)據(jù)
- }
- $.getJSON('http://www.a.com/user?id=123&callback=foo');
JSONP的應(yīng)用
JSONP在開放API中可以起到非常重要的作用，開放API是運(yùn)用在開發(fā)者自己的應(yīng)用上，而許多應(yīng)用往往是在開發(fā)者的服務(wù)器上而不是在新浪微博的服務(wù)器上，因此跨域請求數(shù)據(jù)成為開發(fā)者們所需要解決的一大問題，廣大開放平臺(tái)應(yīng)該實(shí)現(xiàn)對JSONP的支持，這一點(diǎn)新浪微博開放平臺(tái)便做的非常好（雖然某些API里沒有說明，但實(shí)際上是可以使用JSONP方式調(diào)用的）。
jquery ajax jsonp跨域調(diào)用實(shí)例代碼
使用GET方式和POST方式都可以進(jìn)行跨域調(diào)用
客戶端代碼
代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %>
服務(wù)器端代碼
代碼如下:
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();
}
}客戶端頁面和服務(wù)器端頁面在兩個(gè)項(xiàng)目中，以便進(jìn)行跨域調(diào)用測試。
跨域?qū)嵗a（需要加載jquery，頁面為utf-8編碼）：
代碼如下:
jsonp代碼：
代碼如下:
success_jsonpCallback([{"city":"廣州","companyName":"POCO.CN","createTime":"15:02發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16868.html","positionAdvantage":"身處凝聚力團(tuán)隊(duì)，老城區(qū)上班交通便利，雙休","positionName":"商業(yè)前端開發(fā)工程師","salary":"4k-7k"},{"city":"北京","companyName":"美通云動(dòng)（北京）科技有限公司","createTime":"14:47發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16866.html","positionAdvantage":"Html5技術(shù)最棒的團(tuán)隊(duì)","positionName":"Web前端開發(fā)","salary":"4k-8k"},{"city":"杭州","companyName":"口袋購物","createTime":"14:42發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/13024.html","positionAdvantage":"廣闊的發(fā)展平臺(tái)、自我價(jià)值體現(xiàn)的地方","positionName":"web前端開發(fā)工程師","salary":"8k-12k"},{"city":"北京","companyName":"布丁移動(dòng)","createTime":"14:02發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/1498.html","positionAdvantage":"三餐、周圍美女如云","positionName":"Android開發(fā)工程師","salary":"10k-20k"},{"city":"北京","companyName":"布丁移動(dòng)","createTime":"14:02發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/2539.html","positionAdvantage":"三餐，小橋流水人家，美女","positionName":"ios開發(fā)工程師","salary":"10k-20k"},{"city":"上海","companyName":"天天動(dòng)聽","createTime":"00:55發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/11494.html","positionAdvantage":"創(chuàng)業(yè)氛圍 講求小而美","positionName":"Android開發(fā)工程師","salary":"8k-16k"},{"city":"北京","companyName":"LBE安全大師","createTime":"11:39發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/5983.html","positionAdvantage":"五險(xiǎn)一金 績效獎(jiǎng)金","positionName":"Android開發(fā)工程師","salary":"8k以上"},{"city":"北京","companyName":"點(diǎn)心移動(dòng)","createTime":"11:24發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16736.html","positionAdvantage":"技術(shù)導(dǎo)向的團(tuán)隊(duì)氛圍，全方位的福利待遇","positionName":"Android","salary":"15k-25k"},{"city":"廣州","companyName":"荔枝FM","createTime":"10:44發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16634.html","positionAdvantage":"連堅(jiān)持跑步、保持體重都有獎(jiǎng)勵(lì)哦！","positionName":"WP手機(jī)開發(fā)工程師","salary":"16k-25k"},{"city":"北京","companyName":"網(wǎng)銀-京東子公司","createTime":"10:08發(fā)布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/14162.html","positionAdvantage":"負(fù)責(zé)京東商城-互聯(lián)網(wǎng)金融產(chǎn)品 JS開發(fā)","positionName":"Javascript 前端開發(fā)工程師","salary":"10k-20k"}])網(wǎng)站名稱：創(chuàng)新互聯(lián)JSON教程：jquery ajax jsonp跨域調(diào)用實(shí)例代碼
網(wǎng)頁URL：http://www.dlmjj.cn/article/dpeshdi.html
