众所周知：在开发过程中，有时候需要客户端从服务器接收或向服务器发送一些数据；如果使用普通的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. mongodb 设置用户密码权限

    1 设置管理员账户 use admindb.createUser({ user: "useradmin", pwd: "adminpassword", role ...

  2. Tomcat权威指南-读书摘要系列7

    配置 conf目录下的主要配置文件 server.xml Tomcat主配置文件 web.xml servlet与其他适用于整个Web应用程序设置的配置文件,必须符合servlet规范的标准格式 to ...

  3. Java基础-SSM之mybatis的树形控件（自关联）

    Java基础-SSM之mybatis的树形控件(自关联) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.准备测试环境(创建数据库表) 1>.创建areas表: use y ...

  4. Spark记录-Scala语法基础

    参考:http://docs.scala-lang.org/cheatsheets/index.html.http://docs.scala-lang.org/.http://www.scala-la ...

  5. Dubbo学习笔记4：服务消费端泛化调用与异步调用

    本文借用dubbo.learn的Dubbo API方式来解释原理. 服务消费端泛化调用 前面我们讲解到,基于Spring和基于Dubbo API方式搭建简单的分布式系统时,服务消费端引入了一个SDK二 ...

  6. 流媒体技术学习笔记之（十四）FFmpeg进行笔记本摄像头+麦克风实现流媒体直播服务

    FFmpeg推送视频流,Nginx RTMP模块转发,VLC播放器播放,实现整个RTMP直播 查看本机电脑的设备 ffmpeg -list_devices true -f dshow -i dummy ...

  7. CS229 笔记06

    CS229 笔记06 朴素贝叶斯 事件模型 事件模型与普通的朴素贝叶斯算法不同的是,在事件模型中,假设文本词典一共有 \(k\) 个词,训练集一共有 \(m\) 封邮件,第 \(i\) 封邮件的词的个 ...

  8. 使用sso(cas)的时候报单点登录service不匹配问题分析及解决

    最近在使用portal做企业门户网站,其中使用了sso.在集成了多个应用之后在portal中点击集成的应用报错 2017-05-31 08:37:16,950 ERROR [org.jasig.cas ...

  9. 一个网页的对象抽象之路——po编程 (干货，Java自动化测试)

    先来看一个在腾讯课堂首页搜索机构的操作步骤: 1:首先打开腾讯课堂的首页:https://ke.qq.com 2:点击课程或机构的下拉选择图标 3:选择机构 4:在搜索框输入要搜索的机构名称 5:点击 ...

  10. web.js

    var page = require('webpage').create(), system = require('system'), address,output,csvPath,nodePathF ...