浅析JSONP技术原理及实现

跨域问题一直是前端中常见的问题，每当说到跨域，第一浮现的技术必然就是JSONP

JSONP在我的理解，它并不是ajax，它是在文档中插入一个script标签，创建_callback方法，通过服务器配合执行_callback方法，并传入一些参数

JSONP的局限就在于，因为是通过插入script标签，所以参数只能通过url传入，因此只能满足get请求，特别jQuery的ajax方法时，即使设置type: 'POST'，但是只要设置了dataType: 'jsonp'，在请求时，都会自动使用GET请求

实现逻辑

step1: 创建_callback方法 (_callback中可以删除script标签和_callback方法)

step2: 插入script标签

step3: 服务器输出js

实现: 

var requestJsonp = function (opt) {
var funName, script;
/*
* step1 创建_callback方法
*/
//_callback函数名
funName = '_cb' + (Math.random() * 1000000);
//创建_callback方法
window[funName] = function (data) {
if (typeof opt.success == 'function') {
opt.success(data);
}
window[funName] = null;
delete window[funName];
document.body.removeChild(script);
script = null;
};
/*
* step2 插入script标签
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 服务器输出js
* 服务器应接受url参数中_callback的值,作为函数名执行输出js
* 类似输出
* _callback({"name":"jsonp","description":"jsonp test"});
*/
/*
* 处理error
*/
script.addEventListener('error', function () {
window[funName] = null;
delete window[funName];
if (typeof opt.error == 'function') {
opt.error();
}
document.body.removeChild(script);
script = null;
});
};
requestJsonp({
url: 'http://www.url.org?tid=Jsx2',
success: function (data) {
console.log(data);
},
error: function () {
console.log('request error!');
}
});

对于浏览器的行为就是插入script标签，执行js代码， 删除script标签

实现代码并没有考虑兼容以及传入data后生成url的问题。

下面给大家说下jsonp的优缺点：

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

