本文介绍了JSON（JavaScript Object Notation）的基本概念，包括它的存储方式、数组和嵌套数据结构的使用。强调了JSON在AJAX应用中的重要性，特别是在跨域数据交换中的优势。并提供了使用jQuery从Flickr加载JSON数据的实例，展示了如何创建AJAX请求、处理JSON响应并展示照片流。
json对象最后不要，逗号 字符衔接中间加，或者+
本周我想介绍一个我认为已经成为任何开发人员工具包的重要组成部分的主题：通过AJAX从其他站点加载和处理JSON源的能力。许多网站除了现在的RSS Feed之外还使用JSON共享数据，并且有很好的理由：可以比XML / RSS更容易地异步加载JSON Feed。本文将介绍以下内容：
- 什么是JSON？
- 为什么JSON重要？
- 我们如何在项目中使用JSON？
我们还将在本项目末尾使用我们的新技术与JSON，以构建一个从Flickr加载照片的快速应用程序，无需页面刷新。
什么是JSON？
JSON是短期的JavaScript对象符号，并存储在一个有组织的，易于访问的方式信息的方式。 简而言之，它给了我们一个人类可读的数据集合，我们可以以一种非常合乎逻辑的方式访问数据。
存储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将数据存储在数组中
一个稍微复杂的例子涉及将两个人存储在一个变量中。为此，我们将多个对象包围在方括号中 ，表示数组。例如，如果我需要在一个变量中包含我自己和我的兄弟的信息，我可能会使用以下内容：
var family = [{
"name" : "Jason",
"age" : "24",
"gender" : "male"
},
{
"name" : "Kyle",
"age" : "21",
"gender" : "male"
}];要访问此信息，我们需要访问我们希望访问的人员的数组索引。例如，我们将使用以下代码片段访问存储的信息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提要，如果我们从它所托管的域名相同。$.ajax()
[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格式请求最新的Feed项，并将其输出到浏览器。显然，我们不想将原始的JSON数据输出到浏览器，但是这个例子显示了从外部源加载JSON的基础知识。
一个实际的例子：使用JSON和jQuery加载Flickr Streams
为了展示JSON在现实世界中的作用，我们来自Flickr使用jQuery和JSON版本的“Latest”照片Feed加载照片。
步骤1：创建AJAX请求
Flickr的照片流是相对容易访问的。所有用户都有唯一的ID号，我们将作为请求的一部分发送到此URL。
http://api.flickr.com/services/feeds/photos_public.gne我们需要发送的请求询问有关用户的最新照片，以及要求JSON格式响应的标志。我们需要发送的请求将如下所示：
id=XXXXXXXX@NXX&lang=en-us&format=json&jsoncallback=?在上述示例中，XXXXXXXX @ NXX需要替换为用户的ID。我们将编写一个函数，所以用户的ID将被作为参数传递flickrID。我们的功能将被调用loadFlickr()。让我们创建一个将加载JSON响应的函数：
function loadFlickr(flickrid)
{
$('#feed').html('<span><img src="/blog/images/lightbox-ico-loading.gif" alt=""></span>');
$.ajax({
type:'GET',
url:"http://api.flickr.com/services/feeds/photos_public.gne",
data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",
success:function(feed) {
// Do something with the response
},
dataType:'jsonp'
});
}返回的JSON数据将看起来像这样（请注意，为了简洁起见，我已经删除了所有其中一个返回的照片
({
"title": "Uploads from ennuidesign",
"link": "http://www.flickr.com/photos/ennuidesign/",
"description": "",
"modified": "2009-03-17T03:53:36Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "This Is How You Get People to Talk About You",
"link": "http://www.flickr.com/photos/ennuidesign/3361269251/",
"media": {"m":"http://farm4.static.flickr.com/3470/3361269251_9c55e6dc24_m.jpg"},
"date_taken": "2009-03-16T21:53:36-08:00",
"description": "<p><a href="http://www.flickr.com/people/ennuidesign/">ennuidesign</a> posted a photo:</p> <p><a title="This Is How You Get People to Talk About You" href="http://www.flickr.com/photos/ennuidesign/3361269251/"><img src="http://farm4.static.flickr.com/3470/3361269251_9c55e6dc24_m.jpg" alt="This Is How You Get People to Talk About You" width="240" height="180"></a></p> <p>A guy I know, Trevor Gnauck, made this custom pint glass for me. He runs a company called <a href="http://www.bluedragonllc.com/">Blue Dragon Custom Laser Engraving</a> with his family, and he had no reason whatsoever to do anything nice for me.<br> <br> He did, though, and look how cool that is! I can now drink a beer out of my own likeness.<br> <br> I know it wasn't his intention, but this is how you get people to talk about you. Unprovoked kindness will always inspire kindness in return, and the power of a kind gesture should never be overlooked.</p>",
"published": "2009-03-17T03:53:36Z",
"author": "nobody@flickr.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__");a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script> (ennuidesign)",
"author_id": "29080075@N02",
"tags": "gift ennuidesign trevorgnauck bluedragoncustomlaserengraving"
}
// The rest of the photo entries go here...
]步骤2：处理JSON数据
我们要做的是显示最新16张照片的缩略图，这些照片将链接到图像的中等尺寸显示。Flickr JSON是一个有点混乱，它不提供直接链接到我们的照片的缩略图版本，所以我们必须使用一些诡计，以达到它，我们将覆盖在一个时刻。每个照片条目都存储在一个被调用的数组中items，我们在AJAX调用中使用这个数组feed.items。要获取有关每个条目的数据，我们将循环浏览项目，直到我们打到最后一张照片或16张照片; 以先到者为准。我们来修改我们的函数并设置循环：
function loadFlickr(flickrid)
{
// Display a loading icon in our display element
$('#feed').html('<span><img src="/blog/images/lightbox-ico-loading.gif" alt=""></span>');
// Request the JSON and process it
$.ajax({
type:'GET',
url:"http://api.flickr.com/services/feeds/photos_public.gne",
data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",
success:function(feed) {
// Create an empty array to store images
var thumbs = [];
// Loop through the items
for(var i=0, l=feed.items.length; i < l && i < 16; i)
{
// Process each image
}
// Display the thumbnails on the page
},
dataType:'jsonp'
});
}我们感兴趣的元素是存储在“media”元素中的“m”元素。这可以在我们的循环中使用feed.items[i].media.m。我们将在此值上运行一个正则表达式，以获得中间和缩略图图像路径，我们将组合到链接的缩略图中。然后，我们将新组合的HTML推送到我们创建的大拇指。完成循环后，我们将所有图像组合成一个HTML字符串， 并用加载的缩略图替换显示元素的内容。我们将这个功能添加到我们的脚本中：
function loadFlickr(flickrid)
{
// Display a loading icon in our display element
$('#feed').html('<span><img src="/blog/images/lightbox-ico-loading.gif" alt=""></span>');
// Request the JSON and process it
$.ajax({
type:'GET',
url:"http://api.flickr.com/services/feeds/photos_public.gne",
data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",
success:function(feed) {
// Create an empty array to store images
var thumbs = [];
// Loop through the items
for(var i=0, l=feed.items.length; i < l && i < 16; i)
{
// Manipulate the image to get thumb and medium sizes
var img = feed.items[i].media.m.replace(
/^(.*?)_m.jpg$/,
'<a href="/blog/$1.jpg"><img src="/blog/$1_s.jpg" alt=""></a>'
);
// Add the new element to the array
thumbs.push(img);
}
// Display the thumbnails on the page
$('#feed').html(thumbs.join(''));
// A function to add a lightbox effect
addLB();
},
dataType:'jsonp'
});
}请注意，我还添加了一个函数调用addLB()到这个函数的结尾; 这将添加灯箱 效果到我们的缩略图，这纯粹是为了美观。
步骤3：呼叫我们的功能
在这一点上，我们准备好调用我们的函数。要加载我的Flickr流，我们需要调用我们的函数如下：
loadFlickr("29080075@N02");发布的示例将多个用户的照片流引入到包含框中，而不会导致页面刷新。看看演示的源代码，看看它是如何完成的。注意：请记住，此演示是展示如何加载JSON数据，而不是如何实现代码来调用该函数。JavaScript调用是内联的，不应该在生产脚本中使用。
https://www.copterlabs.com/json-what-it-is-how-it-works-how-to-use-it/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
