python&JSONP（初级篇）

JSONP产生背景

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

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

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

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

环境：

python3.7

django2.x

例子

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

urls.py

1 from django.contrib import admin
2 from django.urls import path,re_path,include 4 from app02 import  views as views2
5 
6 urlpatterns = [
7     path('admin/', admin.site.urls),
8     path("req/",views2.req)
9 ]

views.py

1 from django.shortcuts import render
2 import requests
3 # Create your views here.
4 def req(request):
5     response = requests.get("http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=14543768704003")
6     response.content # 字节类型的
7     response.encoding = 'utf-8'
8     print(response.text) #字符串类型
9     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>

View Code

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

req.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1>后台获取结果</h1>
 9     {{ result }}
10     <h1>JS直接获取结果</h1>
11     <input type="button" value="获取数据" onclick="getContent();">
12     <div id="container"></div>
13     <script>
14         function getContent(){
15             var xhr = new XMLHttpRequest();
16             xhr.open('GET','http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=14543768704003');
17             xhr.onreadystatechange = function(){
18                 console.log(xhr.responseText);
19             }
20             xhr.send();
21     </script>
22 </body>
23 </html>

View Code

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>