原理：

　　1.创建script标签

　　2.src远程地址

　　3.返回的数据必须为js格式

1.因为浏览器处于安全原因不允许跨域请求，但是允许跨域倒入js文件，所以需要创建script标签

2.src远程地址，这里的地址代表着接口地址，因为接口提供的数据为js文件格式，里面有对应的function和数据。

3.接口的数据为js格式，浏览器会认为程序在倒入新的js文件，就会允许倒入数据，通过倒入这些数据，可以将这些数据提交给后台处理。

例：获取江西电视台的接口数据

from django.contrib import admin

from django.urls import path

from app01 import views

urlpatterns = [

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

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

]

urls.py

from django.shortcuts import render

import requests

# Create your views here.

def req(request):

    response = requests.get('http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301')

    response.encoding = 'utf-8'

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

views.py

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h3>request获取的数据</h3>

    {{ response }}

    <h3>js获取结果</h3>

    <!--xhr获取数据-->

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

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function getContent() {

            /* xhr只能做同一域名的http请求，对于不同域名，浏览器禁止跨域请求 */

            /*

            var xhr = new XMLHttpRequest();

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

            xhr.onreadystatechange = function () {

                alert(xhr.responseText);

            };

            xhr.send();

            */

            /* jsonp通过引入js文件方式获取接口数据。（接口的返回值为相应数据以及需要调用的function名称） */

            /*

            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);

            */

            /* jsonp通过js获取接口数据 */

            $.ajax({

                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',

                type: 'POST',

                dataType: 'jsonp',

                jsonp: 'callback',

                jsonpCallback: 'list'

            })

        }

        function list(arg) {

            console.log(arg)

        }

    </script>

</body>

</html>

req.html

前端引入接口数据有两种方法，一种是通过dom添加标签的方式，通过<script>标签引入js文件内容，另一种就是通过js的ajax方法，固定格式获取数据。

jsonp的原理及其使用的更多相关文章

  1. jsonp协议原理深度解析

    前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...

  2. js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...

  3. JSONP的原理

    JSONP的原理 JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的. <script type="text/j ...

  4. JSONP的原理与实现（基于jQuery）

    为什么会有JSONP?因为我们使用AJAX,使用AJAX可能就会遇到跨域的需求,如何解决呢,对,就是JSONP. 这里注意下JSON和JSONP不是一类,虽然他们只是一个字母只差,但是实际差别很大.这 ...

  5. jsonp实现原理

    jquery 封装在 ajax方法 里面的jsonp jsonp跨域的原理       1:使用script 标签发送请求,这个标签支持跨域访问       2:在script 标签里面给服务器端传递 ...

  6. jsonp详细原理之一

    /*script标签是不存在跨域请求的,类似的还有img,background:url,link 你可以想象一下,平时的这些标签都是可以直接引入外部资源的,所以是不存在跨域问题的*/ function ...

  7. jsonp的原理,应用场景,优缺点

    在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作 另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,ifra ...

  8. 关于javascript跨域及JSONP的原理与应用

    同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略. 为什么需要同源策略,这里举个例子: 假 设现在没有同源策略,会发生什么事情呢? ...

  9. jsonp的原理和实现

    什么是JSONP? javascript高级程序设计中是这样介绍jsonp的: jsonp是JSON with padding(填充式JSON或参数式JSON )的简写,是应用JSON的一种新方法,在 ...

  10. jsonp 实现原理

      Jsonp原理: 首先在客户端注册一个callback, 然后把callback的名字传给服务器. 此时,服务器先生成 json 数据.然后以 javascript 语法的方式,生成一个funct ...

随机推荐

  1. Handler消息传送机制

    一.什么是UI线程 当程序第一次启动的时候,Android会同时启动一条主线程( Main Thread). 主要负责处理与UI相关的事件. 二.UI线程存在的问题 出于性能优化考虑,Android的 ...

  2. IDA Pro 权威指南学习笔记(六) - 次要的 IDA 显示窗口

    十六进制窗口 IDA 十六进制窗口可以配置为显示各种格式,并可作为十六进制编辑器使用 默认情况下,十六进制窗口显示程序内容和列表的标准十六进制代码,每行显示 16 个字节,以及其对应的 ASCII 字 ...

  3. Angular4中利用promise异步加载gojs

    GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库 gojs提供了angular的基本例子,不过是离线版 https://github.com/NorthwoodsSoftw ...

  4. C# web程序,winform程序,控制台程序配置log4net,使用log4net

    第一添加log4net.config,这里配置包括信息提示写入,错误信息写入,控制台消息展示 <?xml version="1.0" encoding="utf-8 ...

  5. Tornado 高并发源码分析之二---Tornado启动和请求处理流程

    Tornado 服务器启动流程 因为Tornado 里使用了很多传类的方式,也就是delegate,之所以要这么做,其实和 iOS 开发那样,也很多的 delegate, 如此来实现高度解耦,但是比较 ...

  6. MIDL相关

    根据MIDL的语义, 指针总被认为是指向单一元素而不是数组.因此以上方法中只有串中的第一个字符被封送.为此,MIDL引入了[string]特性来说明传递的是一个字符串 http://www.cnblo ...

  7. 【转载】用原生JS和html5进行视频截图并保存到本地

    支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...

  8. 在tomcat6.5+上配置虚拟主机

    一 准备(必须配置,否则不能解析域名到ip) 我们将配置两台虚拟主机,假设域名分别为 www.test1.com www.test2.com 为了测试方便,请在客户机的: Win2K://WINNT/ ...

  9. php安装memcache

    php扩展memcache的作用是为了支持memcached数据库缓存服务器,下面是安装方法. 1.下载并解压memcache文件 1 2 3 wget -c http://pecl.php.net/ ...

  10. Solidity oraclize query apikey加密

    solidity 程序中如果用到oraclize query,api调用需要apikey,则最好加密apikey,否则公开solidity代码时会连同apikey一起公开. 加密方法: https:/ ...