同源策略机制

     同源：协议://IP:端口【协议，域名，端口相同】

     跨域：知道对方接口，同时对方返回的数据也必须是Jsonp格式的

问题描述：Ajax跨域请求数据的时候，实际浏览器已经拿到数据，但是浏览器由于同源策略隐藏了这些内容,不给我们看这些数据。换言之，Ajax不能跨域请求数据。

问题解决：<script src="">

           有src属性的标签都可以跨域请求数据，这也就是为什么img我们可以引用别的网站的图片

JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

JSONP一定是GET请求

JSONP就是用来跨域的，没有用XmlHttpRequest对象和Ajax来发送请求，是一个伪造的请求。

JSONP的本质就是动态的创建script标签，然后吧请求的url放入到自己的src标签里面【你请求的URL就是他的src】,拿到数据后[本地的函数接收并处理]最后动态的删除掉。再次发送则再次创建script标签

<script src=''127.0.0.1:8080/XXX.do''>

例如接收的数据是： li([1,2,3,4,5])     --->这里返回的数据li是个函数

function li(data){   // 本地函数

console.log(data)

}

JSONP的约定： 用函数名括起来加上数据   函数名([数据])

Jsonp自己实现JSONP

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

    <input type="button" onclick="jsonpRequest();" value="跨域请求jsonp">

</body>

    <script>

        tag = null;

        function jsonpRequest() {

            tag = document.createElement('script');

            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';

            document.head.appendChild(tag);  // 添加script到head里面

        }

        // 接收返回的JSONP的数据

        function list(data) {

            console.log(data);

            document.head.removeChild(tag);

        }

    </script>

</html>

　　

Jsonp实例一: 利用script标签的src属性

padding: 就是函数，将数据放在在函数内，然后打包发送给前台、

缺点：前台script里必须要有一个函数，处理一个写一个函数，因为本质是利用函数接收参数

正确应该动态添加script标签和内容

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 设置templates的路径为Django以前版本

# 'DIRS': [],      # 注释掉该行，此为Django 2.0.1最新版本

# 'django.middleware.csrf.CsrfViewMiddleware',

         ...省略默认配置

STATIC_URL = '/static/'

TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置

# 静态资源文件

STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 现添加的配置,这里是元组，注意逗号

templates/ajax_jquery.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<script src="/static/jquery-3.2.1.js"></script>

<script>

    function test(data) {

        console.log(data)

    }

</script>

