众所周知：在开发过程中，有时候需要客户端从服务器接收或向服务器发送一些数据；如果使用普通的ajax，则会遇到跨域访问无权限的问题。

要解决这个问题，就需要了解一下jsonp了：

1. ajax请求普通文件存在跨域访问无权限的问题。
2. 但是当远程请求js文件时则不受跨域影响，而且只要是有src属性的标签都有跨域的能力
3. 如果想通过纯web端跨域访问数据就只有一种可能，就是在服务端设法把数据封装进js文件中，给客户端
4. 刚好json的数据格式是被js支持的

有了以上4点，解决方案就呼之欲出了，先来个简单的例子（django）：

首先创建一个api.js:

alert('我在服务器上！')

然后在index页面上加载js：

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页</title>

</head>

<body>

    <h1>我是主页</h1>

    <script src="{% static 'jsnpapp/api.js' %}"></script>

</body>

</html>

接下来启动服务器访问一下：

这样似乎没有什么意义，它们在同一个域中！ 那现在我们在本地桌面上新建立一个index.html文件来模拟跨域：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页</title>

</head>

<body>

    <h1>我是主页</h1>

    <script src="http://localhost:8000/static/jsnpapp/api.js"></script>

</body>

</html>

可以看到，在本地的index.html中调用了远程服务器的api.js文件；下面用浏览器打开本地index.html：

可以看到远程服务器的js被本地执行了。

现在改进一下：

在本地index.html中定义一个函数：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页</title>

</head>

<body>

    <h1>我是主页</h1>

    <script>

    var localHandler = function(data) {

        alert('我是本地的函数，我要跨域调用，远程js带来的数据是：'+data.result);

    }

    </script>

    <script src="http://localhost:8000/static/jsnpapp/api.js"></script>

</body>

</html>

服务器上的api.js也修改一下：

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

有点意思，远程服务器要执行本地的函数；我们用浏览器打开本地index.html看看效果：

很完美，本地的函数被远程服务器跨域执行了，而且本地也得到了服务器发来的数据。这样一个跨域就实现了。 但问题是，这些数据都是写死的，

怎么让远程服务器端知道本地的函数名呢，然后返回不同的数据呢？毕竟服务端是要服务很多客户的，这些客户的需求是不一样的。

如果客户端能传递一个参数给服务器，告诉服务器“我要XX函数的数据，请返回给我”， 于是服务端就可以按照客户端的请求响应数据了。

再改进一下，动态响应客户端

先修改一下本地的Index.html,   为了满足各种需求，那么请求url的参数就不能被写死，要动态生成；可以使用动态生成<script>标签的方法来实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>主页</title>

</head>

<body>

    <h1>我是主页</h1>

    <script>

        var localHandler = function(data) {

            alert('我是本地的函数，我要跨域调用，远程js带来的数据是：'+data.result);

        }

         // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）

         var url = "http://localhost:8000/jsnpapp/api?code=1&callback=localHandler";

         // 创建script标签，设置其属性

         var script = document.createElement('script');

         script.setAttribute('src', url);

         // 把script标签加入head，此时调用开始

         document.getElementsByTagName('head')[0].appendChild(script);

    </script>

</body>

</html>

服务端，首先要创建一个url, 然后views， 服务端接收到客户端发来的参数后，动态生成了localHandler这个函数的javascript代码并返回给客户端：

urlpatterns = [

    url(r'^api/', views.base_api),

    url(r'^index/$', views.index),

]
def base_api(request):

    if request.method == "GET":

        code = request.GET.get('code')

        callback = request.GET.get('callback')

        if code == '1':

            msg = "%s({'result':'你给我1， 我就给你1111'})" % callback

            print('msg:', msg)

            return HttpResponse(msg)

    return HttpResponse('我是服务器！')

浏览器运行index.html ：

客户端成功获取到了服务端返回的数据。jsonp的执行过程全部完成。

jsonp的理解的更多相关文章

  1. 同源策略引发对跨域jsonp跨域的理解

    一,同源策略其实网络的安全基石,既:http://www.baidu.com:80协议(http或者HTTPS或者ws或者wss).域名(www.baidu.com).端口(默认80,可以不写 htt ...

  2. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

  3. 利用jsonp进行Ajax跨域请求

    在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...

  4. webApp 阅读器项目实践

    这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader. ...

  5. Ajax和跨域请求

    Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...

  6. JavaScript入门(三)

    JavaScript入门篇—JSONP的应用 什么是JSONP 个人理解:将服务器端返回的json数据封装成JavaScript对象,非正式传输协议. JSONP解决了什么问题 Ajax不支持跨域请求 ...

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

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

  8. 彻底理解跨域解决方案JSONP

    什么是同源策略? 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页 ...

  9. JSONP理解和使用

    一.代码使用: $.ajax({ async:false, url: http://跨域的dns, type: "GET", dataType: 'jsonp'}); 二.理解: ...

随机推荐

  1. 生成ssh-key for GIthub

    在Github里,如果我们想通过ssh的方式进行身份验证,我们就需要建立ssh-key: 方法一: git GUI,点击help,选择Generate ssh key

  2. 把iPad上的视频推送到大麦盒子去

    把iPad上的视频推送到大麦盒子去   最近因为升级家里的宽带,服务商送了一个大麦盒子给我.   大麦盒子,就是一个网络机顶盒,用它可以通过互联网收看电视剧.电影.电视节目.音乐等等.除了它自身带的一 ...

  3. TradingView学习记录

    官网:https://cn.tradingview.com   申请图表库 用本地服务器打开 二:文件目录 三:基础概念 3.1 UDF:通用数据饲料(Universal Data Feed)     ...

  4. 在线Python学习网站

    目前我们使用的Python集成环境是Anaconda3,然后使用Jupyter Notebook和Spyder两个开发环境 Goole推出了在线的开发环境,在线网站: https://colab.re ...

  5. SQL记录-PLSQL游标

    PL/SQL游标 Oracle会创建一个存储区域,被称为上下文区域,用于处理SQL语句,其中包含需要处理的语句,例如所有的信息,行数处理,等等. 游标是指向这一上下文的区域. PL/SQL通过控制光标 ...

  6. Git error： hint: Updates were rejected because the remote contains work that you do hint: not have locally

    hint: Updates were rejected because the remote contains work that you dohint: not have locally. This ...

  7. bzoj千题计划176：bzoj1199: [HNOI2005]汤姆的游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=1199 求出圆x的范围 把要判断的点按x从小到大排序 枚举图形 二分出x满足这个图形的一段区间 枚举这 ...

  8. 读asyncio模块源码时的知识补漏

    硬着头皮看了一周的asyncio模块代码,了解了大概的执行流程,引用太多,成尤其是对象间函数的引用. 光是这么一段简单的代码: # coding: utf8 import asyncio import ...

  9. html5 canvas多个图像旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 新建 Spring Mvc Web + Maven 的 maven 错误 (二)

    新建项目后,可能由于哪边配置不正确,或也可能是编码问题,就有可能在创建初始就可能发生错误: 这是 pom.xml 中提示的错误,有的人说要删除 maven 的本地仓库位置:c:\用户[Users]\A ...