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

时间：2022-09-04 20:27:58

首先提一下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具体实现

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",

})

不会php的这句话的解读

在地址栏里敲入，会输出

{

    "age" : 15,

    "name": "John",

}

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

简单透彻理解JSONP原理及使用
提示了不同源的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代码执行了上面定义的函数，弹出了提示框 
简单透彻理解JSONP原理及使用

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

简单透彻理解JSONP原理及使用的更多相关文章

  1. 深入理解JSONP原理——前端面试

    JSON和JSONP虽然只有一个字之差,但是它们俩是八竿子打不着的:JSON是一种数据交换格式,JSONP是非正式的跨域数据交换协议. 为什么说JSONP是非正式的传输协议呢?因为它就是利用了< ...

  2. 简单理解jsonp原理

    对于javascript程序员来说,发送ajax请求获取后台数据然后把数据和模板拼接成字符串渲染回DOM实现无刷新更新页面这样的操作可谓是轻车熟路.但众所周知,ajax有一个不好,就是不能跨域传输数据 ...

  3. node&period;js学习（三）简单的node程序&amp&semi;&amp&semi;模块简单使用&amp&semi;&amp&semi;commonJS规范&amp&semi;&amp&semi;深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  4. 理解Promise简单实现的背后原理

    在写javascript时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的.事件监听的 ...

  5. 深入理解jsonp跨域请求原理

    在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中 ...

  6. 彻底弄懂jsonp原理及实现方法

    一. 同源策略 所有支持Javascript的浏览器都会使用同源策略这个安全策略.看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略. 现在所有支持JavaScript 的浏览 ...

  7. 【Netty】最透彻的Netty原理架构解析

    这可能是目前最透彻的Netty原理架构解析 本文基于 Netty 4.1 展开介绍相关理论模型,使用场景,基本组件.整体架构,知其然且知其所以然,希望给大家在实际开发实践.学习开源项目方面提供参考. ...

  8. Atitit 图像处理 深刻理解梯度原理计算&period;v1 qc8

    Atitit 图像处理 深刻理解梯度原理计算.v1 qc8 1.1. 图像处理  梯度计算  基本梯度 内部梯度 外部梯度 方向梯度1 2. 图像梯度就是图像边缘吗?2 1.1. 图像处理  梯度计算 ...

  9. Ajax跨域：Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

随机推荐

  1. 在Nginx 下运行 Laravel5&period;1 的配置

    一.nginx 的 vhost.conf 配置: server { listen ; server_name sub.domain.com; set $root_path '/srv/www/defa ...

  2. node&period;js模块之http模块

    如果你想向远程服务器发起HTTP 连接,Node 也是很好的选择.Node 在许多情景下都很适合使用,如使用Web service,连接到文档数据库,或是抓取网页.你可以使用同样的http 模块来发起 ...

  3. 设置checkbox选中，设置radio选中，根据值设置checkbox选中，checkbox勾选

    设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选 >>>>>>>>>>>>&g ...

  4. AndroidStudio字体主题样式分享

    最近慢慢在从eclipse往AndroidStudio习惯,但总觉得AS的默认字体颜色看的不舒服,便花了些时间将字体颜色样式改成了和原来类似的.以下是效果图. 这里是下载地址http://downlo ...

  5. VS2012发布网站IIS配置

    首先要配置好下面步骤 然后 把图上勾选的都勾选 最后一步 那IIS就配置好了,怎么添加发布呢打开IIS管理器 然后带点击网站添加网站 ,在这之前首先要在磁盘里新建一个文件夹,把项目复制过去,网站随便命 ...

  6. 网站升级HTTPS后WebSocket不能连接的问题

    一.前端代码 var socket = new WebSocket("wss://www.smcic.cn/wss/"); 注意点: 如果网站使用HTTPS,WebSocket必须 ...

  7. idea实用插件

    代码规范检测插件: Alibaba Java Coding GuideLines使用@data插件lombok数据库mapper插件mybatisX前端运行vue的插件,装起了后在Terminal上运 ...

  8. MVC Autofac依赖注入

    通过Dll实现全部类的属性注入,该演示实例主要通过多层架构中单一的对象方式来演示,没有采取接口的方式, 新建AutoFacHelper类,如下代码: public class AutoFacHelpe ...

  9. &lbrack;sql异常&rsqb;SQL Server 阻止了对组件 &&num;39&semi;Ad Hoc Distributed Queries&&num;39&semi; 的

    //执行远程数据库表查询 SELECT * FROM OPENDATASOURCE('SQLOLEDB', 'Data Source=数据库地址;User ID=sa;password=sa' ).n ...

  10. 清北学堂学习总结 day2 字符串 练习

    1.hash表(哈希表) codevs 2147 数星星--简单哈希  时间限制: 3 s  空间限制: 64000 KB  题目等级 : 钻石 Diamond 题目描述 Description 小明 ...

相关文章