JSON与JSONP

最新推荐文章于 2024-09-16 08:47:17 发布

落花飘飘雪

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量130

点赞数

本文链接：https://blog.csdn.net/u012218143/article/details/84536285

版权

javascript Ajax json jsonP 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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]