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

    python 基础数据类型之list: 1.列表的创建 list1 = ['hello', 'world', 1997, 2000] list2 = [1, 2, 3, 4, 5 ] list3 = ...

  2. dedecms织梦列表页调用TAG标签并带上链接的实现方法

    在需要调用的地方添加如下代码: [field:id runphp='yes'] global $cfg_cmspath; $tags = GetTags(@me); $revalue = ''; $t ...

  3. 小议 开源中国 I LOVE YOU js代码

    今天在开源中国看到一篇神作<I LOVE YOU js代码>是17号的文章了,也许你已经看过了. 文章非常有意思,由 5 个 "爱心" 组成的一段js代码,能正常执行, ...

  4. mysql先排序在分组

    – 表的结构 `test`– CREATE TABLE IF NOT EXISTS `test` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varcha ...

  5. [BZOJ 1652][USACO 06FEB]Treats for the Cows 题解（区间DP）

    [BZOJ 1652][USACO 06FEB]Treats for the Cows Description FJ has purchased N (1 <= N <= 2000) yu ...

  6. jquery的clone方法bug的修复select,textarea的值丢失

    项目中多次使用了iframe,但是操作起来是比较麻烦,项目中的现实情况是最外面是一个form,里面嵌套一个iframe,下面是一个其他的数据,在form提交的时候将iframe的数据和其他的数据一块提 ...

  7. mysql数据库的快捷键

    mysql数据库快捷键 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的s ...

  8. windows下使用pip安装python模块lxml

    pip install lxml 1 1 会有如下问题:  结果一路解决下去,解决了一个坑还是有一个坑,遂放弃,查找有没有别的解决办法. 亲测使用wheel+pip可以成功安装lxml! wheel本 ...

  9. C#使用redis学习笔记

    1.官网:http://redis.io/(英)  http://www.redis.cn/(中) 2.下载:https://github.com/dmajkic/redis/downloads(Wi ...

  10. ASP.NET MVC环境下实现一个网站多个网站模板的方法

    asp.net mvc下实现多个网站模板的方法,让ASP.NET一个网站有多套网站模板,不用的场景下使用不用的mvc 模版.  比如有默认,红,蓝,绿几种网站模板,客户可以根据自己喜好选择自己喜欢的网 ...