JSON与JSONP

zhiheng1001319

浏览: 3827 次
性别:
来自: 西安

最近访客更多访客>>

fcr1209973

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript Ajax json jsonP

json jsonp javascript

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”:”女”}
]
}
1.1JSON数据的访问
创建一个变量,把json格式的字符串赋值给这个变量
var person={ “person”:
[
{“name”:”张三”,”age”:”23”,”sex”:”男”},
{“name”:”李四”,”age”:”24”,”sex”:”男”},
{“name”:”王五妹”,”age”:”25”,”sex”:”女”}
]
}
//访问person下的张三
console.log(person.person[0].name);
这样在控制台就输出：张三
//修改json数据，修改person下的张三
person.person[0].name=”张武侠”;
console.log(person.person[0].name);
这样在控制台就输出：张武侠;
1.2JSON字符串和对象的相互转换
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.onload=function(){
sousou.onclick=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>
搜索结果：