百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

json和jsonp区别

liuian 2025-05-22 11:45 46 浏览

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>

相关推荐

教你把多个视频合并成一个视频的方法

一.情况介绍当你有一个m3u8文件和一个目录，目录中有连续的视频片段，这些片段可以连成一段完整的视频。m3u8文件打开后像这样：m3u8文件,可以理解为播放列表，里面是播放视频片段的顺序。视频片段像这...

零代码编程:用kimichat合并一个文件夹下的多个文件

一个文件夹里面有很多个srt字幕文件，如何借助kimichat来自动批量合并呢？在kimichat对话框中输入提示词：你是一个Python编程专家，完成如下的编程任务：这个文件夹：D:\downloa...

Java APT_java APT 生成代码

JavaAPT（AnnotationProcessingTool）是一种在Java编译阶段处理注解的工具。APT会在编译阶段扫描源代码中的注解，并根据这些注解生成代码、资源文件或其他输出，...

Unit Runtime:一键运行 AI 生成的代码，或许将成为你的复制 + 粘贴神器

在我们构建了UnitMesh架构之后，以及对应的demo之后，便着手于实现UnitMesh架构。于是，我们就继续开始UnitRuntime，以用于直接运行AI生成的代码。PS：...

挣脱臃肿的枷锁:为什么说Vert.x是Java开发者手中的一柄利剑?

如果你是一名Java开发者，那么你的职业生涯几乎无法避开Spring。它如同一位德高望重的老国王，统治着企业级应用开发的大片疆土。SpringBoot的约定大于配置、SpringCloud的微服务...

五年后，谷歌还在全力以赴发展 Kotlin

作者|FredericLardinois译者|Sambodhi策划|Tina自2017年谷歌I/O全球开发者大会上，谷歌首次宣布将Kotlin（JetBrains开发的Ja...

kotlin和java开发哪个好，优缺点对比

Kotlin和Java都是常见的编程语言，它们有各自的优缺点。Kotlin的优点：简洁：Kotlin程序相对于Java程序更简洁，可以减少代码量。安全：Kotlin在类型系统和空值安全...

移动端架构模式全景解析:从MVC到MVVM，如何选择最佳设计方案?

掌握不同架构模式的精髓，是构建可维护、可测试且高效移动应用的关键。在移动应用开发中，选择合适的软件架构模式对项目的可维护性、可测试性和团队协作效率至关重要。随着应用复杂度的增加，一个良好的架构能够帮助...

颜值非常高的XShell替代工具Termora，不一样的使用体验!

Termora是一款面向开发者和运维人员的跨平台SSH终端与文件管理工具，支持Windows、macOS及Linux系统，通过一体化界面简化远程服务器管理流程。其核心定位是解决多平台环境下远程连接、文...

预处理的底层原理和预处理编译运行异常的解决方案

若文章对您有帮助，欢迎关注程序员小迷。助您在编程路上越走越好！[Mac-10.7.1LionIntel-based]Q：预处理到底干了什么事情？A：预处理，顾名思义，预先做的处理。源代码中...

为“架构”再建个模:如何用代码描述软件架构?

在架构治理平台ArchGuard中，为了实现对架构的治理，我们需要代码+模型描述所要处理的内容和数据。所以，在ArchGuard中，我们有了代码的模型、依赖的模型、变更的模型等，剩下的两个...

深度解析:Google Gemma 3n —— 移动优先的轻量多模态大模型

2025年6月，Google正式发布了Gemma3n，这是一款能够在2GB内存环境下运行的轻量级多模态大模型。它延续了Gemma家族的开源基因，同时在架构设计上大幅优化，目标是让...

比分网开发技术栈与功能详解_比分网有哪些

一、核心功能模块一个基本的比分网通常包含以下模块：首页/总览实时比分看板：滚动展示所有正在进行的比赛，包含比分、比赛时间、红黄牌等关键信息。热门赛事/焦点战：突出显示重要的、关注度高的比赛。赛事导航...

设计模式之-生成器_一键生成设计

一、【概念定义】——“分步构建复杂对象，隐藏创建细节”生成器模式（BuilderPattern）：一种“分步构建型”创建型设计模式，它将一个复杂对象的构建与其表示分离，使得同样的构建过程可以创建...

构建第一个 Kotlin Android 应用_kotlin简介

第一步：安装AndroidStudio（推荐IDE）AndroidStudio是官方推荐的Android开发集成开发环境（IDE），内置对Kotlin的完整支持。1.下载And...

一周热门
最近发表
标签列表