Jquery跨域得到Json

這兩天用 Jquery 跨域取數據的時候，常常碰到 invalid label 這個錯誤，十分的鬱悶，總是取不到服務器端發送回來的 json 值，

通常跨域用到的兩個方法爲：$.ajax 和$.getJSON

 

最後，仔細安靜下來，細讀 json 官方文檔後發現這麼一段：

 

JSON數據是一種能很方便經過JavaScript解析的結構化數據。若是獲取的數據文件存放在遠程服務器上（域名不一樣，也就是跨域獲取數據），則須要使用jsonp類型。使用這種類型的話，會建立一個查詢字符串參數 callback=? ，這個參數會加在請求的URL後面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。若是要指定回調函數的參數名來取代默認的callback，能夠經過設置$.ajax()的jsonp參數。

 

其實jquery跨域的原理是經過外鏈 <script>  來實現的,而後在經過回調函數加上回調函數的參數來實現真正的跨域

 

Jquery 在每次跨域發送請求時都會有callback這個參數，其實這個參數的值就是回調函數名稱，因此，服務器端在發送json數據時，應該把這個參數放到前面，這個參數的值每每是隨機生成的，如：jsonp1294734708682，同時也能夠經過 $.ajax 方法設置 callback 方法的名稱。明白了原理後，服務器端應該這樣發送數據：

 

string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";

 

這樣，json 數據 {\"userid\":0,\"username\":\"null\"} 就做爲了 jsonp1294734708682 回調函數的一個參數

下面咱們來開始實例

假如正常返回的數據:

{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }

下面咱們來介紹下jquery的本身個參數

/**
*@dataType (String) 
*"xml": 返回 XML 文檔，可用 jQuery 處理。
*"html": 返回純文本 HTML 信息；包含的script標籤會在插入dom時執行。
*"script": 返回純文本 JavaScript 代碼。"json": 返回 JSON 數據 。
*"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。
*"text": 返回純文本字符串
*/

/**
*@jsonp (String)在一個jsonp請求中重寫回調函數的名字。
*這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，
*好比{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。
*/


/**
*@jsonpCallback (String)
*爲jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。
*這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。
*你也能夠在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。
*/

 

 1不指定jsonp的名稱、

$.ajax({
    url: 'http://lifeloopdev.info/get_events',
    dataType: "jsonp",
    data: "offset=0&num_items=10",
    username: 'username',
    password: 'password',
    success: function (data) {
        $.each(data.success, function (i, item) {
            $("body").append('<h1>' + item.title + '</h1>');
        });
    }
});

服務器須要這樣返回數據示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["callback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

2指定jsonp名稱，和返回函數名稱的function、

//這裏咱們本身指定了jsonp的callback的名字
$.ajax({
    url: 'http://lifeloopdev.info/get_events',
    dataType: "jsonp",
    data: "offset=0&num_items=10",
    username: 'username',
    password: 'password',
    jsonp: "successCallback",
    jsonpCallback: 'successCallback'
});

function successCallback(data) {
    $.each(data.success, function (i, item) {
        $("body").append('<h1>' + item.title + '</h1>');
    });
}

  服務器須要這樣返回數據示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

3指定jsonp名稱，不指定返回函數名稱的function、

$.ajax({
    url: 'http://lifeloopdev.info/get_events',
    dataType: "jsonp",
    data: "offset=0&num_items=10",
    username: 'username',
    password: 'password',
    jsonp: "successCallback",
    success: function (data) {
        $.each(data.success, function (i, item) {
            $("body").append('<h1>' + item.title + '</h1>');
        });
    }
});

服務器須要這樣返回數據示例: 

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

4使用getJSON()獲取數據、

/**
*注意：
*這裏調用的地址中jsoncallback=? 是關鍵的所在！其中咱們關心的是 jsoncallback=? 起什麼做用了？原來 jsoncallback=? 被替換後，會把方法名稱傳給服務器。
*咱們在服務器端要作什麼工做呢？服務器要接受參數 jsoncallback ，而後把 jsoncallback 的值做爲 JSON 數據方法名稱返回 .
*/
$.getJSON("http://192.168.20.86/friend/getMyJsonData.aspx?jsoncallback=?", function (data) {
    $.each(data.success, function (i, item) {
        $("body").append('<h1>' + item.title + '</h1>');
    });
});

服務器須要這樣返回數據示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["jsoncallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

 

若是這篇文章對您有幫助，您能夠打賞我