JQuery中getJSON的使用方法

更新時間：2010年12月13日 15:35:34 作者：

最近有一個活動，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進行交互。但是由于兩個網(wǎng)站處于不同的域名下，而Ajax的應用中，由于安全的問題，瀏覽器默認是不支持跨域調用的，最后選用了JQuery中的getJSON方法

這里采用了JSONP（JSON with Padding-填充json數(shù)據(jù)也就是常用的json跨域方式）：利用script標簽，通過特定的src地址的調用，來執(zhí)行一個客戶端的js函數(shù)，在服務器端生成相對的數(shù)據(jù)（JSON格式）并以參數(shù)的形式傳遞給這個客戶端的js函數(shù)并執(zhí)行這個函數(shù)，前提是需要服務器端的數(shù)據(jù)輸出支持。在JQuery1.2以后支持JSONP的應用。

JSON 是一種含有簡單括號結構的純文本，因此許多通道都可以交換 JSON 消息。因為同源策略的限制，我們不能在與外部服務器進行通信的時候使用 XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法，即通過使用 JSON 與 <script> 標記相結合的方法，從服務端直接返回可執(zhí)行的JavaScript函數(shù)調用或者JavaScript對象。

整個調用過程中，起關鍵作用的是jsoncallback=?,在客戶端調用時需在請求地址中添加參數(shù)：jsoncallback=?；同時服務器端則需要把jsoncallback的值作為方法名傳回來。

服務端代碼：

復制代碼代碼如下:

 
protected void Page_Load(object sender, EventArgs e) 
{ 
Response.Write(Request.QueryString["jsoncallback"] + "({name:'test'})"); 
} 

html頁面調用：

復制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head > 
<script type="text/javascript" src="jquery-1.4.4.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
$.getJSON("http://localhost:10272/test.aspx?jsoncallback=?", 
function(data) { 
$("#divHeaderLink").html(data.name); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="divHeaderLink"> 
</div> 
</body> 
</html> 