同源策略机制

     同源：协议://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. 用通俗的语言解释 Spring 中的 DI 、IOC 和AOP概念

    DI 所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B,反正A要用到B,则A依赖于B.所谓倒置,你必须理解如果不倒置,会怎么着,因为A必须要有B,才可以调用B,如果不倒置,意思就是 ...

  2. HUE配置文件hue.ini 的pig模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 一.默认的pig配置文件 ########################################################################### ...

  3. linux mint 18.2 install erlang

    由于Linux min 18.2仓库中的erlnag是18.2,我们手动安装最新版本,参考 https://www.erlang-solutions.com/resources/download.ht ...

  4. ASP.NET Core 集成 WebSocket

    1. 环境 AspNetCore Web 2.0 (MVC) Windows 10 IIS 10 Express/IIS VS 2017 2.如何配置 在已有的或者新创建的 AspNet Core M ...

  5. [转]TEC1401.Report开发技术总结 - 第三章 使用Oracle Reports开发报表-创建一个分组报表（2/4）

    本文转自:http://blog.csdn.net/deepsea_allen/article/details/53900284 第三章   创建一个分组报表 1.     建立数据模型 数据模型用于 ...

  6. 泛型委托Action与ActionT

    以前都是自己写委托,其实系统内部给我们系统了委托的. Action ——委托的非泛型版本就是一个无参数无返回值的委托. Action<T>——委托的泛型版本是一个无返回值,但是参数个数及类 ...

  7. 三、hdfs的JavaAPI操作

    下文展示Java的API如何操作hdfs,在这之前你需要先安装配置好hdfs https://www.cnblogs.com/lay2017/p/9919905.html 依赖 你需要引入依赖如下 & ...

  8. java自学-编程入门

    java语言写的代码需要先编译为可执行文件,才能被jvm执行.在下载的jdk安装目录下的bin目录,有两个可执行程序java.exe和javac.exe,javac就是用来编译的,java是执行编译后 ...

  9. SQL Server 2008各版本介绍区别(包含企业版 开发者版 标准版 Web版 工作组版 Express版 Compact版)

    SQL Server 2008分为SQL Server 2008企业版.标准版.工作组版.Web版.开发者版.Express版.Compact 3.5版,其功能和作用也各不相同,其中SQL Serve ...

  10. csharp: string Encoding

    /// <summary> /// 中文转unicode /// </summary> /// <param name="str"></p ...