关于jsonp

安慕希      2022-02-08     794

关键词:

一、JSONP的诞生

1.首先,因为AJAX无法跨域,其次开发者发现,<script>标签的src属性是可以跨域的。

2.把跨域服务器写成调用本地的函数,回调数据回来不就好了。

3.JSON刚好被JS支持(object),调用跨域服务器上的动态生成的JS格式文件(不管地址什么类型的,最终生成的返回值都是一段JS代码)

4.这种方式看起来很像AJAX其实并不是一样的。

5.传递已CALLBACK参数给跨域服务端,然后跨域服务端返回数据时会把这个CALLBACK参数作为函数名来包裹住JSON数据(就像是调用一个函数给它传了参数一样)。

例子1:

  跨域服务器

  文件:remote.js 

  代码:

 alert(‘我是远程文件‘);

  本地:

<script type="text/javascript" src="跨域服务器/remote.js"></script>

  这边做的就是直接引入一个js,页面将会弹出一个提示窗体,显示 我是远程文件。

例子2:

  跨域服务器

  文件:remote.js 

  代码:

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

  本地:

 

<script type="text/javascript"> 
    var localHandler = function(data){
        alert(‘我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:‘ + data.result); 
    }; 
</script> 
<script type="text/javascript" src="跨域服务器/remote.js"></script>

  这边做的是 
    1、本地定义一个函数 
    2、引入一个js 
    3、被引入的js里面,调用这个函数

  页面将会弹出一个提示窗体。显示本地函数被跨域的远程js调用成功,并且还接收到了 我是远程js带来的数据。 
  新问题出现了:让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?

例子3:

  跨域服务端提供的js脚本动态生成,这样调用者可以传一个参数过去告诉跨域服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是跨域服务器就可以按照客户端的需求来生成js脚本并响应了。

  跨域服务器

  文件:flightResult.php 

  代码:

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

  本地:

<script type="text/javascript"> 
    // 得到航班信息查询结果后的回调函数 
    var flightHandler = function(data){
        alert(‘你查询的航班结果是:票价 ‘ + data.price + ‘ 元,‘ + ‘余票 ‘ + data.tickets + ‘ 张。‘);
    }; 
    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) 
    var url = "跨域服务器/flightResult.php?code=CA1998&callback=flightHandler";
    // 创建script标签,设置其属性 
    var script = document.createElement(‘script‘); 
    script.setAttribute(‘src‘, url); 
    // 把script标签加入head,此时调用开始 
    document.getElementsByTagName(‘head‘)[0].appendChild(script); 
</script>

  这次我们做的是 
    1、动态创建脚本 。
    2、url中传递了一个code参数,服务器去做查询CA1998次航班的信息,callback参数告诉服务器,我的本地回调函数叫做flightHandler 。
    3、跨域服务端调用这个函数flightHandler 页面将会弹出一个提示窗体。把票价、余票以及张数给传递回来了。

那么服务器到底做了什么呢? 说到底,就是拼接字符串。

// 数据
$data = [
    "name":"anonymous66",
    "age":"18",
    "like":"jianshu"
];
// 接收callback函数名称
$callback = $_GET[‘callback‘];
// 输出
echo $callback . "(" . json_encode($data) . ")";

与AJAX的区别是什么?

  ajax和jsonp本质上是不同的东西。 
  ajax的核心是通过XmlHttpRequest获取非本页内容 
  jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

关于jsonp

一、JSONP的诞生1.首先,因为AJAX无法跨域,其次开发者发现,<script>标签的src属性是可以跨域的。2.把跨域服务器写成调用本地的函数,回调数据回来不就好了。3.JSON刚好被JS支持(object),调用跨域服务器上的动态生成的JS格... 查看详情

关于jsonp以及跨域相关

什么是跨域: 浏览器对ajax请求的限制,不允许跨域请求资源。http://www.a.com--->http://www.b.com      是跨域http://www.a.com--->http://www.a.com:8080 是跨域http://a.a.com--->http://b.a.c 查看详情

