[jQuery]Ajax實現跨域訪問JSON
Ajax跨域訪問JSON
環境：.net4.0+jQuery+JSON.net
因為在跨域實現，所以這里新建網站，這個網站只需要Ashx文件
public void ProcessRequest(HttpContext context)
{
string strJson="[{"id":"100009","name":"mayixue","link":"www.mayixue.com"},{"id":"100009","name":"mogujie","link":"www.mogujie.com"},{"id":"100009","name":"dazayuan","link":"www.dazayuan.com"}]";context.Response.Write(strJson);
}
然后在IIS中建立網站Web_DataSource，就是上邊這個網站。
在vs中再建網站項目Web_Client，用於跨域訪問Web_DataSource。
（一） 正常的JqueryAajx跨域請求
function jsonajax() {$.ajax({
url: "http://www.mayixue.com/json/Handler.ashx",
type: "get",
dataType: "json",
success: function(json) {
if (json != null) {
var rowcount = json.length;
if (rowcount > 0) {
var html = '';
for (var i = 0; i < rowcount; i++) {
html += '<li><div class="dd">·</div><div class="dt"><a href="' + json[i].link + '" target="_blank">' + json[i].name + '</a></div></li>';
}
$('.list').html('<ul>' + html + '</ul>');
}
}
}
});
}
結果：會彈出提示窗口。
（二） Jquery Jsonp請求
function jsonpajax() {$.ajax({
url: "http://www.mayixue.com/json/Handler.ashx?callback=?",
type: "get",
dataType: "jsonp",
jsonp: "callback",
success: function(json) {
if (json != null) {
var rowcount = json.length;
if (rowcount > 0) {
var html = '';
for (var i = 0; i < rowcount; i++) {
html += '<li><div class="dd">·</div><div class="dt"><a href="' + json[i].link + '" target="_blank">' + json[i].name + '</a></div></li>';
}
$('.list').html('<ul>' + html + '</ul>');
}
}
}
});
}
此時，跨域的Web_DataSource中的ashx文件數據提供要改一下：
public void ProcessRequest(HttpContext context)
{
string strJson ="[{"id":"100009","name":"mayixue","link":"www.mayixue.com"},{"id":"100009","name":"mogujie","link":"www.mogujie.com"},{"id":"100009","name":"dazayuan","link":"www.dazayuan.com"}]";string callback = context.Request.Params["callback"];
context.Response.Write(callback+"("+strJson+")");
}
返回的數據的格式為：
?([{"id":"100009","name":"mayixue","link":"www.mayixue.com"},{"id":"100009","name":"mogujie","link":"www.mogujie.com"},{"id":"100009","name":"dazayuan","link":"www.dazayuan.com"}])
=================================知識分享=====================================
JSONP的最基本的原理是:動態添加一個標簽，而script標簽的src屬性是沒有跨域的限制的。這樣說來,這種跨域方式其實與ajax XmlHttpRequest協議無關了.
這樣其實"jQuery AJAX跨域問題"就成了個偽命題了,jquery $.ajax方法名有誤導人之嫌.
如果設為dataType: 'jsonp', 這個$.ajax方法就和ajax XmlHttpRequest沒什么關系了,取而代之的則是JSONP協議.
JSONP是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問JSONP即JSON with Padding。由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源。如果要進行跨域請求，我們可以通過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。
jsonCallback 函數jsonp1236827957501(....): 是瀏覽器客戶端注冊的，獲取跨域服務器上的json數據后，回調的函數
Jsonp原理：
首先在客戶端注冊一個callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務器。
此時，服務器先生成 json 數據。
然后以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數 'jsoncallback'的值 jsonp1236827957501 .
最后將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標簽，並執行返回的 javascript 文檔，此時javascript文檔數據,作為參數，
傳入到了客戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))里.（動態執行回調函數）
可以說jsonp的方式原理上和是一致的(qq空間就是大量采用這種方式來實現跨域數據交換的) .JSONP是一種腳本注入(Script Injection)行為,所以也有一定的安全隱患.