DEMO : JSONP示例

为什么使用JSONP

JSONP和JSON是不一样的。JSON(JavaScript Object Notation)是一种基于文本的数据交换方式,或者叫做数据描述格式。而JSONP(JSON with Padding)是一种方式或者说非强制性协议。它是为了解决某个难题而产生的一种技术方式。

为什么会用到JSONP呢?

我们平时在用ajax请求服务端数据时,一般是这么写的:

$.ajax({
type: "get",
url: "getData.php",
dataType: "json",
success: function (data, textStatus, jqXHR) {
console.log(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('fail');
}
});

这是一段很普通的基于jQuery的AJAX请求,不会有什么问题。注意到:url里是getData.php,说明这个文件url是基于当前服务器的,例如可能是localhost,也就是前端发出的请求来源是localhost,后端肯定也是localhost。他们俩是在同一个域名下。当然,平时我们也不会特别注意。

这时候,假如这个url变成其它服务器上的地址,例如:'http://apis.juhe.cn/mobile/get?phone=13429667914&key=',我们再把请求发送出去,会发现出问题了。大家可以手动写个示例看看。

DEMO: 为什么使用jsonp?

出什么问题了?被限制请求了!

XMLHttpRequest cannot load http://apis.juhe.cn/mobile/get?phone=13429667914&key=. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://demo.52fhy.com' is therefore not allowed access.

也就是请求来源与服务器不是同一个域名,不允许访问。这就是浏览器同源策略

所谓"同源"指的是"三个相同":

协议相同
域名相同
端口相同 举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下。
http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)

同源政策规定,AJAX请求只能发给同源的网址,否则就报错。

那么,这时候该怎么办呢?我就是想通过js请求对方服务器上的资源!

除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。

  • JSONP
  • WebSocket
  • CORS

本文只对JSONP作介绍。

如何使用JSONP

首先前端这边代码得改改,假设先不用jQuery:

<script type="text/javascript">
//跨域发送HTTP请求,从服务端获取数据,callback指定回调函数名称
var url = 'http://demo.52fhy.com/jsonp/handJsonp.php?callback=handler'; function getHello() {
var script = document.createElement('script');
script.setAttribute('src', url);
document.querySelector("head").appendChild(script);
}
// 处理函数
function handler(data) {
console.log(data);
// our code here...
}
</script> <input type="button" value="发送跨域HTTP请求,获取数据" onclick="getHello()" />

后端服务器也要改改。

例如,在PHP语言中,后端服务器在API里返回JSON数据,一般是这么写的:

$data = array('name' => '52fhy', 'age' => '22');
echo json_encode($data);
exit;

这里需要改成:

$data = array('name' => '52fhy', 'age' => '22');
handJsonp($data); //处理jsonp
function handJsonp($data){
$callback = $_GET['callback'] ? : 'callback'; //默认使用callback
echo sprintf("%s(%s)", $callback, json_encode($data));
exit;
}

一旦请求成功,服务端输出了:

handler({name: "52fhy", age: "22"});

这时候浏览器就要响应了,找到handler()方法并执行,恰好,我们提前定义好了handler()方法。

这里为什么服务端没有限制访问呢?原因是我们通过动态添加了个:

<script src="http://demo.52fhy.com/jsonp/handJsonp.php?callback=handler"></script>

它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

这种方法就是JSONP。

使用jQuery/Zepto

如果使用jQuery/Zepto,JSONP的方式将会和发送非跨域请求那样简单。

示例:

$.ajax({
type: "get",
async: false,
url: "http://demo.52fhy.com/jsonp/handJsonp.php",
dataType: "jsonp",
success: function (data, textStatus, jqXHR) {
console.log(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('fail');
console.log(XMLHttpRequest, textStatus, errorThrown);
}
});

只需要将dataType设置成jsonp就可以进行跨域请求了。在success里我们能接收到来自服务端的响应:

{name: "52fhy", age: "22"}

DEMO: Zepto jsonp demo

通过console控制台,可以看到请求信息:

Request URL:http://demo.52fhy.com/jsonp/handJsonp.php?_=1460899828609&callback=jsonp1
Request Method:GET
Status Code:200 OK

jQuery/Zepto为我们封装好了回调函数,一般情况下不需要我们单独去写,如果你不想在success中处理,想单独写处理函数,那么可以通过设置这2个参数来实现:

jsonp: "callback",//传递给服务端的回调函数名称参数,如果不设置此项,则默认是"callback"

jsonpCallback: "handler",//传递给服务端的回调函数名称,如果不设置此项,jQuery默认是形如"jQuery18308539637457579374_1460898291266"的由jQuery自动生成的函数名称,Zepto默认是`jsonp1`

如果是zepto,可以在success回调里面使用console.log(jsonp1),发现jsonp1()方法是存在的。

需要注意的是:

1.JSONP虽然看起来很像一般的ajax请求,但其原理不同,JSONP是通过<script>标签的动态加载来实现的跨域请求,而一般的ajax请求是通过XMLHttpRequest对象进行;

2.JSONP不是一种标准协议,其安全性和稳定性都不如 W3C 推荐的 CORS;

3.JSONP不支持POST请求,即使把请求类型设置为post,其本质上仍然是一个get请求。

参考

1、浏览器同源政策及其规避方法 - 阮一峰的网络日志

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

2、跨域资源共享 CORS 详解 - 阮一峰的网络日志

http://www.ruanyifeng.com/blog/2016/04/cors.html

3、说说JSON和JSONP,也许你会豁然开朗_知识库_博客园

http://kb.cnblogs.com/page/139725/

4、跨域解决方案二:使用JSONP实现跨域 - choon - 博客园

http://www.cnblogs.com/choon/p/5393682.html

5、JSON-P: Safer cross-domain Ajax with JSON-P/JSONP

http://json-p.org/

JSONP浅析的更多相关文章

  1. json与jsonp区别浅析(json才是目的,jsonp只是手段)

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  2. json与jsonp区别浅析(json才是目的,jsonp只是手段) (转)

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  3. 说说JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  4. 浅析跨域的方法之一 JSONP

    概念: 什么叫跨域? 同源策略:它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同. 同源的脚本才会被执行 ...

  5. JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  6. 浅析JSONP

    什么是JSONP? JSONP是JSON with Padding的略称.它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式 ...

  7. 【转】json与jsonp区别浅析(json才是目的,jsonp只是手段)

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  8. 浅析JSONP-解决Ajax跨域访问问题

    浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...

  9. Vue 浅析与实践

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:曾柏羲 导语 入职接到的第一个需求是实现一个关于K歌实体售卖的ERP系统,管理系统过去做过不少,这次打算换个姿势,基于时下正热但早已不新 ...

随机推荐

  1. depot用例视图建模

    1. 确定系统涉及的内容 图书馆管理系统有以下模块构成:系统登陆模块.图书馆管理模块.学生管理模块.借阅信息管理模块.图书检索模块. 2. 分析系统参与者 确定参与者首先分析系统涉及的问题领域 和 系 ...

  2. luogu p2330[SCOI05] 繁忙的都市——瓶颈生成树

    P2330 05四川 繁忙的都市 题目描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道 ...

  3. poj3728

    [描述] 有 N 城 市在一个国家,有一个且只有一个简单的路径每一对城市之间. 一个商人选择了一些路径和想赚尽可能多的钱在每个路径. 当他沿着一条路径,可以选择一个城市购买一些商品和出售他们在一个城市 ...

  4. JS-Dom概念

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  5. AOP实现原理

    Spring 为解耦而生,其中AOP(面向切面编程)是很浓重的一笔. 本文来探讨一下AOP实现的原理. 一. 概述 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负 ...

  6. 【线段树】bzoj1018 [SHOI2008]堵塞的交通traffic

    线段树的每个叶子节点存一列. 每个节点维护六个域,分别是左上左下.左上右上.左上右下.左下右上.左下右下.右上右下在区间内部的连通性,不考虑绕出去的情况. 初始每个叶子的左上左下.右上右下是连通的. ...

  7. 自定义actionbar标题

    这是我自己封装的一个activity,主要作为所有Activity的基类,可以一键关掉所有的activity, 并共享一个自定义actionbar.直接切入主题吧. 第一步就是创建自定义标题的布局文件 ...

  8. IE9控件安装方法

    打开上传页面,IE提示安装控件,点击安装   刷新网页,点击允许运行加载项,需要允许两次

  9. 词频统计web

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  10. ARCgis已知线裁剪已知面

    经常遇到需要在ArcGIS中,根据已知线图层(要素)切分已知面图层(要素).经过研究,利用topology拓扑菜单中的construct features可以实现.具体如下 现有用线图层A.面图层B, ...