关于ajax请求的跨域问题以及jsonp的示例

一般情况下出于安全考虑,ajax是不能跨域请求的,只能请求本服务器的数据,即同源请求,但完事皆有可能,处于对开发的要求越来越复杂,跨域请求这种事情当然是可以解决的,下面即是转载自一位大佬的随笔链接:https://www... 查看详情

jsonp跨域请求实现示例

 网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例;前言:ajax请求地址:http://192.168.1.102:8080/carop/jsonp服务端要返回的jsonp字符串:jso... 查看详情

闲谈jsonp

网上有很多关于jsonp的文章,感觉讲的内容都很相似,自己写个稍微有点不同的吧当我第一次接触到jsonp的时候,那时是在写后台,当时写一个.net的一个接口(一般处理程序)前端的ajax也是我写,当我请求这个接口的时候,发现... 查看详情

关于jsonp跨域过程中cookie中的值一直为null的原因

今天技术交流群里的小伙伴一直被一个问题而困扰,就是写入cookie里面的值再次进行请求时cookie就为空了他被问题纠结了一天 我也好奇了一天终于在快下班的时候他解决掉了下面我来收一个渔翁之利上图啦:这个是他ajax请... 查看详情

jsonp原理详解

...么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。 1、一个... 查看详情

关于跨域方面的问题(代码片段)

js_Cross_domainJsonp与CORS跨域方式的区别CORS方法更好一些,但是需要对服务器有自主权。JSONP则不需要对服务器有自主权,可以通过script、img等标签可以发送GET请求的特点,通过回调函数执行已有的JS函数。在函数内获取返回值。CORS... 查看详情

JSONP 请求错误处理

...ogle.com/p/jquery-jsonp/似乎有一个解决方案,但我找不到任何关于如何使用它的示例。functiona 查看详情

jsonp

看的别人写的关于jsonp的说明: 1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;  2、不过我们又发现,Web页面上调用js... 查看详情

什么是jsonp?

一、先说说JSONP是怎么产生的:  其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。  1、一... 查看详情

关于c#.netjavascript跨域

个人工作小结,不喜勿喷1、首先是在C#类或者控制器写自己需要的方法,我贴一个自己的例子。例如getDeptName这个方法。提供给接口使用的  2、页面接口处理3、处理跨域必须要用jsonp格式。jsonp:‘getDeptNameResult‘,它表示... 查看详情

跨域访问解决方案:jsonp

关于什么是跨域请求,可以参见我之前的博文:http://www.cnblogs.com/LiuChunfu/p/5240145.html上述博文最后有提到解决方案,一直说补充,但是工作忙忘了,直到朋友问起这个问题,协助解决后,才想起来这么一回事。通常来说跨域请求... 查看详情

jquery+ajax+jsonp跨域访问

...的一种“使用模式”,可以让网页从别的网域获取资料。关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm,下面给出例子: 一.客户端<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. 查看详情

关于跨域处理方式

 什么是跨域:这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不... 查看详情

json+jsonp(加量不加价)

 关于JSON的简介 和基础 什么是JSON?JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数据交换格式JSON独立于语言 *JSON具有自我描述性,更易理解*JSON使用Javascript语法来描述数据对象,但... 查看详情

在 react-redux 应用程序中使用 JSONP

...aders在请求中引起的CORSheaders问题,因此倾向于使用JSONP。关于如何在react-redux应用程序中使用JSONP有任何建议/想法吗?请问如何配置和使用?【问题讨论】:【参考方案1】:在你的r 查看详情

关于前端如何解决跨域问题(代码片段)

跨域什么是跨域  浏览器为保证安全,增加的同源限制,其实请求是发出了,服务器也相应了,但是被浏览器劫持了。所谓同源是指,域名,协议,端口均相同,浏览器才会觉得符合要求。  一旦有一个不同源,浏览器便会... 查看详情