JSON与JSONP

JSON与JSONP
Json:一种轻量级的数据传输格式，方便编写和解析，传输数据量小，速度快。
Jsonp:一种约定俗成的协议，广泛的使用于解决跨域问题。
JSON
1:Json的两种结构：
a:名称/值
{“name”:”张三”,”age”:”23”,”sex”:”男”}
b:值的有序列表(也称数组)
{ “person”:
[
{“name”:”张三”,”age”:”23”,”sex”:”男”},
{“name”:”李四”,”age”:”24”,”sex”:”男”},
{“name”:”王五妹”,”age”:”25”,”sex”:”女”}
]
}
[color=red][b]1.1JSON数据的访问[/b][/color]
创建一个变量,把json格式的字符串赋值给这个变量
var person={ “person”:
[
{“name”:”张三”,”age”:”23”,”sex”:”男”},
{“name”:”李四”,”age”:”24”,”sex”:”男”},
{“name”:”王五妹”,”age”:”25”,”sex”:”女”}
]
}
//访问person下的张三
console.log(person.person[0].name);
这样在控制台就输出：张三
/[color=red]/修改json数据，修改person下的张三[/color]
person.person[0].name=”张武侠”;
console.log(person.person[0].name);
这样在控制台就输出：张武侠;
[color=red]1.2JSON字符串和对象的相互转换[/color]
a:JSON.parse()//把JSON字符串转为一个json对象
b:JSON.stringify();//把JSON对象转换为一个json字符串
如：
把json对象转为字符串
person=JSON.stringify(person);
console.log(typeof person);//控制台输出string
把字符串转为JSON对象
person=JSON.parse(person);
console.log(typeof person);//控制台输出object
Jsonp
2同源策略：
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来:百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
总结起来，就是跨域问题
2.1跨域的基本原理：
利用<script>标签没有跨域的限制来达到与第三方通信的目的,当需要获取第三方的信息时,创建出一个<script>标签,其属性src指向第三方的API地址：
例如：谷歌提供的搜索接口：
http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?
并且提供一个回调函数来接受返回的信息,第三方返回的信息为json数据：
下面我们以上面谷歌提供的搜索接口举例说明：
上面接口的q表示你要搜索的值，callback表示在客户端的回调函数名会输给服务端,服务端返回客户端定义的回调函数名的方法，用以接受服务端返回的json数据.
下面看代码：
<!DOCTYPE html>
<html>
<head>
<title>JSONP跨域</title>
</head>
<body>
<input type="text" id="text"/>
<input type="button" id="sousou" value="搜索" />
<div></div>
</body>
<script type="text/javascript">
var sousou=document.getElementById("sousou");
var url="";
window.οnlοad=function(){
sousou.οnclick=function(){
//获取要搜索的文本
var text=document.getElementById("text").value;
//添加要搜索的文本,并在向服务器传输你接收返回数据的回调函数名称
url="http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q="+text+"&callback=fn";
//创建script标签并把要获取的url赋值给script标签的src，并且
var r1=document.createElement("script");
r1.setAttribute("type","text/javascript");
r1.setAttribute("src",url);
//把script标签添加到head中
document.getElementsByTagName("head")[0].appendChild(r1);
};
}
//接收服务端返回的json数据的回调函数
function fn(res){
if(res){
var div_1=document.getElementsByTagName("div")[0];
var str="";
var results=res.responseData.results;
for(var i in results){
str+=results[i].title+"\n";
str+=results[i].content+"\n";
str+=results[i].cacheUrl;
}
div_1.innerHTML=str;
}
}
</script>
</html>
搜索结果：
[img]http://zhiheng1001319.iteye.com/picture/129702[/img]

JSON与JSONP相关推荐

说说JSON和JSONP，也许你会豁然开朗
为什么80%的码农都做不了架构师?>>> 前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过 ...
JSON和JSONP有什么区别？
本文翻译自:What are the differences between JSON and JSONP? 格式明智,文件类型明智和实用明智吗? #1楼参考:https://stackoom.co ...
说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可 ...
json和jsonp（json是目的，jsonp是手段）
自己理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议.我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的" ...
JSON和JSONP
说说JSON和JSONP,也许你会豁然开朗作者: 随它去吧来源: 博客园发布时间: 2012-07-16 14:33 阅读: 8069 次推荐: 75 原文链接 [收藏] ...
由【说说JSON和JSONP..】博文，想到的MVC 扩展
前言今天看到随它去吧大牛的 [原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例文章,利用JSONP的跨域令人倍感狂喜.于是想,自己动手针对Asp.net MVC 进行一些扩展, ...
说说JSON和JSONP，也许你会豁然开朗，含jQuery使用jsonp用例
[原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了 ...
springmvc 自定义view支持json和jsonp格式数据返回
1.如果controlloer上用@ResponseBody注解,则用<mvc:message-converter>里面配置的json解析器进行解析 <mvc:annotation- ...
Ajax跨域提交JSON和JSONP
可以直接使用$.getJSON()方法实现跨域请求,参数中必须加上callback,如: var jsonpUrl = 'http://www.test.com/index.php?c=Api_Ord ...
jsonp请求html页面,JavaScript中的JSON和JSONP
简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议.众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将j ...

JSON与JSONP

JSON与JSONP相关推荐

最新文章

热门文章