跨域（三）—

一、什么是JSONP?

百度百科：JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

二、JSONP的实现思路很简单

1、前端创建script标记，设置src，添加到head中（当然也可以往body中添加）。

2, 后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据。

3, 回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）。

三、简单代码例子

服务器端：

<?php
$obj=array('chicken'=>2,'duck'=>3);//$ob是待传递对象
$callback=$_GET['callback'];//获取传入的函数名
if(!$callback){$callback='jsoncallback';//如果没传入就使用的默认函数名
}
//输出一段JS格式的代码，调用用传入的函数名，参数为需要传递的$obj对象
echo "alert('我是小偷，哈哈');".$callback.'('.json_encode($obj).');';
?>

客户端：

<div>
鸡<span id="chicken"></span>只
<br/>
鸭<span id="duck"></span>只
</div>
<script type="text/javascript">
//回调函数定义
function mycallback(obj){//输出传递过来的对象
  document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck;
};window.onload=function(){//创建SCRIPT标签var script=document.createElement("script");//设置URL
  script.src="http://127.0.0.1:8081//langtao/steal.php?callback=alert('我是强盗');mycallback";//把标签放入文档中以便生效
  document.body.appendChild(script);document.body.removeChild(script);
};
</script><!--<script>
$.ajax({
dataType:'jsonp',
data:'id=1',
jsonp:'callback',
url:'http://127.0.0.1:8081//langtao/steal.php',
success:function(obj){document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck;
},
});
</script>--><!--<script>
$.getJSON("http://127.0.0.1:8081//langtao/steal.php?callback=?",function(obj){document.getElementById('chicken').innerHTML=obj.chicken;document.getElementById('duck').innerHTML=obj.duck;}
);
</script>-->

四、安全问题

JSONP虽然易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

转载于:https://www.cnblogs.com/aaron-shu/p/4170304.html

跨域（三）——JSONP相关推荐

jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...
【Ajax】Ajax全面讲解、跨域与JSONP及了解HTTP
Ajax 一.初识Ajax 1.1 URL地址 1.1.1 URL地址组成部分 1.2 客户端与服务器的通信过程 1.3 网页中如何请求数据 1.4 资源的请求方式 1.5 Ajax的概念 1.6 j ...
Ajax跨域和JSONP
跨域与JSONP 了解同源策略和跨域同源策略 1.什么是同源如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源判断下表给出的URL地址与http://www.test.com/inde ...
跨域请求——jsonp与cors
一.jsonp 首先我们来想一想为什么会有跨域这个名词的出现呢? 跨域又是什么呢?为何要跨域? 浏览器的同源策略又是什么?怎么解决? jsonp又是什么? 跨域的原理又是什么呢? 名词解释: 跨域: ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流
重点: 一.jQuery高级用法 1. jQuery实现文件上传 (1)定义UI结构 (2)验证是否选择了文件 ①将 jQuery 对象转化为 DOM 对象,并获取选中的文件列表 ②判断是否选择了文件 ...
AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录同源策略和跨域同源策略跨域 JSONP JSONP的实现原理自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
【AJAX 笔记】AJAX 基本、HTTP 基本、原生 AJAX 的使用，jQuery / Axios / fetch 发送请求、跨域（JSONP/CORS）
文章目录 1 Ajax 概述 1.1 AJAX 简介 1.2 XML 简介 1.3 AJAX 的特点 1.3.1 AJAX 的优点 1.3.2 AJAX 的缺点 1.4 AJAX 属性和方法 2. H ...
Ajax跨域：Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

跨域（三）——JSONP

跨域（三）——JSONP相关推荐

最新文章

热门文章