{#跨站请求内容#}

<script src="http://127.0.0.1:8081/jquery_ajax_test/"></script>

</html>

mysite2/urls.py

from django.contrib import admin

from django.urls import path

from blog import views

from django.conf.urls import url

urlpatterns = [

      # Jquery_Ajax

  url(r'ajax-jquery/', views.ajax_jquery),

  # jquery_ajax_test

  url(r'jquery_ajax_test/', views.jquery_ajax_test),

]

views.py

from django.shortcuts import render, HttpResponse

# Jquery --> ajax

def ajax_jquery(request):

    return render(request, 'ajax_jquery.html')

# Jquery --> ajax

import json

def jquery_ajax_test(request):

    print('request.POST', request.POST)

    # return HttpResponse('hello')   # 错误,此时跨域返回给scrip标签一个未定义的hello变量

     # return HttpResponse('var hello')   # 正确,此时跨域返回给scrip标签一个定义但没有内容的hello变量

    return HttpResponse('test("hello")')

页面显示：

动态的创建script的JSonp实例：

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 设置templates的路径为Django以前版本

# 'DIRS': [],      # 注释掉该行，此为Django 2.0.1最新版本

# 'django.middleware.csrf.CsrfViewMiddleware',

         ...省略默认配置

STATIC_URL = '/static/'

TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置

# 静态资源文件

STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 现添加的配置,这里是元组，注意逗号

templates/ajax_jquery.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

    <button onclick="f()">submit</button>

</body>

<script src="/static/jquery-3.2.1.js"></script>

{#动态跨站请求内容#}

<script>

    function addScriptTag(src){

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

         script.setAttribute("type","text/javascript");

         script.src = src;

         document.body.appendChild(script);

        {# document.body.removeChild(script); #}

    }

    function SayHi(arg){

         alert("Hello " + arg)

    }

    function f(){

         addScriptTag("http://127.0.0.1:8081/jquery_ajax_test/?callback=SayHi")

    }

</script>

</html>

mysite2/urls.py

from django.contrib import admin

from django.urls import path

from blog import views

from django.conf.urls import url

urlpatterns = [

      # Jquery_Ajax

  url(r'ajax-jquery/', views.ajax_jquery),

  # jquery_ajax_test

  url(r'jquery_ajax_test/', views.jquery_ajax_test),

]

views.py

from django.shortcuts import render, HttpResponse

# Jquery --> ajax

def ajax_jquery(request):

    return render(request, 'ajax_jquery.html')

# Jquery --> ajax

def jquery_ajax_test(request):

    print('request.GET', request.GET)

    func = request.GET.get('callbacks', None)

    print('func;', func)

    return HttpResponse("%s('world')" % func)

页面显示：

注意：

这里运行了2个环境： python manage.py runserver 8081

项目本身是：http://127.0.0.1:8080/ajax-jquery/

jQuery对JSONP的实现

1. 使用Jquery定义的回调函数名：

$.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){

    console.log("successfully, hello " + arg)

});

注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。

  2.  使用自定义的函数名：

形式一： 自定义函数 + 调用指定函数 【不推荐】

function SayHi() {

      ...

}

$.ajax({

    url:"http://127.0.0.1:8002/get_byjsonp",

    dataType:"jsonp",  # 要求服务器返回一个JSONP格式的数据，一个函数套着一个数据形式，否则返回原类型

    jsonp: 'callback',

    jsonpCallback:"SayHi"

});

注意：jsonp: 'callback' + jsonpCallback:"SayHi"  --拼凑一个键值对发送过去---->  'callback':'SayHi'

形式二：自定义函数 + 不用指定函数名  【推荐】

$.ajax({

    url:"http://127.0.0.1:8002/get_byjsonp",

    dataType:"jsonp",            //必须有，告诉server，这次访问要的是一个jsonp的结果。

    jsonp: 'callback',          //jQuery帮助随机生成的：callback="wner"

    success:function(data){  # 接收后台传递过来的data数据即可

        alert(data)

    }

});

getJSON之使用JQuery定义的函数名--实例

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 设置templates的路径为Django以前版本

# 'DIRS': [],      # 注释掉该行，此为Django 2.0.1最新版本

# 'django.middleware.csrf.CsrfViewMiddleware',

         ...省略默认配置

STATIC_URL = '/static/'

TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置

# 静态资源文件

STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 现添加的配置,这里是元组，注意逗号

templates/ajax_jquery.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <button onclick="f()">submit</button>

</body>

<script src="/static/jquery-3.2.1.js"></script>

{# jQuery对JSONP的实现#}

<script type="text/javascript">

   function f() {

   $.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){

        console.log("successfully, hello " + arg)

    });

}

</script>

</html>

mysite2/urls.py

from django.contrib import admin

from django.urls import path

from blog import views

from django.conf.urls import url

urlpatterns = [

      # Jquery_Ajax

  url(r'ajax-jquery/', views.ajax_jquery),

  # jquery_ajax_test

  url(r'jquery_ajax_test/', views.jquery_ajax_test),

]

views.py

from django.shortcuts import render, HttpResponse

# Jquery --> ajax

def ajax_jquery(request):

    return render(request, 'ajax_jquery.html')

# Jquery --> ajax

def jquery_ajax_test(request):

    print('request.GET', request.GET)

    func = request.GET.get('callback', None)

    print('func;', func)

    return HttpResponse("%s('world 2020')" % func)

