理解json和jsonp的定义和区别以及如何实际使用
(一)什么是跨域请求?
首先要理解什么是跨域?
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
常见跨域场景:(JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。)
常见解决跨域办法:
①代理:使用php做代理文件,ajax直接请求php文件
②通过设置响应头
③通过jsonp,通过某些标签(img,script,iframe )src属性
(二)json和jsonp的定义和区别
区别:
json是一种基于文本的数据交换格式（无法跨域）,jsonp是一种非官方跨域数据交互协议。json返回的是一串数据,而 jsonp返回的是脚本代码（包含一个函数调用）。
定义:
json可以理解为是一种格式，它的键必须用双引号。json格式的对象必须写在{}花括号里面，json格式的数组写在[]大括号里面。
jsonp实现跨域的原理：
1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。
2.服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参
的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
3.客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
(三)使用demo示例
script标签jsonp跨域具体实现
(1)script标签实现跨域
客户端html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script标签与jsonp</title>
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
//传参并指定回调执行函数为jsonpBack
script.src = 'http://dev.test.com/jsonp.php?callback=jsonpBack';
//script标签追加到head标签中
document.head.appendChild(script); //回调执行函数
function jsonpBack(data) {
alert(JSON.stringify(data));
}
</script>
</head>
<body>
</body>
</html>
服务端php.代码
<?php
$a = $_GET['callback'];//接收参数,名为js函数名
$data = array('name'=>'admin','age'=>100);
$json = json_encode($data);
echo "$a($json)";//服务端输出,可执行的js函数名称
打印结果如下图:
注意:由于浏览器的同源策略,禁止ajax从一个域名请求另外一个域名上面的数据.
(2)ajax获取json数据
客户端html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax获取json</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$.ajax({
type : 'get',
url : 'http://dev.php.com/test3/json.php',
dataType : 'json',
success : function(data) {
alert('ajax获取json数据:' +JSON.stringify(data));
}
});
</script>
</body>
</html>
服务端php.代码
<?php
$data = array("name"=>"admin","age"=>"100");
$json = json_encode($data);
echo $json;
打印结果如下图:
ajax中jsonp跨域具体实现
(3)ajax中jsonp使用
客户端html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax中jsonp</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type: "get",
url: "http://dev.test.com/jsonp.php",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"jsonpBack",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(data){
alert('ajax中jsonp回调:' +JSON.stringify(data));
},
error: function(){
alert('fail');
}
});
</script>
</body>
</html>
服务端php.代码
<?php
$a = $_GET['callback'];//接收参数,名为js函数名
$data = array('name'=>'admin','age'=>100);
$json = json_encode($data);
echo "$a($json)";//服务端输出,可执行的js函数名称
打印结果如下图:
理解json和jsonp的定义和区别以及如何实际使用的更多相关文章
- json、jsonp的定义和区别
一.区别 简单来说,json是一种数据交换格式,jsonp是一种非官方跨域数据交互协议.json描述的是信息的格式,而jsonp是信息传递双方约定的方法.json返回的是一串数据,而 jsonp返回的 ...
- JSON、JSONP、XML的区别
这两天看jquery手册的时候看到了jsonp.发现手册把jsonp与json放在一起讲解了,所以想写篇文章 梳理一下这三者的关系. jsonp: jsonp是json的一种“使用模式”,可以让网页从 ...
- JSON、JSONP、Ajax的区别
什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...
- json与jsonp区别浅析（json才是目的，jsonp只是手段）
一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...
- json与jsonp区别浅析（json才是目的，jsonp只是手段） (转)
一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...
- JSON跟JSONP的区别以及实战
前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...
- JSON和JSONP的区别，以及使用方法
(一)场景 在拉京东城市选择的基础数据时候,遇到被服务器拒绝的情况,也就是ajax跨域问题 (二)json和jsonp 说的直白一点,在我们做ajax异步的一些功能的时候,一定会或多或少的遇到两个问题 ...
- 【转】json与jsonp区别浅析（json才是目的，jsonp只是手段）
一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...
- json和jsonp的区别（转）
原文链接:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临 ...
随机推荐
- OO第三单元单元总结
目录 JML知识梳理 部署JMLUnitNG/JMLUnit 按照作业梳理自己的架构设计,并特别分析迭代中对架构的重构 按照作业分析代码实现的bug和修复情况 阐述对规格撰写和理解上的心得体会 JML ...
- Windows DiskPart
win+r打开运行窗口,输入diskpart命令,按回车键或点击确定按钮即可打开如下所示界面: 输入help可以打印帮助信息 List Disk:显示本机的所有磁盘,以便正确操作目标磁盘 Select ...
- java程序利用ansible修改redis服务参数
第一步,java调用shell paraname和paravalue是传给playbook的变量. try { String cmd5 = "sudo ansible-playbook /s ...
- xmake-vscode插件开发过程记录
最近打算给xmake写一些IDE和编辑器的集成插件,发现vscode的编辑器插件比较容易上手的,就先研究了下vscode的插件开发流程,并且完成了xmake-vscode插件的开发. 我们先来看几张最 ...
- PyTorch笔记之 squeeze() 和 unsqueeze()
1.squeeze() 函数 squeeze() 用来去掉向量的一个维度,只有维度为 1 的那一维才能去掉 example: 初始化1个向量shape为(1,2,3)的向量 import torch ...
- JavaSE编码试题强化练习6
1.写出选择排序的代码实现,对一个int数组进行排序 public class TestSelectSort { public static void main(String[] args) { in ...
- React入门教程1---初见面
React入门教程1---初见面:https://blog.csdn.net/solar_lan/article/details/82799248 React 教程 React 是一个用于构建用户界面 ...
- HTML5随记
1.浏览器加载HTML的过程是从上至下,因此引用的第三方js文件一定要放到自己定义的js文件的前面,否则引入的js文件将会在加载时失效. 2.html的全局属性包括:accesskey.content ...
- HNUSTOJ-1600 BCD时钟
1600: BCD时钟 时间限制: 1 Sec 内存限制: 128 MB提交: 1038 解决: 156[提交][状态][讨论版] 题目描述 BCD码是指用四位二进制数来表示十进制数中的0~9这十 ...
- mysql自动备份脚本
linux系统mysql5.6版本实现自动备份步骤 1.sudo mysql --help | grep my.cnf 查找my.cnf文件2.在文件中添加如下行实现免输入密码[mysqldump]u ...