Ajax和WEB服务数据格式:JSON与JSONP

前端之家收集整理的这篇文章主要介绍了Ajax和WEB服务数据格式:JSON与JSONP前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JSON

  JSON(JavaScript Object Notation)是Douglas Crockford提出的。他是一个轻量级的数据交换格式,基于JavaScript对象字面量。

  我们可以将之前的XML图书格式的文件内容转换成下面的JSON格式:

[
{
title:
"The Principles of Beautiful Web Design,2nd Edition",
url:
"http://www.sitepoint.com/books/design2/",
author:
"Jason Beaird",
publisher:
"SitePoint",
price: {
currency:
"USD",
amount:
39.95
}
},
{
title:
"jQuery: Novice to Ninja",
url:
"http://www.sitepoint.com/books/jquery1/",
author:
"JEarle Castledine & Craig Sharkie",
amount:
29.95
}
},
{
title:
"Build Your Own Database Driven Website",
url:
"http://www.sitepoint.com/books/PHPMysqL4/",
author:
"Kevin Yank",
amount:
39.95
}
}
]

  这是一个通过对象来表示书的一种方式,并且有title、url、author、publisher、和price等信息。price是一个子对象,并且他包含货币类型和价格。

  在JavaScript中很容易处理JSON。你可以使用浏览器原生的JSON.parse方法或者Douglas Crockford的JSON-js库。就算这些都不能用,你也可以使用javaScript的eval方法。不需要再写额外的处理数据的方法

var json = xhr.responseText;
var book = JSON.parse(json);
alert(book[
0].title); //first book title
alert(book[1].url); //second book URL

  使用JSON的优点在于:

  • 比XML轻了很多,没有那么多冗余的东西。

  • JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。

  • 在JavaScript中处理JSON很简单。

  • 其他语言例如PHP对于JSON的支持也不错。

  JSON也有一些劣势:

  • JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。

  • 如果你使用eval()来解析的话,会容易出现安全问题。

  尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

  JSONP (JSON-p)

  如果你使用XMLHttpRequest来调用JSON的web服务,返回的数据可以通过JSON.parse()或者eval()来处理。你也可以使用Ajax组件来做脚本的插入,例如,将远程加载的脚本插入在DOM节点中,通过script标签调用

var script = document.createElement("script");
script.src
= "http://webservice.com/?a=1&b=2";
document.getElementsByTagName(
"head")[0].appendChild(script);

  跟XMLHttpRequest不同,插入script标签可以在不同源的情况下获取其他服务的数据。这对于流量分析、书签工具、小插件、广告系统来说是很理想的选择。

  不过,返回的JSON数据通常都是当做本地的代码立即执行。也不会赋值给变量,所以后面就再访问不到了。不过这个问题我们可以通过给网络服务传递一个callback参数来进行回调:

var script = document.createElement("script");
script.src
= "http://webservice.com/?a=1&b=2&callback=MyDataHandler";
document.getElementsByTagName(
"head")[0].appendChild(script);

  这时候,网络服务通常会返回一个包含在一个回调函数中的JSON数据,这就是JSONP,或者“JSON with padding”,看看代码

MyDataHandler([
{
title:
"The Principles of Beautiful Web Design,
amount:
39.95
}
}
...
]);

  在JSON对象下载完毕之后,作为参数传递给了MyDataHandler()方法

  JSON和JSONP已经是现在最流行的异步交互的数据格式了。但是在压缩传输数据大小的方面还是可以再研究的。RockUX会在后面讲到关于自定义数据返回。

原文链接:https://www.f2er.com/ajax/164941.html

猜你在找的Ajax相关文章