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<person.length;i++){document.write(person[i].name+"<br>");document.write(person[i].age+"<br>");document.write(person[i].email+"<br>");}for(var i in person){document.write(person[i].name+"<br>");document.write(person[i].age+"<br>");document.write(person[i].email+"<br>");}
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字符串
关联数组
<?php$lamp = array("os"=>"Linux", "server"=>"Apache", "db"=>"MySQL", "lan"=>"PHP");echo json_encode($lamp);?>
输出结果：{"os":"Linux","server":"Apache","db":"MySQL","lan":"PHP"}
索引数组
<?php$lamp = array("Linux", "Apache", "MySQL", "PHP");echo json_encode($lamp);?>
输出结果：["Linux","Apache","MySQL","PHP"]
稠浊数组：
<?php$lamp = array("Linux", "Apache", "db"=>"MySQL", "lan"=>"PHP");echo json_encode($lamp);?>
输出结果：{"0":"Linux","1":"Apache","db":"MySQL","lan":"PHP"}
示例代码：利用json_encode把一个二维数组转化为JSON字符串
<?php$persons = array(array('name'=>'刘备', '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字符串
<?php$std = new stdClass();$std->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实现两个数的四则运算
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>求两个数的四则运算</title><script src='public.js'></script><script>//定义页面载入事宜window.onload = function() {//获取btnok按钮并绑定onclick事宜$('btnok').onclick = function() {//获取参数var first = $('first').value;var second = $('second').value;//第一步：创建Ajax工具var xhr = createXhr();//第二步：设置回调函数xhr.onreadystatechange = function() {//第六步：判断与实行if(xhr.readyState == 4 && xhr.status == 200) {//吸收做事器真个返回结果var json = eval('('+xhr.responseText+')');var jia = json.jia;var jian = json.jian;var cheng = json.cheng;var chu = json.chu;alert(jia+'->'+jian+'->'+cheng+'->'+chu);}}//第三步：初始化Ajax工具xhr.open('post','demo08.php');//第四步：设置要求头xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');//第五步：发送Ajax要求var data = 'first='+first+'&second='+second;xhr.send(data);}}</script></head><body>第一个数：<input type='text' id='first' /><hr />第二个数：<input type='text' id='second' /><hr /><input type='button' id='btnok' value='打算' /></body></html><?php//吸收参数$first = $_POST['first'];$second = $_POST['second'];//求四则$jia = $first + $second;$jian = $first - $second;$cheng = $first $second;$chu = $first / $second;//组装数组或工具$data = array('jia'=>$jia,'jian'=>$jian,'cheng'=>$cheng,'chu'=>$chu);//利用json_encode把数组转化为json字符串echo json_encode($data);?>
利用Ajax+JSON实现两个数的四则运算
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>分类联动效果</title><script src='public.js'></script><script>function c1() {//1、创建Ajax工具var xhr = createXhr();//2、设置回调函数xhr.onreadystatechange = function() {//5、判断与实行if(xhr.readyState == 4 && xhr.status == 200) {var json = eval('('+xhr.responseText+')');for(var i in json) {//天生op工具var op = new Option(json[i].name,json[i].id);$('c1').options.add(op);}}}//3、初始化Ajax工具xhr.open('get','demo09.php?pid=0&_='+new Date().getTime());//4、发送Ajax要求xhr.send(null);}function c2() {//获取c1的value值var id = $('c1').value;//1、创建Ajax工具var xhr = createXhr();//2、设置回调函数xhr.onreadystatechange = function() {//5、判断与实行if(xhr.readyState == 4 && xhr.status == 200) {//吸收返回数据var json = eval('('+xhr.responseText+')');//清空下拉选框$('c2').length = 0;for(var i in json) {var op = new Option(json[i].name,json[i].id);$('c2').options.add(op);}}}//3、初始化Ajax工具xhr.open('get','demo09.php?pid='+id+'&_='+new Date().getTime());//4、发送Ajax要求xhr.send(null);}//定义页面载入事宜window.onload = function() {//实行c1函数，创建主种别c1();//当c1下拉状态改变时触发，c2$('c1').onchange = c2;}</script></head><body><select id='c1'></select><select id='c2'></select></body></html><?php//连接数据库mysql_connect('localhost','root','mysql');mysql_query('use bug');mysql_query('set names utf8');$pid = $_GET['pid'];//组装SQL数据库$sql = "select from bug_category where pid=$pid";//实行SQL语句$res = mysql_query($sql);//定义空数组$data = array();while($row = mysql_fetch_assoc($res)) {$data[] = $row;}//利用json_encode天生json字符串echo json_encode($data);?>
二、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属性, 其是可以正常跨域的
<script type="text/javascript">function callback(msg){alert(msg);}window.onload = function(){sc = document.createElement("script");sc.src = "http://www.demo.com/demo.php?fn=callback";document.getElementsByTagName("head")[0].appendChild(sc);//以上代码相称于创建 <script src="http://www.demo.com/demo.php?fn=callback"></script>}</script>demo.php<?php$fn = $_GET['fn'];$str = '我是来自www.demo.com这个域名的';echo $fn."('$str')";?>
4 利用jsonp技能+json实现大批量数据的编辑
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>网页标题</title><meta name="keywords" content="关键字列表" /><meta name="description" content="网页描述" /><link rel=stylesheet type="text/css" href="" /><style type="text/css"></style><script type="text/javascript">function callback(msg){for(var i in msg){var artid = msg[i].artid;var title = msg[i].title;document.getElementById("result").innerHTML += artid + '-' + title + '<hr>';}}window.onload = function(){document.getElementById("btn").onclick = function(){var sc = document.createElement("script");sc.src = "http://www.demo.com/demo.php?fn=callback";document.getElementsByTagName("head")[0].appendChild(sc);}}</script></head><body><input type="button" id="btn" value="获取远程数据"/><hr><div id="result"></div></body></html>
demo.php
<?php$fn = $_GET['fn'];mysql_connect("localhost", "root", "123456");mysql_select_db("blog");mysql_query("set names utf8");$sql = "select artid, title, author, addtime from blog_article order by artid desc limit 10";$res = mysql_query($sql);$data = array();while($row = mysql_fetch_assoc($res)){$data[] = $row;}header("Content-type:text/html; charset=utf-8");$json = json_encode($data);echo $fn."($json)"; //echo callback({...})?>
jQuery中的JSONP技能
$.ajax
$.get
$.getJSON
由此可知, 无论任何框架, 其办理跨域要求都是通过底层的get办法实现的。
① 利用$.ajax办理跨域问题
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><script src="jquery.js"></script><script type="text/javascript">$(function(){$("#btn").bind("click", function(){$.ajax({type:"get",url:"http://www.demo.com/demo.php",dataType:"jsonp",jsonp:'fn',success:function(msg){$(msg).each(function(i, item){var artid = item.artid;var title = item.title;$("#result").append(artid+"--"+title+"--"+"<hr>");});}})})})</script></head><body><input type="button" id="btn" value="获取远程数据"/><div id="result"></div></body></html>
②利用$.get办理跨域问题
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><script src="jquery.js"></script><script type="text/javascript">$(function(){$("#btn").bind("click", function(){$.get('http://www.demo.com/demo.php?fn=?', function(msg){$(msg).each(function(i, item){var artid = item.artid;var title = item.title;$("#result").append(artid+"--"+title+"--"+"<br>");});}, 'jsonp');})})</script></head><body><input type="button" id="btn" value="获取远程数据"/><div id="result"></div></body>
③ 利用$.getJSON办理跨域问题
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><script src="jquery.js"></script><script type="text/javascript">$(function(){$("#btn").bind('click', function(){$.getJSON("http://www.blog.com/demo.php?fn=?", function(msg){$(msg).each(function(i, item){var artid = item.artid;var title = item.title;$("#result").append(artid+"--"+title+"--"+"<hr>");})})})})</script></head><body><input type="button" id="btn" value="获取远程数据"/><div id="result"></div></body></html>
