json和jsonp区别

JSON和JSONP虽然只有一个字母的差别, 但其实他们根本不是一回事儿：

JSON是一种数据交换格式, 而JSONP是一种非官方跨域数据交互协议。一个是描述信息的格式, 一个是信息传递的约定方法。

一、JSON对象概述

1、什么是JSON

JSON是一组无序数据的集合, 这个集合是无序属性的集合, 这个集合可以使用键值对进行表述。在内存中表现为一段连续内存的集合。

2、JSON的定义

在Javascript中, JSON的定义非常简单, 只需要一对花括号即可表示。

基本语法：

var json对象 = {属性:属性值,属性:属性的值…}

特别注意：

在json对象中, 其属性可以没有任何符号, 也可以通过单引号或双引号括起来。

var person = {name:'xiaomei', age:18, email:'xm@itcast.cn'};
var person = {'name':'xiaomei', 'age':18, 'email':'xm@itcast.cn'};
var person = {"name":'xiaomei', "age":18, "email":'xm@itcast.cn'};

以上代码也可以改写成如下形式：(代码一致, 结构不同)

var person = {
name:'xiaomei',
age:18,
email:'xm@itcast.cn'
};

3、探究JSON是何种数据类型

var person = {
name:'xiaomei',
age:18,
email:'xm@itcast.cn'
};
alert(typeof person); //object

弹出结果：object, 所以由此可知：JSON也是对象的一种, 我们可以称之为"JSON对象"。

4、JSON对象的访问

在Javascript中, 访问对象属性是通过点号.来完成的。如Math.random(), new Date().getTime()

var person = {
name:'xiaomei',
age:18,
email:'xm@itcast.cn'
};
alert(person.name);
alert(person.age);
alert(person.email);

5、使用JSON保存大批量数据

在实际项目开发中, 我们通常借助数组+JSON来保存大批量数据, 格式如下：

var json对象 = [{属性:属性值},{属性:属性值},{属性:属性值}];

示例代码：使用JSON对象来保存多个人的信息

var person = [{name:"刘备", age:43, email:"liubei@itcast.cn"}, {name:"关羽", age:42, email:"guanyu@itcast.cn"},
{name:"张飞", age:41, email:"zhangfei@itcast.cn"}];

① 使用索引+对象属性的形式访问某个人的信息(如关羽)

alert(person[1].name);
alert(person[1].age);
alert(person[1).email);

② 使用for或for...in循环遍历输出所有信息

for(var i=0;i");
document.write(person[i].age+"
");
document.write(person[i].email+"
");
}
for(var i in person){
document.write(person[i].name+"
");
document.write(person[i].age+"
");
document.write(person[i].email+"
");
}

6、使用PHP生成与解析JSON数据

json_encode：把一个数组或对象转化生成JSON格式的数据(字符串)

json_decode($json,$flag)：把一个JSON字符串转化生成数组或对象

参数说明：

$json ：json格式的字符串

$flag ：布尔类型值, 可以是true或false, true代表返回数组, false代表返回对象, 默认为false。

特别说明：

json_encode在转换数组到JSON字符串时要特别注意

① 如果这个数组是索引型数组, 其会自动转化为JS数组格式的字符串

② 如果这个数组是关联型数组, 其会自动转化为JS中JSON格式的字符串

示例代码：使用json_encode把一个一维数组转换为JSON字符串

关联数组

"Linux", "server"=>"Apache", "db"=>"MySQL", "lan"=>"PHP");
echo json_encode($lamp);
?>

输出结果：{"os":"Linux","server":"Apache","db":"MySQL","lan":"PHP"}

索引数组

输出结果：["Linux","Apache","MySQL","PHP"]

混合数组：

"MySQL", "lan"=>"PHP");
echo json_encode($lamp);
?>

输出结果：{"0":"Linux","1":"Apache","db":"MySQL","lan":"PHP"}

示例代码：使用json_encode把一个二维数组转化为JSON字符串

'刘备', 'age'=>43, 'email'=>'liubei@itcast.cn'),
array('name'=>'关羽', 'age'=>42, 'email'=>'guanyu@itcast.cn'),
array('name'=>'张飞', 'age'=>41, 'email'=>'zhangfei@itcast.cn')
);
echo json_encode($persons);
?>

输出结果：[{"name":"\u5218\u5907","age":43,"email":"liubei@itcast.cn"},{"name":"\u5173\u7fbd","age":42,"email":"guanyu@itcast.cn"},{"name":"\u5f20\u98de","age":41,"email":"zhangfei@itcast.cn"}]

示例代码：使用json_encode把一个对象转化为JSON字符串

name = 'xiaomei';
$std->age = 18;
$std->email = "xiaomei@itcast.cn";
echo json_encode($std);
?>

输出结果：{"name":"xiaomei","age":18,"email":"xiaomei@itcast.cn"}

7、使用Ajax+JSON实现两个数的四则运算

要用到的知识点：eval方法可以把一个字符串当做Javascript脚本处理, 语法如下：

alert(eval("3+5")); //8

但是要特别注意：如果eval方法处理带有{}花括号格式的数据时，必须使用两层圆括号，谨记!!!

案例：使用Ajax+JSON实现两个数的四则运算

第一个数：

第二个数：




$jia,
'jian'=>$jian,
'cheng'=>$cheng,
'chu'=>$chu
);
//使用json_encode把数组转化为json字符串
echo json_encode($data);
?>

使用Ajax+JSON实现两个数的四则运算

二、JSONP技术

1 Ajax技术由于受到浏览器的限制, 该方法不允许跨域通信。

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。

也就是说, 受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容, 以防止它们之间的操作。

2 跨域请求的解决与意义

在实际项目开发中, 经常会碰到跨域请求问题, 所以必须要解决。

① 模拟场景一：公司同时可能具有多个系统(OA系统、ERP系统、官方网站)

由于受到同源策略的影响, Ajax不允许从itcast.cn域名向oa.com域名发送请求。

② 模拟场景二：手机app软件、官方的网站提供数据接口api.php

手机：wifi/2G/3G/4G网络, 生成的url地址也都不是固定的 http://192.168.2.8/

Ajax技术

由于受到同源策略的影响, Ajax不允许从http://192.168.2.8/域名向itcast.cn域名发送请求。

3 原生代码解决跨域问题

解决跨域思路：在Javascript中, 虽然Ajax不允许直接跨域, 但是有一个标签script, 使用src属性, 其是可以正常跨域的

}

demo.php

4 使用jsonp技术+json实现大批量数据的编辑

demo.php

jQuery中的JSONP技术

$.ajax

$.get

$.getJSON

由此可知, 无论任何框架, 其解决跨域请求都是通过底层的get方式实现的。

① 使用$.ajax解决跨域问题

②使用$.get解决跨域问题

③ 使用$.getJSON解决跨域问题