Jquery：getJSON方法解決跨站ajax （json的解剖和運用） –附圖片載入時的loading顯示…

json包括兩種資料結構，一種類似於雜湊表，另外一種類似於數組。

簡單的說，就是用xml傳輸資料的一個替代方案，傳的位元組數更少，傳輸的過程實質上是用{}或者[]包裹的字串，在代碼短解釋對象。{}對應於object，[]對應於array，在代碼端同樣可以做反向操作。現在很多基於ajax的應用都是在伺服器端擷取資料，然後產生json，傳到用戶端，然後在用戶端渲染介面。。

再簡單點，就是一種特定格式的字串

 

OK,瞭解了JSON的結構，我們就可以回來看一下JQuery中的$.getJSON()方法了。該方法有三個參數，$.getJSON(String url, Hash params, Function callback)。其中，url是擷取JSON結構資料的請求地址，即訪問該地址會得到一段JSON結構的文本（這裡被JQuery封裝了，這一段文本是通過請求對象的responseText屬性得到的）。params是向url地址的服務發送的參數，伺服器可以根據這些參數做出響應。參數的結構跟JSON的結構類似，都是形似“{key1:value1，key2：value2}”的結構。callback為回呼函數，即function(json){//code...}，在這個函數中做用戶端處理。在callback函數中，參數json就是通過向url請求得來的JSON結構文本構造出來的對象。json參數的使用很簡單，它是一個雜湊表對象，可以通過json.key的方式來使用其中定義的屬性。例如，如果我們傳入的是前面所述例子的JSON結構，我們可以通過json.addresses[0]來擷取addresses的第一個值。
JSON不神秘，說白了其實就是個雜湊表結構，在JavaScript中可以直接使用，非常方便。

 

 //-------------------------------------------------------

google “Access to restricted URI denied”，發現問題出在Cross-Domain上面，看了Jquery的開發資料得知，從1.2版本開始使用 jQuery.getJSON(url,[data],[callback]) 來進行跨域提交，參考如下：

As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback.

看了上面 JSONP的連結，幾乎一無所獲，按照其要求我加上了?callback=?",還是取不到任何資料，我的JS代碼如下：

 

$.getJSON("FetchAuthenticationTicketHandler.ashx?jsoncallback=?",

    function(data) {

        $("#divHeaderLink").html(data.name);

});

 

 

但是始終得不到資料，斷點設到data.name一行，從來沒有被執行過。於是，開始考察jsoncallback=?,發現這個其實是有值的，只是自己一直沒有handle（其實是因為自己不知道怎麼樣handle，google很久，幾乎沒有找到任何直接使用ashx來處理remote json的例子），但是搜到一篇元老級的文章，是一篇專門介紹jquery ajax的文章，上面說需要將jsoncallback的值傳回來，原來如此，於是就將ashx的方法修改了一下，幾經轉折，終於調試出來下面的代碼：

 

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;

using System.Net.Json;

/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        
       
        context.Response.ContentType = "text/plain";

        JsonObjectCollection collection = new JsonObjectCollection();
        collection.Add(new JsonStringValue("url", "http://124.172.245.164:999/FTPImage_SpeInfoImage/2009/12/1/20091201173357_w200_h80_t1_i1.jpg"));
        collection.Add(new JsonStringValue("value", "FTPImage_SpeInfoImage/2009/12/1/20091201173357_w200_h80_t1_i1_jpg"));
        
        string str = context.Request.QueryString["jsoncallback"] + "(" + collection + ")";
        context.Response.Write(str);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

 

 

其中，JsonObjectCollection 類要引用using System.Net.Json;是JSON官方網站推薦的一個dll，感覺也很不錯。使用這個的好處是對於html代碼的處理，因為json是通過“”傳遞資料的，但是html中也是含有“”的，如果直接手動拼字，會很麻煩。

這個ashx執行的結果如下：

jsonXXXXXXXXXXXXXX?其中 jsonXXXXXXXXXXXXXX 就是context.Request.QueryString["jsoncallback"] 的值。

 

 

 ---------------------

新浪調查結合json顯示的柱狀圖。。 survey.rar

/Files/Fooo/survey.rar/Files/Fooo/EtWebSite.rar

 

E假旅遊結合json顯示圖片載入時的Loading狀態。。。

 /Files/Fooo/EtWebSite.rar

 

getJson的簡單使用樣本：

/Files/Fooo/JquerygetJSONdemo.rar