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. 作业2：分布式版本控制系统Git的安装与使用

    1.下载安装配置用户名和邮箱. 2. 创建工作目录并通过git init命令把这个目录变成Git可以管理的仓库. 3. 在工作目录下准备文本文件,建议下载Notepad++代替记事本. 4. 组合用g ...

  2. bzoj4892 [TJOI2017]DNA

    bzoj4892 [TJOI2017]DNA 给定一个匹配串和一个模式串,求模式串有多少个连续子串能够修改不超过 \(3\) 个字符变成匹配串 \(len\leq10^5\) hash 枚举子串左端点 ...

  3. html页面打开ie浏览器默认打开最高版本

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  4. RPM管理工具

    linux软件包从内容上可以分为binary code和source code(二进制包和源码包) binary code无需编译,可以直接使用 source code需要经过GCC,C++编译环境编 ...

  5. 低版本Flume兼容高版本elasticsearch

    Flume更新比较慢,而elasticsearch更新非常快所以当涉及更换elasticsearch版本时会出现不兼容问题. apache-flume-1.6.0+elasticsearch1.5.1 ...

  6. CS程序自动更新实现原理及代码（支持多版本多文件更新）

    公司主要项目为CS端,经常遇到客户需求变更及bug处理,在没有引用自动更新之前每次更新程序,必须手动对每个客户端进行更新,这样导致技术支持工作量特别大,也给客户不好的印象,因此我需要一个自动更新程序! ...

  7. scrollbar样式设置

    转载:https://segmentfault.com/a/1190000012800450?utm_source=tag-newest author:specialCoder 一 前言 在CSS 中 ...

  8. Jetson TX1刷机

    刷机流程 https://blog.csdn.net/c406495762/article/details/70786700 注意:教程中包含两步,首先安装Ubuntu系统,然后重启安装程序,安装其他 ...

  9. maven使用中的问题

    1.修改maven的settings.xml后,idea中配置文件指向发生了变化,指向了默认.如果maven配置文件中不是默认的,则需要根据配置文件进行修改.最好在File-Other Setting ...

  10. 关于空想X

    只是一个ID而已,我才不会告诉你这是一艘法国驱逐舰 想去打CTF,但是什么也不会. 博主人很懒,估计也不会更几篇博客,嘿嘿嘿. 最近在学PYTHON,欢迎交流.