网站首页 > 知识剖析 正文
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<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>
猜你喜欢
- 2025-04-27 C#与TypeScript语法深度对比
- 2025-04-27 ES6从入门到精通学习路径
- 2025-04-27 前端面试-Web Worker:让你的网页不再“卡到崩溃”的秘诀
- 2025-04-27 Spring Data JPA避坑指南:99%新手踩过的坑我都帮你填平了!
- 2025-04-27 AspNetCore中的文件上传与下载优化
- 2025-04-27 iOS PhotoKit简单用法
- 2025-04-27 扫盲Kafka?看这一篇就够了!
- 2025-04-27 JavaScript 神奇语法糖:让你的代码更简洁高效掌握这些简写技巧
- 2025-04-27 (国产CAD SDK)网页CAD的配置属性的如何设置
- 2025-04-27 前端面试-Blob分析，不常用，就怕面试官有毒
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)