页面显示：

getJSON之使用自定义的函数名--实例：

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 设置templates的路径为Django以前版本

# 'DIRS': [],      # 注释掉该行，此为Django 2.0.1最新版本

# 'django.middleware.csrf.CsrfViewMiddleware',

         ...省略默认配置

STATIC_URL = '/static/'

TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置

# 静态资源文件

STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 现添加的配置,这里是元组，注意逗号

templates/ajax_jquery.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <button onclick="f()">submit</button>

</body>

<script src="/static/jquery-3.2.1.js"></script>

{# jQuery对JSONP的实现#}

<script type="text/javascript">

    $.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){

        console.log("successfully, hello " + arg)

    });

</script>

</html>

mysite2/urls.py

from django.contrib import admin

from django.urls import path

from blog import views

from django.conf.urls import url

urlpatterns = [

      # Jquery_Ajax

  url(r'ajax-jquery/', views.ajax_jquery),

  # jquery_ajax_test

  url(r'jquery_ajax_test/', views.jquery_ajax_test),

]

views.py

from django.shortcuts import render, HttpResponse

# Jquery --> ajax

def ajax_jquery(request):

    return render(request, 'ajax_jquery.html')

# Jquery --> ajax

def jquery_ajax_test(request):

    print('request.GET', request.GET)

    func = request.GET.get('callback', None)

    print('func;', func)

    return HttpResponse("%s('world 2020')" % func)

页面显示：

.ajax 跨域请求之指定函数

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 设置templates的路径为Django以前版本

# 'DIRS': [],      # 注释掉该行，此为Django 2.0.1最新版本

# 'django.middleware.csrf.CsrfViewMiddleware',

         ...省略默认配置

STATIC_URL = '/static/'

TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置

# 静态资源文件

STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 现添加的配置,这里是元组，注意逗号

templates/ajax_jquery.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <button onclick="f()">submit</button>

</body>

<script src="/static/jquery-3.2.1.js"></script>

