文档章节

简单透彻理解JSONP原理及使用

喜欢吃鱼嘛
 喜欢吃鱼嘛
发布于 2017/10/22 14:35
字数 1075
阅读 63
收藏 1

什么是JSONP

首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。

那么JSONP是什么呢?
首先抛出浏览器同源策略这个概念,为了保证用户访问的安全,现代浏览器使用了同源策略,即不允许访问非同源的页面,详细的概念大家可以自行百度。这里大家只要知道,在ajax中,不允许请求非同源的URL就可以了,比如www.a.com下的一个页面,其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。

JSONP就是用来解决跨域请求问题的,那么具体是怎么实现的呢?


JSONP原理

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。

jsonp根本不是ajax,因为它根本不产生XMLHttpRequest对象,只是它表现有点像ajax -- 没有刷新页面就可以获取到数据,但这不是ajax的根本特征(ajax的根本特征是XMLHttpRequest对象)。另外ajax大多数返回json或者文本数据,而jsonp返回的是一个js文档。

JSONP具体实现

1.首先看下ajax中如果进行跨域请求会如何。
前端代码在域www.practice.com下面,使用ajax发送了一个跨域的get请求

<!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> <script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> <script type="text/javascript" src="jquery-1.8.3.min.js">
</script> <script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            type: "json",
            success : function(data) {
                jsonhandle(data);
            }

        });
    });
</script> </body> </html>

后端PHP代码放在域www.practice-zhao.com下,简单的输出一段json格式的数据

jsonhandle({
    "age" : 15,
    "name": "John",
})

当访问前端代码http://www.practice.com/gojsonp/index.html 时 chrome报以下错误

提示了不同源的URL禁止访问

2.下面使用JSONP,将前端代码中的ajax请求去掉,添加了一个script标签,标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本

<!DOCTYPE html> 
<html> 
<head> 
<title>GoJSONP</title> 
</head> 
<body> 
<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script> 
</body> 
</html>

这里调用了跨域的remote.js脚本,remote.js代码如下:

jsonhandle({
    "age" : 15,
    "name": "John",
})

也就是这段远程的js代码执行了上面定义的函数,弹出了提示框

3.将前端代码再进行修改,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<title>GoJSONP</title> 
</head> 
<body> 
<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $('<script><\/script>');
        obj.attr("src",url);
        $("body").append(obj);
    });
</script> 
</body> 
</html>

这里动态的添加了一个script标签,src指向跨域的一个php脚本,并且将上面的js函数名作为callback参数传入,那么我们看下PHP代码怎么写的:

<?php 
$data = array( 'age' => 20, 'name' => '张三', ); 
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")"; 
return;

PHP代码返回了一段JS语句,即

jsonhandle({
    "age" : 15,
    "name": "张三",
})

此时访问页面时,动态添加了一个script标签,src指向PHP脚本,执行返回的JS代码,成功弹出提示框。
所以JSONP将访问跨域请求变成了执行远程JS代码,服务端不再返回JSON格式的数据,而是返回了一段将JSON数据作为传入参数的函数执行代码。

4.最后jQuery提供了方便使用JSONP的方式,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<title>GoJSONP</title> 
</head> 
<body> 
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script> 
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            dataType: "jsonp",
            jsonp:"callback", //请求php的参数名
            jsonpCallback: "jsonhandle",//要执行的回调函数
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });
</script> 
</body> 
</html>

 

本文转载自:http://blog.csdn.net/u011897301/article/details/52679486

喜欢吃鱼嘛
粉丝 3
博文 57
码字总数 57252
作品 0
石景山
程序员
私信 提问
手写一个JSONP(promise封装)

前言 JSONP以前研究过,最近又有点忘了,写篇本文mark一下,旨在理解记住JSONP的原理及其实现。代码实现用到es6语法,使用promise来封装JSONP方法,本地测试用的自己node搭的服务器,具体代码...

TokenYang
2017/10/14
0
0
JSONP原理及JQUERY JSONP的使用

JSONP原理 JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。   JSONP...

听风雨
2014/03/01
426
0
node.js代理跨域 「案例: 音乐接口」

前面写到的jsonp 还是 html postMessage 实现跨域,都是在上实现的,但本身有缺陷,前面有举例讲到,下面写写在。(ps:了解之前最好先掌握http协议相关知识~分享资料) 2个点:、 先了解一下...

Searchen
2018/06/16
0
0
深入浅出JSONP--解决ajax跨域问题

同源策略   为什么会出这样的错误呢?这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释:   同源策略,它是由Netscape提出的一个著名的安全策略。现在所...

ForingY
2015/11/25
46
0
Web开发中跨域的几种解决方案

出于安全考虑,HTML的同源策略不允许JavaScript进行跨域操作,但随着Web App的功能越来越强 各种跨域的需求催生了无数的跨域手法。甚至在HTML5标准中都给出了官方的跨域方法, 也是最近应付面...

wecloudnet
2016/04/08
185
0

没有更多内容

加载失败,请刷新页面

加载更多

面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
15分钟前
11
0
读书笔记:深入理解ES6 (八)

第八章 迭代器(Iterator)与生成器(Generator) 第1节 循环语句的问题   在循环、多重循环中,通过变量来跟踪数组索引的行为容易导致程序出错。迭代器的出现旨在消除这种复杂性,并减少循...

张森ZS
15分钟前
10
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
20分钟前
10
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
28分钟前
10
0
重磅发布 | 全球首个云原生应用标准定义与架构模型 OAM 正式开源

导读:2019 年 10 月 17 日,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应用模型 Open Application Model (OAM...

阿里云官方博客
31分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部