什麽是JSON,JSON如何工作以及使用它

本周,我想介绍一个我认为已经成为任何开发人员工具包中重要组成部分的主题:通过AJAX加载和操作来自其他站点的JSON提要的能力。如今,除了RSS提要之外,许多站点还使用JSON共享数据,这有充分的理由:与XML / RSS相比,JSON提要可以更轻松地异步加载。本文将介绍以下内容:

  • 什麽是JSON?
  • 爲什麽JSON很重要?
  • 我們如何在項目中使用JSON?

什麽是JSON?

JSONJavaScript Object Notation 的缩写,是一种以有组织的,易于访问的方式存储信息的方式。 简而言之,它为我们提供了人类可读的数据集合,我们可以以一种真正的逻辑方式访问它们。

存儲JSON數據

舉一個簡單的例子,關于我的信息可以用JSON編寫,如下所示:

var jason = {
    "age" : "24",
    "hometown" : "Missoula, MT",
    "gender" : "male"
};

这将创建一个我们使用变量访问的对象jason。通过将变量的值括在花括号中,表明该值是一个对象。在对象内部,我们可以使用"name": "value"配对声明任意数量的属性,并用逗号分隔。要访问中存储的信息jason,我们只需引用所需属性的名称即可。 例如,要访问有关我的信息,我们可以使用以下代码段:

document.write('Jason is ' jason.age); // Output: Jason is 24
document.write('Jason is a ' jason.gender); // Output: Jason is a male

在数组中存儲JSON數據

稍微复杂一点的示例涉及将两个人存储在一个变量中。为此,我们将多个对象括在方括号中, 这表示一个数组。例如,如果我需要在一个变量中包含有关自己和兄弟的信息,则可以使用以下内容:

var  family  =  [ {
    “ name”:“ Jason” ,
    “ age”:“ 24” ,
    “性别”:“男性”
} ,
{
    “ name”:“ Kyle” ,
    “ age”:“ 21” ,
    “性别”:“男性”
} ];

要訪問此信息,我們需要訪問要訪問的人的數組索引。例如,我們將使用以下代碼段訪問存儲在中的信息family:

document.write(family[1].name); // Output: Kyle
document.write(family[0].age); // Output: 24

注意:如果有必要循環訪問存儲的信息,這將很有用,因爲它會使自己進入for具有自動遞增值的循環。

嵌套JSON數據

在变量中存储多个人的另一种方法是嵌套对象。 为此,我们将创建类似于以下内容的内容:

var family = {
    "jason" : {
        "name" : "Jason Lengstorf",
        "age" : "24",
        "gender" : "male"
    },
    "kyle" : {
        "name" : "Kyle Lengstorf",
        "age" : "21",
        "gender" : "male"
    }
}

訪問嵌套對象中的信息更容易理解。要訪問對象中的信息,我們將使用以下代碼段:

document.write(family.jason.name); // Output: Jason Lengstorf
document.write(family.kyle.age); // Output: 21
document.write(family.jason.gender); // Output: male

嵌套的JSON和數組可以根據需要進行組合,以存儲所需的數據。

爲什麽JSON很重要?

隨著崛起AJAX作爲動力的網站,它變得越來越重要地點,以能夠加載數據快速異步,或在不延誤頁面渲染的背景。在不刷新頁面的情況下切換布局中某個元素的內容會爲我們的應用程序增加一個“哇”的因素,更不用說爲用戶帶來更多的便利了。由于社交媒體的普及和便捷,許多站點都依賴于Twitter,Flickr等站點提供的內容。這些站點提供了易于在服務器端導入和使用的RSS提要,但是如果我們嘗試使用AJAX加載它們,則會遇到麻煩:只有當我們向RSS提要時才可以加載RSS提要。與托管的域名相同。嘗試通過jQuery的$.ajax()方法加載我的Flickr帳戶的RSS提要導致以下JavaScript錯誤:

[Exception... "Access to restricted URI denied" code: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
location: "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js Line: 19"]

JSON使我們能夠克服跨域問題,因爲我們可以使用稱爲JSONP的方法,該方法使用回調函數將JSON數據發送回我們的域。正是這種功能使JSON變得異常有用,因爲它打開了許多以前難以解決的門。

我們如何將JSON加載到項目中

将JSON数据加载到我们的Web应用程序中最简单的方法之一就是使用$.ajax()jQuery库中可用的方法。 检索数据的难易程度将根据提供数据的站点而有所不同,但是一个简单的示例可能如下所示:

$.ajax(
    type:'GET',
    url:"http://example.com/users/feeds/",
    data:"format=json&id=123",
    success:function(feed) {
        document.write(feed);
    },
    dataType:'jsonp'
);

本示例將請求JSON格式的最新供稿項目,並將其輸出到浏覽器。顯然,我們不想將原始JSON數據輸出到浏覽器,但是此示例顯示了從外部源加載JSON的基礎。