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