Ajax跨域訪問JSON

環境：.net4.0+jQuery+JSON.net

因為在跨域實現，所以這裡新建網站，這個網站只需要Ashx檔案

public void ProcessRequest(HttpContext context)

{

context.Response.Write(strJson);

}

然後在IIS中建立網站Web_DataSource，就是上邊這個網站。

在vs中再建網站專案Web_Client，用於跨域訪問Web_DataSource。

（一）正常的JqueryAajx跨域請求

$.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請求

$.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)

{

stringcallback = 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)行為,所以也有一定的安全隱患.