在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题有两种方法：

　　一、jsonp 　

　　二、XMLHttpRequest2中可以配合服务端来解决，在响应头中加入Access-Control-Allow-Origin:*

1、同源：

　　同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同
　　1.1目的：保护用户信息安全
　　1.2限制：cookie、localStorage和IndexDB无法读取
　　无法操作跨域的iframe里的dom元素
　　ajax请求不能发送

2、跨域：

不同源则为跨域

http://api.example.com/detail.html  不同源 域名不同

2      https//www.example.com/detail.html   不同源 协议不同

3      http://www.example.com:8080/detail.html    不同源    端口不同

4      http://api.example.com:8080/detail.html    不同源    域名、端口不同

5      https://api.example.com/detail.html    不同源    协议、域名不同

6      https://www.example.com:8080/detail.html    不同源    端口、协议不同

7      http://www.example.com/detail/index.html    同源    只是目录不同

3、jsonp原理：

其本质是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来

4、案例

views.py

from django.shortcuts import render

import requests

def jsonp(request):

    response = requests.get('http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301')   #通过这个天气的API接口获得天气信息

    #print(response.content) # 字节

    response.encoding = 'utf-8'  #将其转化为中文字符

    #print(response.text)    # 字符串

    return render(request,'jsonp.html',{'result': response.text})   #向前端发送result
urls.py

from app01 import views

from django.contrib.staticfiles.urs

from django.urls import path

urlpatterns = [

    path('jsonp/', views.jsonp),

]
jsonp.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 src="/static/js/jquery-1.12.4.js"></script>

    <script>

        function getContent(){

            /*                   ajax原生方式发送

            var xhr = new XMLHttpRequest();

            xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2');

            xhr.onreadystatechange = function(){

                console.log(xhr.responseText);

            };

            xhr.send();

            */

            /*

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

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

            document.head.appendChild(tag);

            document.head.removeChild(tag);

            */

            $.ajax({

                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',   //江西电视台的url

                type: 'POST',                                        //请求方式为POST

                dataType: 'jsonp',                                  //数据格式为jsonp

                jsonp: 'callback',

                jsonpCallback: 'list'                              //表示url的callback等于list,会额外的通过url发过去

            })

        }

        function list(arg){

            console.log(arg);

        }

    </script>

</body>

</html>

案例前端结果：

Django之jsonp跨域请求原理的更多相关文章

  1. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  2. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  3. 深入理解jsonp跨域请求原理

    在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中 ...

  4. JSONP 跨域请求原理

    0x00 简介 由于浏览器的同源策略,我们想要从别的域获取数据变得困难,需要特殊的技术才能获取 0x01 使用 客户域:client.com 服务器(他域):server.com 如客户想访问 : h ...

  5. Django框架 之 跨域请求伪造

    Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...

  6. 【Django】实现跨域请求

    目录 JsonP实现跨域 在Django中间件中添加响应头 @ *** CORS 即 Cross Origin Resource Sharing 跨域资源共享. 跨域请求分两种:简单请求.复杂请求. ...

  7. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  8. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  9. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

随机推荐

  1. linux安装py3.6

    随手记录: https://www.python.org/ftp/python/3.6.8/Python-3.6.8rc1.tgz 所有linux版本: https://www.python.org/ ...

  2. 第131天：移动web页面的排版与布局

    一.总之一句话, 尽量用mm 毫米作为标准单位. 采用新的相对单位 rem 首先设置html的 font-size 为根大小. html{ font-size:1mm; } .titleheight{ ...

  3. 按位与&、按位或|、按位异或^

    与1进行位与&运算,值保持不变: 与0进行位与&运算,值清0: 按位与&常用于将整型变量中某些位清0,而其他位保持不变. 与1进行位或|运算,值置1: 与0进行位或|运算,值保 ...

  4. java map添加另一个map时候 键值对的类型要一致

    java map添加另一个map时候 键值对的类型要一致

  5. 当使用listIterator进行迭代时候 list的迭代器可以在创建迭代器对象后 添加数据 但打印的时候不显示添加后的数据。 collection 的iterator迭代器不能添加数据 。list的对象与collection的实例对象都不能在创建迭代器后添加数据 list的迭代器保存的是循环前的数据长度

  6. [Code Festival 2017 qual A] B: flip

    题意 给出一个n行m列初始全白的矩阵,每次可以翻转一行/一列的全部格子的颜色.问任意次操作后能否使得恰好有k个黑色格子. n,m<=1000 分析 显然要么翻转一次要么不翻转. 最终黑色格子数只 ...

  7. Simple上网导航--静态版

    现在的网址导航显然是一个针对小白用户的网页大全,新闻.笑话.视频.黄段子要什么有什么,一个网址导航竟然也要滑动好多页.其实80%的功能我都用不到,但是它们却时刻展现在我的眼前.所以我决定做一个简洁清晰 ...

  8. Oracle中三种循环(For、While、Loop)案例

    1.ORACLE中的FOR循环用法(九九乘法表) declare i ; j ; begin .. loop ..i loop Dbms_Output.put(i||'*'||j||'='||i*j) ...

  9. 【HLSDK系列】服务端 AddToFullPack 函数

    服务端会给客户端发送一些数据,其中两大种类数据是 clientdata_t 和 entity_state_t 这里我们说说 entity_state_t 这个结构体. 你在丢在地上的枪.C4等等是服务 ...

  10. Qt消息机制和事件

    Qt消息机制和事件 1 事件 事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应 ...