以上所述是小编给大家介绍的浅析JSONP技术原理及实现的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Json.net 常用使用小结(推荐)

    Json.net 常用使用小结(推荐) using System; using System.Linq; using System.Collections.Generic; namespace microstore { public interface IPerson { string FirstName { get; set; } string LastName { get; set; } DateTime BirthDate { get; set; } } public class Empl

  • JSONP原理及简单实现

    在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能.然而由于受到浏览器的限制,ajax不允许跨域通信. JSONP就是目前主流的实现跨域通信的解决方案. 虽然在在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有.jsonp主要是通过script可以链接远程url来实现跨域请求的.如: <script src="http://jsonp.js?callback=xxx">

  • 浅析JSONP技术原理及实现

    跨域问题一直是前端中常见的问题,每当说到跨域,第一浮现的技术必然就是JSONP JSONP在我的理解,它并不是ajax,它是在文档中插入一个script标签,创建_callback方法,通过服务器配合执行_callback方法,并传入一些参数 JSONP的局限就在于,因为是通过插入script标签,所以参数只能通过url传入,因此只能满足get请求,特别jQuery的ajax方法时,即使设置type: 'POST',但是只要设置了dataType: 'jsonp',在请求时,都会自动使用GET请

  • 详细分析jsonp的原理和实现方式

    详细分析jsonp的原理和实现方式

    针对跨域问题,本文主要给大家详细分析一下jsonp的原理,希望能够给你提供到帮助. 详细分析jsonp的原理和实现方式 一:跨域问题. 二,跨域产生的原因 Js是不能跨域请求.出于安全考虑,js设计时不可以跨域. 什么是跨域: 1.域名不同时. 2.域名相同,端口不同. 只有域名相同.端口相同时,才可以访问. 可以使用jsonp解决跨域问题. 三,跨域失败的案例 3.1,同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档

  • 深入分析jsonp协议原理

    深入分析jsonp协议原理

    今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了. 但是因为当时后端没有支持jsonp来访问,后来他在实现这个功能的时候问了我一句,jsonp形式返回的格式是怎么样子的?我一直以来只知道怎么使用,迷迷糊糊的却没有答上来... 虽然后来解决了,但是对于喜欢解决问题的我,心里却一直耿耿于怀,必须得把这个研究透彻了,于是我开始翻阅资料,看到后面真有种豁然开朗的感觉,于是打算做个笔记与大家分享. JSON和JSONP的区

  • 借助script进行Http跨域请求:JSONP实现原理及代码

    <script>元素的src属性能设置URL并发起HTTP GET请求, 使用<script>元素实现脚本操作HTTP可以跨域通信而不受限与同源策略. 通常, 使用基于<script>的Ajax传输协议时, 服务器响应采用JSON编码的数据格式, 当执行脚本时候, JavaScript解析器能够自动将其解码. 由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做"JSONP". 所以使用jsonp技术, 只需要设置<script>

  • js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应

  • 4种VPS主机技术原理及优缺点(VPS独享主机技术原理)

    4种VPS主机技术原理及优缺点(VPS独享主机技术原理)

    VPS独享主机一直是中小企业和中高端站长用户的最佳建站选择,而且,随着云计算技术的应用和发展,VPS主机价格也愈来平民化,使得更多的人们接触到VPS主机,和经常使用VPS主机.同时,VPS独享主机.虚拟专用服务器的原理和相关技术也就被人们不断的了解,也不再那么神秘. VPS独享主机作为一种虚拟化方案,有全虚拟化.半虚拟化.操作系统虚拟化三种分类.VPS主机是通过虚拟化技术实现的虚拟主机,虚拟化是一个抽象层,它将物理硬件与操作系统分开,从而提供更高的IT资源利用率和灵活性. 4种VPS主机虚拟技术

  • PHP 伪静态技术原理以及突破原理实现介绍

    先说实现方法: inj.php: 复制代码 代码如下: <?php set_time_limit(10); $id=$_GET["id"]; $id=str_replace(" ","%20",$id); $id=str_replace("=","%3D",$id); $url="http://www.xxx.com/index.php/library/more/id/$id.html&qu

  • 分页技术原理与实现之无刷新的Ajax分页技术(三)

    紧接着上篇-分页技术原理与实现之Java+Oracle代码实现分页(二),本篇继续分析分页技术.上篇讲的是分页技术的代码实现,这篇继续分析一下分页技术的效果控制. 上篇已经用代码简单的实现了一个分页.但是我们都看到,代码中每次通过servlet请求取得结果集后,都会转向到一个jsp页面显示结果,这样每次查询页面都会刷新一下,比如查询出现结果集后要查看第三页,页面就会刷新一下.这样页面给人的效果感觉就会有点不舒服,所以我们希望能够在通过条件查询结果集后无论访问哪一页,页面都不会刷新,而只是结果集变

  • 分页技术原理与实现之Java+Oracle代码实现分页(二)

    紧接着上篇-分页技术原理与实现之分页的意义及方法(一) ,本篇继续分析分页技术.上篇讲的是分页技术的简单原理与介绍,这篇深入分析一下分页技术的代码实现. 上篇最后讲到了分页的最佳实现是在数据库层进行分页,而且不同的数据库有不同的分页实现,比如Oracle是用三层sql嵌套实现分页的.MySQL是用limit关键字实现的(上篇已讲到). 这篇以Java+Oracle为基础,讲解代码层的实现. 就如平时我们很在分页中看到的,分页的时候返回的不仅包括查询的结果集(List),而且还包括总的页数(pag

  • Java反射技术原理与用法实例分析

    本文实例讲述了Java反射技术原理与用法.分享给大家供大家参考,具体如下: 本文内容: 产生反射技术的需求 反射技术的使用 一个小示例 首发日期:2018-05-10 产生反射技术的需求: 项目完成以后,发现需要增加功能,并且希望增加功能并不需要停止项目运行. 在希望不关停项目运行的情况下,于是考虑到将功能都放到一个单独的项目之外的模块中,每一个功能实现都从这个模块中获取[实际上这个考虑应该是项目开始前就考虑,这个例子可能不是很好].于是就有了反射的产生.(这种思想有点类似工厂模式,如果学过设计

随机推荐