众所周知：在开发过程中，有时候需要客户端从服务器接收或向服务器发送一些数据；如果使用普通的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. Dom选择器--内容文本操作

    一.文本内容操作 内容: <body> <div id="i1"> 学习是我快乐? <a>晚饭吃什么</a> </div> ...

  2. .net 未被引用的错误

    开发的时候遇到了一个错误,如下: 错误 1 类型“System.ServiceModel.ClientBase`1<T0>”在未被引用的程序集中定义. 我原本以为是版本号的问题,添加了引用 ...

  3. 一些常见修改命令（针对ubuntu 14.04 持续更新中...）

    1.PS1 在哪: echo $PS1    vi /etc/bash.bashrc      /W输出最后一个目录    /w输出完整目录 2.设置静态IP地址:vim /etc/network/i ...

  4. Maven的国内镜像(解决jar下载过慢)

    Maven简介 maven作为一个项目管理工具确实非常好用,结果在使用时候,你会发现下载jar速度不如自己在网上下载.之前oschina的中央仓库可用,现在oschina的maven服务器关了,只能拿 ...

  5. 如何通过卡面标识区分SD卡的速度等级

    现在很多设备都可以插存储卡,而比较流行的就是SD(Secure Digital Memory Card)卡和Micro SD(原名TF,Trans-flash Card )卡,这两种卡主要就是尺寸不同 ...

  6. 2018年5月6日GDCPC (广东赛区)总结

    试机是队友浩哥一个人去的,因为觉得华工去了不少次了,环境也比较熟悉了.直到看到了现场环境,感觉有些拥挤,不如从前那样宽敞,增加了一些紧张的不适感. 比赛开始时,我们三人分头读题,虽说题目比较简短,但第 ...

  7. c#的事件用法——实现下载时发生的事件

    //下载时发出的事件 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  8. Java面试题系列（一）描述一下JVM加载class文件的原理机制

    JVM系列第4讲:从源代码到机器码,发生了什么? https://www.cnblogs.com/chanshuyi/p/jvm_serial_04_from_source_code_to_machi ...

  9. raphael.js 给元素 hover 添加glow() 外发光

    用raphael.js 给 svg画布里面添加个元素,嗯就圓好了,男人一般都喜欢圆形的东西,比如xx ,  xxx , 还有xxx $(document).ready(function() { var ...

  10. Hash::make与Hash::check

    调用方法之前要先去引用: use Illuminate\Support\Facades\Hash; 可以调用 Hash 门面上的 make 方法对存储密码进行哈希: $pwd = Hash::make ...