{# jQuery对JSONP的实现#}

<script type="text/javascript">

    function SayHi() {

        console.log("hello, json")

    }

    function f() {

        $.ajax({

        url:"http://127.0.0.1:8081/jquery_ajax_test",

        dataType:"jsonp",

        jsonp: 'callback',

        jsonpCallback:"SayHi"

   });

}

</script>

</html>

mysite2/urls.py

from django.contrib import admin

from django.urls import path

from blog import views

from django.conf.urls import url

urlpatterns = [

      # Jquery_Ajax

  url(r'ajax-jquery/', views.ajax_jquery),

  # jquery_ajax_test

  url(r'jquery_ajax_test/', views.jquery_ajax_test),

]

views.py

from django.shortcuts import render, HttpResponse

# Jquery --> ajax

def ajax_jquery(request):

    return render(request, 'ajax_jquery.html')

# Jquery --> ajax

def jquery_ajax_test(request):

    print('request.GET', request.GET)

    func = request.GET.get('callback', None)

    return HttpResponse("%s('world 2020')" % func)   # func为[]，因为根本不需要调用，前台已定义好

页面显示：

Python学习---JSONP学习180130的更多相关文章

  1. Python 装饰器学习

    Python装饰器学习(九步入门)   这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 1 2 3 4 5 6 7 8 # -*- c ...

  2. Requests:Python HTTP Module学习笔记（一）（转）

    Requests:Python HTTP Module学习笔记(一) 在学习用python写爬虫的时候用到了Requests这个Http网络库,这个库简单好用并且功能强大,完全可以代替python的标 ...

  3. 从Theano到Lasagne：基于Python的深度学习的框架和库

    从Theano到Lasagne:基于Python的深度学习的框架和库 摘要:最近,深度神经网络以“Deep Dreams”形式在网站中如雨后春笋般出现,或是像谷歌研究原创论文中描述的那样:Incept ...

  4. Comprehensive learning path – Data Science in Python深入学习路径-使用python数据中学习

    http://blog.csdn.net/pipisorry/article/details/44245575 关于怎么学习python,并将python用于数据科学.数据分析.机器学习中的一篇非常好 ...

  5. (转载)Python装饰器学习

    转载出处:http://www.cnblogs.com/rhcad/archive/2011/12/21/2295507.html 这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方 ...

  6. python网络爬虫学习笔记

    python网络爬虫学习笔记 By 钟桓 9月 4 2014 更新日期:9月 4 2014 文章文件夹 1. 介绍: 2. 从简单语句中開始: 3. 传送数据给server 4. HTTP头-描写叙述 ...

  7. Python装饰器学习

    Python装饰器学习(九步入门)   这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 ? 1 2 3 4 5 6 7 8 # -*- ...

  8. python数据分析入门学习笔记

    学习利用python进行数据分析的笔记&下星期二内部交流会要讲的内容,一并分享给大家.博主粗心大意,有什么不对的地方欢迎指正~还有许多尚待完善的地方,待我一边学习一边完善~ 前言:各种和数据分 ...

  9. Python的基础学习（第二周）

    模块初始 sys模块 import sys sys.path #打印环境变量 sys.argv#打印该文件路径 #注意:该文件名字不能跟导入模块名字相同 os模块 import os cmd_res ...

随机推荐

  1. 四大组件之Activity——组件间传递数据的4种常用方法

    在Android中传递数据的方法非常多,本次介绍4中比较常用的数据传递方法: 通过Intent/Bundle传递数据 通过静态变量(static)传递数据:需构建跳转页面相应静态变量http://bl ...

  2. Could not find a version that satisfies.... No matching distribution found for .....

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/10227403.html 今天在安装mysql-python的时候报了很多的错误,其中一条就是这 ...

  3. vue中过滤器比较两个数组取相同值

    在vue中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值 有两种写法,两个for循环和map写法 const toName = (ids, arr) ...

  4. C#语法糖（$）（?.）（??）

    内插字符串($) 实际上是C# 6.0对string.Format的改进,将字符串文本标识为内插字符串($)根据微软的例子来看: using System; public class Example ...

  5. Cheatsheet: 2018 01.01 ~ 02.28

    JAVA How to Improve the Performance of a Java Application Java Memory Management Writing Java Micros ...

  6. [PHP] 通用网关接口CGI 的运行原理

    CGI 的运行原理:1.客户端访问某个 URL 地址之后,通过 GET/POST/PUT 等方式提交数据,并通过 HTTP 协议向 Web 服务器发出请求.2.服务器端的 HTTP Daemon(守护 ...

  7. 配置/etc/profile错误导致很多系统命令无法使用

    在配置hadoop的环境变量的过程中,由于字符输入错误导致/etc/profile文件出错,并导致系统的基本命令不能使用,如:vi,ls等. 这种情况,首先修改/etc/profile的错误文件内容, ...

  8. HBase—列族数据库的术语

    1. 列族数据库的基本组件 键空间,行键,列,列族 2. 什么是键空间 keyspace? 键空间 keyspace 是列族数据库的顶级数据结构,它在逻辑上能够容纳列族,行键以及与之相关的其他数据结构 ...

  9. jenkins在Linux 下安装部署

      这里介绍两种方法,一种方法将最新版jenkins加入到yum源,另外一种是下载指定版本的rpm包 系统centos6 自带jdk1.7 一 安装jenkins wget -O :下载并以不同的文件 ...

  10. MVC 导出Execl 的总结几种方式 （二）

    接着上面的来,继续导出Execl 的功能 使用FileResult 方式直接可以生产Execl ,这样我们将会写大量处理后台的代码,个人感觉不好,只是展示出来,提供参考 第一步:编辑控制器 publi ...