JSONP产生背景

1.跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

2.浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

3.如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

4.如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。也可以通过我们今天讲解的JSONP方式在前端页面进行请求。

环境：

python3.7

django2.x

例子

1.通过后台服务端进行对其他域的请求：

urls.py

 from django.contrib import admin

 from django.urls import path,re_path,include  from app02 import  views as views2

 urlpatterns = [

     path('admin/', admin.site.urls),

     path("req/",views2.req)

 ]

views.py

 from django.shortcuts import render

 import requests

 # Create your views here.

 def req(request):

     response = requests.get("http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=14543768704003")

     response.content # 字节类型的

     response.encoding = 'utf-8'

     print(response.text) #字符串类型

     return  render(request,'req.html',{"result":response.text})

req.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>后台获取结果</h1>

    {{ result }}

</body>

</html>

2.通过XHR直接发送GET进行跨域的请求：

req.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <h1>后台获取结果</h1>

     {{ result }}

     <h1>JS直接获取结果</h1>

     <input type="button" value="获取数据" onclick="getContent();">

     <div id="container"></div>

     <script>

         function getContent(){

             var xhr = new XMLHttpRequest();

             xhr.open('GET','http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=14543768704003');

             xhr.onreadystatechange = function(){

                 console.log(xhr.responseText);

             }

             xhr.send();

     </script>

 </body>

 </html>

3.通过XHR模拟JSONP进行跨域的请求：

req.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>后台获取结果</h1>

    {{ result }}

    <h1>JS直接获取结果</h1>

    <input type="button" value="获取数据" onclick="getContent();">

    <div id="container"></div>

    <script>

        function getContent(){

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

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

            document.head.appendChild(tag); // 表示创建一个标签，并且放到head中

            document.head.removeChild(tag);

        }

        function list(arg){

            console.log(arg);

        }

    </script>

</body>

</html>

python&JSONP（初级篇）的更多相关文章

  1. python 面向对象初级篇

    Python 面向对象(初级篇) 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发" ...

  2. python之初级篇2

    一.数字类型 1)整数 int 类型 - bit_length() # 查询以二进制表示一个数字的值所需的位数 - int.from_bytes(bytes,byteorder) # 返回给定字节数组 ...

  3. Python 正则表达式入门（初级篇）

    Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写. 转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达 ...

  4. Python开发【第七篇】：面向对象 和 python面向对象（初级篇）（上）

    Python 面向对象(初级篇)   51CTO同步发布地址:http://3060674.blog.51cto.com/3050674/1689163 概述 面向过程:根据业务逻辑从上到下写垒代码 ...

  5. 【转】Python 面向对象（初级篇）

    [转]Python 面向对象(初级篇) 51CTO同步发布地址:http://3060674.blog.51cto.com/3050674/1689163 概述 面向过程:根据业务逻辑从上到下写垒代码 ...

  6. 转载 Python 正则表达式入门（初级篇）

    Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写.转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式 ...

  7. python_way ,day7 面向对象 （初级篇）

    面向对象 初级篇   python支持 函数 与 面向对象   什么时候实用面向对象? 面向对象与函数对比 类和对象 创建类 class 类名 def 方法名(self,xxxx) 类里面的方法,只能 ...

  8. Python开发【第七篇】：面向对象 和 python面向对象进阶篇(下)

    Python开发[第七篇]:面向对象   详见:<Python之路[第五篇]:面向对象及相关> python 面向对象(进阶篇)   上一篇<Python 面向对象(初级篇)> ...

  9. Python 面向对象 (进阶篇)

    <Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可 ...

  10. python正则表达式入门篇

    文章来源于:https://www.cnblogs.com/chuxiuhong/p/5885073.html Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写. ...

随机推荐

  1. React 系列教程2：编写兰顿蚂蚁演示程序

    简介 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西.因无意中看到生命游戏的 React 实现,所以希望通过兰顿蚂蚁的例子再学习一下 React. 兰顿蚂蚁的规则非常简单: ...

  2. 02-MySQL基础

    MySQL基础 1.存储引擎 1.1MyISAM MySQL5.5以及之前默认存储引擎MyISAM 如果应用是以读操作和插入操作为主,只有很少的更新和删除操作,并且对事务的完整性.并发性要求不高,那么 ...

  3. C#字符串和ASCII码的转换

    //字符转ASCII码: public static int Asc(string character) { if (character.Length == 1) { System.Text.ASCI ...

  4. Photoshop实例视频教程

    Photoshop实例视频教程 2019/04/23 文件名 大小 复古街机风建筑效果图PS教程.mp4 6.63 MB 48.PS教程从零开始学——切片选择工具.mp4 20.90 MB PS教程- ...

  5. JMeter_JDBC 性能测试

    用JMeter做JDBC测试配置步骤: 1.测试计划中添加mysql-connector-java-5.1.41-bin.jar 注意: 这里需要注意的是,在不同的环境(Windows或Linux)下 ...

  6. Node.js中的console.log()输出彩色字体

    转自:https://www.jianshu.com/p/cca3e72c3ba7 console.log('\033[42;30m DONE \033[40;32m Compiled success ...

  7. vue 中 assets 和 static 的区别

    Vue中的静态资源管理(src下的assets和static文件夹的区别)

  8. Tomcat配置实例

    转自:https://www.cnblogs.com/kismetv/p/7228274.html 目录 一.一个server.xml配置实例 二.server.xml文档的元素分类和整体结构 1.整 ...

  9. Linux centos ansible

    创建m01.backup.nfs.web01.web02 m01(172.16.1.61).backup(172.16.1.41).nfs(172.16.1.31).web01(172.16.1.7) ...

  10. 迁移git

    转自:https://www.darrenfang.com/2016/03/transferring-a-repository/ 因为更换服务器,需要将原来的 git 项目迁移到新的服务器上,需要保留 ...