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. Win7删除右键菜单中“图形属性”和“图形选项”

    完win7操作系统后,打完驱动在桌面右键会出现如下两个选项,平时没啥用又占用空间,那么如何删掉这两个选项呢? 操作步骤: 1.在运行中输入 regedit 确定打开注册表: 2.依次单击展开HKEY_ ...

  2. Vue 路由心得总结

    一. 嵌套路由 a.主页面,  main.vue ,   子页面分别为  shouye.vue   /    liuyan.vue   / about.vue   , 首先, 在main.vue加入导 ...

  3. 微信内无法自动跳转外部浏览器打开H5分享链接的解决办法

    很多情况下我们用微信分享转发H5链接的时候,都无法在微信内打开,即使开始能打开,过一段时间就会被拦截,拦截后再打开微信会提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1 ...

  4. Windows之常用命令

    1. 重启/关机 shutdown命令 #关机 shutdown -s -t -f #重启 shutdown -r -t //30秒之后,重启 00是立即 #注销 shutdown -l -t #休眠 ...

  5. XML的几种转换

    package com.qbskj.project.util; import java.io.ByteArrayOutputStream; import java.util.ArrayList; im ...

  6. Flutter控制屏幕旋转

    特定页面旋转屏幕很简单: SystemChrome.setPreferredOrientations([ ... ]); 数组中是您要支持的屏幕方向. 如果想在特定页面固定横屏, 您可以这样写: @o ...

  7. LeetCode_p150_逆波兰表达式计算/后缀表达式计算

    有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分. 给定逆波兰表达式总是有效的.换句话说,表达式总会得出有效数值且不存在除 ...

  8. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

  9. 关于mysql 自定义@row的使用

    应用场景:在对成绩或者积分排名时,往往需要显示排名; 成绩排名:相同分数的人,名次相同 Select s.Score, case when @rowtotal = s.Score then cast( ...

  10. 互联网+ 何人能挡？带着你的Code飞奔吧！

    Python方向: 早期方向 Web全栈 擅长专栏 爬虫系列 数据分析 人工智能 物联网系(lot万物互联)[逆天很看好未来的前景] 自动化运维(安全与测试) 其他系列 游戏开发(最近很火) 导航栏: ...