昨天在會上,技術總監提到jsonp這東西... 咱一頭霧水? 不解神馬情況~~~~ 。 相信很多同胞和我一樣不知道這東東是神馬, 故今天貼出來給大家瞧瞧這東東.
順便貼出我做的一個Demo~。
Asynchronous JavaScript and XML (Ajax) 是驅動新一代 Web 網站（流行術語為 Web 2.0 網站）的關鍵技術。Ajax 允許在不干擾 Web 應用程式的顯示和行為的情況下在後台進行資料檢索。使用 XMLHttpRequest 函數擷取資料，它是一種 API，允許用戶端 JavaScript 通過 HTTP 串連到遠程伺服器。Ajax 也是許多 mashup 的驅動力，它可將來自多個地方的內容整合為單一 Web 應用程式。
不過，由於受到瀏覽器的限制，該方法不允許跨域通訊。如果嘗試從不同的域請求資料，會出現安全錯誤。如果能控制資料駐留的遠程伺服器並且每個請求都前往同一域，就可以避免這些安全錯誤。但是，如果僅停留在自己的伺服器上，Web 應用程式還有什麼用處呢？如果需要從多個第三方伺服器收集資料時，又該怎麼辦？
同源策略阻止從一個域上載入的指令碼擷取或操作另一個域上的文件屬性。也就是說，受到請求的 URL 的域必須與當前 Web 頁面的域相同。這意味著瀏覽器隔離來自不同源的內容，以防止它們之間的操作。這個瀏覽器策略很舊，從 Netscape Navigator 2.0 版本開始就存在。
克服該限制的一個相對簡單的方法是讓 Web 頁面向它源自的 Web 服務器請求資料，並且讓 Web 服務器像代理一樣將請求轉寄給真正的第三方伺服器。儘管該技術獲得了普遍使用，但它是不可伸縮的。另一種方式是使用架構要素在當前 Web 頁面中建立新地區，並且使用 GET 請求擷取任何第三方資源。不過，擷取資源後，架構中的內容會受到同源策略的限制。
克服該限制更理想方法是在 Web 頁面中插入動態指令碼元素，該頁面源指向其他域中的服務 URL 並且在自身指令碼中擷取資料。指令碼載入時它開始執行。該方法是可行的，因為同源策略不阻止動態指令碼插入，並且將指令碼看作是從提供 Web 頁面的域上載入的。但如果該指令碼嘗試從另一個域上載入文檔，就不會成功。幸運的是，通過添加 JavaScript Object Notation (JSON) 可以改進該技術。
什麼是JSONP JSONP是一個非官方的協議，它允許在伺服器端整合Script tags返回至用戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。
Jsonp原理：
首先在用戶端註冊一個callback, 然後把callback的名字傳給伺服器。
此時，伺服器先產生 json 資料。
然後以 javascript 文法的方式，產生一個function , function 名字就是傳遞上來的參數 jsonp.
最後將 json 資料直接以入參的方式，放置到 function 中，這樣就產生了一段 js 文法的文檔，返回給用戶端。
用戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時資料作為參數，傳入到了用戶端預先定義好的 callback 函數裡.（動態執行回呼函數）
#region 伺服器代碼
Jsonp_learn.aspx
protected void Page_Load(object sender, EventArgs e)
{
string callback = Request["callback"];
string response = string.Format("'value1':'{0}','value2':'{1}'",Request.QueryString["p1"],Request.QueryString["p2"]);
string call = callback + "({" + response + "})";
Response.Write(call);
}
#endregion
#region 用戶端代碼
<!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" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery.ajax({
type: "get",
url: "Jsonp_learn.aspx",
dataType: "jsonp",
jsonp: "callback",
data: "p1=1&p2=2&callback=?",
success: function (msg) {
alert("value1：" + msg.value1 + " value2：" + msg.value2);
}
});
});
</script>
</head>
<body>
</body>
</html>
#endregion
這隻是一個簡單的Demo.. 方便瞭解JSONP.需要深入瞭解的.. 請另行查閱資料~~。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
