热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解析JSONP跨域机制及其工作原理

本文详细解析了JSONP(JSONwithPadding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。

一篇文章让你明白 jsonp原理详解

什么是JSONP?

 

先说说JSONP是怎么产生的:

 

其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。

 

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。

 

2、不过我们又发现&#xff0c;Web页面上调用js文件时则不受是否跨域的影响&#xff08;不仅如此&#xff0c;我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力&#xff0c;比如<\script>、<\img>、<\iframe>&#xff09;。

 

3、于是可以判断&#xff0c;当前阶段如果想通过纯web端&#xff08;ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算&#xff09;跨域访问数据就只有一种可能&#xff0c;那就是在远程服务器上设法把数据装进js格式的文件里&#xff0c;供客户端调用和进一步处理。

 

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据&#xff0c;更妙的是JSON还被js原生支持&#xff0c;所以在客户端几乎可以随心所欲的处理这种格式的数据。

 

5、这样子解决方案就呼之欲出了&#xff0c;web客户端通过与调用脚本一模一样的方式&#xff0c;来调用跨域服务器上动态生成的js格式文件&#xff08;一般以JSON为后缀&#xff09;&#xff0c;显而易见&#xff0c;服务器之所以要动态生成JSON文件&#xff0c;目的就在于把客户端需要的数据装入进去。

 

6、客户端在对JSON文件调用成功之后&#xff0c;也就获得了自己所需的数据&#xff0c;剩下的就是按照自己需求进行处理和展现了&#xff0c;这种获取远程数据的方式看起来非常像AJAX&#xff0c;但其实并不一样。

 

7、为了便于客户端使用数据&#xff0c;逐渐形成了一种非正式传输协议&#xff0c;人们把它称作JSONP&#xff0c;该协议的一个要点就是允许用户传递一个callback参数给服务端&#xff0c;然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据&#xff0c;这样客户端就可以随意定制自己的函数来自动处理返回数据了。

 

如果对于callback参数如何使用还有些模糊的话&#xff0c;我们后面会有具体的实例来讲解。

 

JSONP的客户端具体实现

 

不管jQuery也好&#xff0c;extjs也罢&#xff0c;又或者是其他支持jsonp的框架&#xff0c;他们幕后所做的工作都是一样的&#xff0c;下面我来循序渐进的说明一下jsonp在客户端的实现&#xff1a;

 

1、我们知道&#xff0c;哪怕跨域js文件中的代码&#xff08;当然指符合web脚本安全策略的&#xff09;&#xff0c;web页面也是可以无条件执行的。

 

远程服务器remoteserver.com根目录下有个remote.js文件代码如下&#xff1a;

 

alert(&#39;我是远程文件&#39;);

 

本地服务器localserver.com下有个jsonp.html页面代码如下&#xff1a;

 




    
    





 

毫无疑问&#xff0c;页面将会弹出一个提示窗体&#xff0c;显示跨域调用成功。

 

2、现在我们在jsonp.html页面定义一个函数&#xff0c;然后在远程remote.js中传入数据进行调用。

 

jsonp.html页面代码如下&#xff1a;

 




    
    
    






 

remote.js文件代码如下&#xff1a;

 

localHandler({"result":"我是远程js带来的数据"});

 

运行之后查看结果&#xff0c;页面成功弹出提示窗口&#xff0c;显示本地函数被跨域的远程js调用成功&#xff0c;并且还接收到了远程js带来的数据。


很欣喜&#xff0c;跨域远程获取数据的目的基本实现了&#xff0c;但是又一个问题出现了&#xff0c;我怎么让远程js知道它应该调用的本地函数叫什么名字呢&#xff1f;毕竟是jsonp的服务者都要面对很多服务对象&#xff0c;而这些服务对象各自的本地函数都不相同啊&#xff1f;我们接着往下看。

3、聪明的开发者很容易想到&#xff0c;只要服务端提供的js脚本是动态生成的就行了呗&#xff0c;这样调用者可以传一个参数过去告诉服务端 “我想要一段调用XXX函数的js代码&#xff0c;请你返回给我”&#xff0c;于是服务器就可以按照客户端的需求来生成js脚本并响应了。

看jsonp.html页面的代码&#xff1a;




    
    





 

这次的代码变化比较大&#xff0c;不再直接把远程js文件写死&#xff0c;而是编码实现动态查询&#xff0c;而这也正是jsonp客户端实现的核心部分&#xff0c;本例中的重点也就在于如何完成jsonp调用的全过程。

我们看到调用的url中传递了一个code参数&#xff0c;告诉服务器我要查的是CA1998次航班的信息&#xff0c;而callback参数则告诉服务器&#xff0c;我的本地回调函数叫做flightHandler&#xff0c;所以请把查询结果传入这个函数中进行调用。

OK&#xff0c;服务器很聪明&#xff0c;这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html

&#xff08;服务端的实现这里就不演示了&#xff0c;与你选用的语言无关&#xff0c;说到底就是拼接字符串&#xff09;&#xff1a;

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

 

4、到这里为止的话&#xff0c;相信你已经能够理解jsonp的客户端实现原理了吧&#xff1f;剩下的就是如何把代码封装一下&#xff0c;以便于与用户界面交互&#xff0c;从而实现多次和重复调用

jQuery如何实现jsonp调用&#xff1f;




     
      
      
     
  
  

 

是不是有点奇怪&#xff1f;为什么我这次没有写flightHandler这个函数呢&#xff1f;而且竟然也运行成功了&#xff01;
这就是jQuery的功劳了&#xff0c;jquery在处理jsonp类型的ajax时&#xff08;&#xff0c;虽然jquery也把jsonp归入了ajax&#xff0c;但其实它们真的不是一回事儿&#xff09;&#xff0c;自动帮你生成回调函数并把数据取出来供success属性方法来调用&#xff0c;是不是很爽呀&#xff1f;
补充

这里针对ajax与jsonp的异同再做一些补充说明&#xff1a;

1、ajax和jsonp这两种技术在调用方式上”看起来”很像&#xff0c;目的也一样&#xff0c;都是请求一个url&#xff0c;然后把服务器返回的数据进行处理&#xff0c;因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容&#xff0c;而jsonp的核心则是动态添加

 


转:https://www.cnblogs.com/still1/p/11008134.html



推荐阅读
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • 本文旨在构建一个JavaScript函数,用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式,并检查密码强度,以提升用户账户的安全性。通过集成正则表达式和条件判断语句,该方法能够有效防止常见的输入错误,同时提供即时反馈,改善用户体验。 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 如何在服务器后台运行PHP脚本?
    如何在服务器后台运行PHP脚本? ... [详细]
  • JavaScript对象类型 ... [详细]
  • 通过优化模板消息机制,本研究提出了一种高效的信息化推送方案。该方案利用获取的访问令牌(access token)和指定的模板ID,实现了精准且快速的信息推送,显著提升了用户体验和信息传递效率。具体实现中,通过调用相关API接口,确保了消息的准确性和及时性,为用户提供更加便捷的服务。 ... [详细]
  • 本文探讨了如何在 Google Sheets 中通过自定义函数实现 AJAX 调用。具体介绍了编写脚本的方法,以便在电子表格中发起 AJAX 请求,从而实现数据的动态获取与更新。这种方法不仅简化了数据处理流程,还提高了工作效率。 ... [详细]
  • 本文详细解析了如何使用 jQuery 实现一个在浏览器地址栏运行的射击游戏。通过源代码分析,展示了关键的 JavaScript 技术和实现方法,并提供了在线演示链接供读者参考。此外,还介绍了如何在 Visual Studio Code 中进行开发和调试,为开发者提供了实用的技巧和建议。 ... [详细]
  • 深入解析Gradle中的Project核心组件
    在Gradle构建系统中,`Project` 是一个核心组件,扮演着至关重要的角色。通过使用 `./gradlew projects` 命令,可以清晰地列出当前项目结构中包含的所有子项目,这有助于开发者更好地理解和管理复杂的多模块项目。此外,`Project` 对象还提供了丰富的配置选项和生命周期管理功能,使得构建过程更加灵活高效。 ... [详细]
  • 如何在Java中高效构建WebService
    本文介绍了如何利用XFire框架在Java中高效构建WebService。XFire是一个轻量级、高性能的Java SOAP框架,能够简化WebService的开发流程。通过结合MyEclipse集成开发环境,开发者可以更便捷地进行项目配置和代码编写,从而提高开发效率。此外,文章还详细探讨了XFire的关键特性和最佳实践,为读者提供了实用的参考。 ... [详细]
  • 在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ... [详细]
  • JavaScript使ifram跨域相互访问及与PHP通信的实例_javascript技巧
    iframe与主框架相互访问方法1.同域相互访问假设A.html ... [详细]
  • (一)前言:二次开发编辑器neditor(基于百度编辑器ueditor):界面相对于ueditor会更美观.(二)问题描述:最近在公司项目中遇到一个比较奇葩的问题。neidito ... [详细]
  • easyuilayout实战
    第一步: ... [详细]
author-avatar
qaoxiuzcwhyx
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有