关于JSONP

一、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脚本。

时间: 2025-01-05 14:15:46

关于JSONP的相关文章

原生jsonp跨域

<script> // jsonp跨域原生写法 var script = document.createElement('script'); script.src = 'http://192.168.7.16/kuayu/test02.php?callback=aa'; document.body.appendChild(script); //aa('后台数据') function aa(res) { alert(res.website); } </script>

跨域cors方法(jsonp,document.domain,document.name)及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

jsonp跨域

1 (function(window, document, undefined) { 2 'use strict'; 3 var jsonp = function(url, data, callback) { 4 var fnSuffix = Math.random().toString().replace('.', ''); 5 var cbFuncName = 'my_json_' + fnSuffix; 6 window[cbFuncName] = callback; 7 var quer

jsonp

由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Padding),其实就是被包裹在函数调用中的JSON. callback({"name": "Kate"}); 1. JSONP原理 通过script标签进行跨域操作,载入的请求js文件中的内容会执行我们在url中指定的函数,并且,传入的参数,就是我们请求的数据. 2. J

JSON JSONP ajax

JSON 是一种数据格式 不是数据类型 也不是编程语言  JSON: JavaScript对象表示法 (JavaScript Object  Nonation)  与XML类似 比xml更小 更快 更易解析 JSONP :JSON+Padding (内填充)   把JSON当作内容添加到一个盒子里    用于 跨域              callback参数 什么是JSONP 首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码

说一说javascript跨域和jsonp

同源策略 在浏览器的安全策略中“同源策略”非常如雷贯耳,说的是协议.域名.端口相同则视为同源,域名也可换成IP地址,不同源的页面脚本不能获取对方的数据. 要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据,浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”. 因为同源策略的存在,防止了跨域访问的安全问题,但同时也损失了方便获取资源的便利. 跨域的src属性 世事又非绝对,浏览器还是允许几个元素跨域访问

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

jsonp的使用

假设我们已经了解什么是同源策略,以及什么是浏览器的同源策略的限制. 现在我们需要在a.demo.com下的某个页面one.html 里加载不同域b.demo.com下的json数据. 我们都知道用<script>或者<img>标签的src属性是可以跨域从某个站点加载数据的,jsonp就是根据这个原理来实现. 我们同样也知道,当浏览器加载完<script>标签的内容之后,它会立即执行.所以为了不让浏览器报错,这些内容应该是一些变量的定义或者是函数的调用之类的东西. 但是,

Jquery调用从ashx文件返回的jsonp格式的数据处理实例

开发环境:vs2010+jquery-1.4.min.js 解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题 开发步骤:打开VS2010,新建一web站点,保存位置选择D:\Website1;添加新项,选择一般处理程序,命名cmdHandler.ashx;添加新项,选择HTML页,命名为testAshx.htm;网上下载jquery-1.4.min.js拷贝到web站点中 项目相关网站源码和运行截图如下: 1.testAshx.htm代码如下: <!

谈谈怎么使用JSONP

JSONP是什么,其实它是目前主流的实现跨域通信的解决方案. 因为我们都知道,在我们使用ajax去发起HTTP请求的时候,是不可以跨域的.也就是不能在不同域名下.端口等去请求.如果我们强行这么做的话,它是会报错. 这里举个例子. function createXHR() { var xhr = new XMLHttpRequest(); return xhr; } function ajax(url) { var xhr = createXHR(); xhr.onreadystatechange