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

    创建渔网 1.     ArcToolbox > Data Management Tools > Feature Class > Create Finshnet.选择输出要素位置,模 ...

  2. 浅说搜索引擎和SEO

    搜索引擎 基本工作原理 信息收集功能 技术点SEO优化核心 优化重点 SEO优化 网站URL title信息 meta信息 图片ALT flash信息 frame框架 网页重要度特征 之前有看到一个师 ...

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

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

  4. html5 canvas旋转

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

  5. 将本地的mongodb迁移到阿里云

    首先在阿里云上安装mongodb,可以根据官方教程 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-amazon/ 完成之后启动 ...

  6. 《区块链100问》第13集：比特币和Q币有哪些不同？

    比特币是一种去中心化的数字资产,没有发行主体.Q币是由腾讯公司发行的电子货币,类似于电子积分,其实不是货币. Q币需要有中心化的发行机构,Q币因为腾讯公司的信用背书,才能被认可和使用.使用范围也局限在 ...

  7. if 语句 写了return 报错

  8. Visual Studio 2013更新内容简介

    前言 VS2013终于发布了,虽然之前自己使用VS2010和VS2012的时间也不长,尤其是VS2012这自己刚刚也没用多久,看到VS2013发布了,自己忍不住也下载了下来,官网肯定可以下载,不过自己 ...

  9. Pandas DataFrame数据的增、删、改、查

    Pandas DataFrame数据的增.删.改.查 https://blog.csdn.net/zhangchuang601/article/details/79583551 #删除列 df_2 = ...

  10. 使用node创建一个服务器，运行vue打包以后的文件

    原理就是使用node里的express框架,搭建一个服务器,然后访问dist文件夹里的文件 prod.server.js var express = require('express') var co ...