js和jquery跨域及最常用最好的解決方案
1.什麼是跨域
我們經常會在頁面上使用ajax請求訪問其他伺服器的資料,此時,客戶端會出現跨域問題.
跨域問題是由於javascript語言安全限制中的同源策略造成的.
簡單來說,同源策略是指一段指令碼只能讀取來自同一來源的視窗和文件的屬性,這裡的同一來源指的是主機名、協議和埠號的組合.
例如:
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://70.32.92.74/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同一域名，不同二級域名（同上） 不允許（cookie這種情況下也不允許訪問） http://www.cnblogs.com/a.js
http://www.a.com/b.js不同域名 不允許
2.實現原理
在HTML DOM中,Script標籤是可以跨域訪問伺服器上的資料的.因此,可以指定script的src屬性為跨域的url,從而實現跨域訪問.
例如:
這種訪問方式是不行的.但是如下方式,卻是可以的.
這裡對返回的資料有個要求,即:伺服器返回的資料不能是單純的如{"Name":"zhangsan"}
如果返回的是這個json字串,我們是沒有辦法引用這個字串的.所以,要求返回的值,務必是var json={"Name":"zhangsan"},或json({"Name":"zhangsan"})
為了使程式不報錯,我們務必還要建立個json函式.
3.解決方案
方案一
伺服器端:
protected void Page_Load(object sender, EventArgs e) { string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})"; Response.Clear(); Response.Write(result); Response.End(); }客戶端:
<!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> <title></title> <script type="text/javascript"> var result = null; window.onload = function () { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx"; var head = document.getElementsByTagName("head")[0]; head.insertBefore(script, head.firstChild); }; function callback(data) { result = data; } function b_click() { alert(result.name); } </script> </head> <body> <input type="button" value="click me!" onclick="b_click();" /> </body> </html>
方案二，通過jquery來完成
通過jquery的jsonp的方式.使用此方式,對伺服器端有要求.
伺服器端如下:
protected void Page_Load(object sender, EventArgs e) { string callback = Request.QueryString["jsoncallback"]; string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})"; Response.Clear(); Response.Write(result); Response.End(); }
客戶端:$.ajax({
async: false,
url: "http://192.168.0.5/Web/web1.aspx",
type: "GET",
dataType: 'jsonp',
//jsonp的值自定義,如果使用jsoncallback,那麼伺服器端,要返回一個jsoncallback的值對應的物件.
jsonp: 'jsoncallback',
//要傳遞的引數,沒有傳參時，也一定要寫上
data: null,
timeout: 5000,
//返回Json型別
contentType: "application/json;utf-8",
//伺服器段返回的物件包含name,data屬性.
success: function (result) {
alert(result.date);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
});
實際上,在我們執行這段js時,js向伺服器發出了這樣一個請求:
http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742
而伺服器也相應的返回瞭如下物件:jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})此時就實現了跨域範文資料的要求.