• 这里提到了JSONP，那有人就问了，它同JSON有什么区别不同和区别呢，接下我们就来看看，百度百科有以下说明：

'''

1. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)。

2. JSONP(JSON with Padding)是JSON的 一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的`<script>` 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

3. 我们知道，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。若要跨域请求出于安全性考虑是不行的，但是我们发现，Web页面上调用js文件时则不受是否跨域的影响，而且拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>，这时候，聪明的程序猿就想到了变通的方法，如果要进行跨域请求， 通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据，然后包装成script脚本回传，着不就突破同源策略的限制，解决了跨域访问的问题了么。

第一种jQuery实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <h1>后台获取的结果</h1>

    {{ result }}

    <h1>js直接获取结果</h1>

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

    <div id="container"></div>

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

    <script>

        function getContent(){

            $.ajax({

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

                type: 'POST',

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

                jsonp: 'callback',  //函数变量名

                jsonpCallback: 'list'  //函数名称

            })

        }

        function list(arg){

            console.log(arg);

        }

    </script>

</body>

</html>

第二种XMLHttpRequest实现的

 function getContent(){

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

Python后端代码



def jsonp(request):

    func = request.GET.get('callback')

    content = '%s(100000)' %(func,)

    return HttpResponse(content)

Python自动化之跨域访问jsonp的更多相关文章

  1. JQuery实现Ajax跨域访问--Jsonp原理

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

  2. jfinal 解决ajax 跨域访问--jsonp

    JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的 js无法操作b.com或是c.a.com域名下的对象. ...

  3. 跨域访问JSONP CORS

    一.JSONP 常用的Jquery框架支持jsonp方式请求,该方式只支持GET方法,传参大小有限,而且需要后台根据jsonp的请求方式进行封装结果返回. 其中参数jsonp默认为callback,j ...

  4. 跨域访问-JSONP

    JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求,我们可以通过使用 html的script ...

  5. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  6. C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题

    客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...

  7. 用jQuery与JSONP轻松解决跨域访问的问题【转】

    原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...

  8. jQuery 跨域访问问题解决方法（转）

    转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记 ...

  9. Ajax实现跨域访问的两种方法

    调程序时遇到"已拦截跨源请求:同源策略禁止读取位于--的远程资源",这是因为通过ajax调用其他域的接口会有跨域问题. 解决方法如下: 方法一:服务器端(PHP)设置header头 ...

随机推荐

  1. 基于socket的简单p2p聊天项目

    https://blog.csdn.net/Jacky_Can/article/details/74984822 https://blog.csdn.net/qq_20889581/article/d ...

  2. 谷歌浏览器network请求时间（stalled，DNS Lookup，Waiting）分析以及解决方案

    network工具功能强大,能够让我看到网页加载的信息,比如加载时间,和先后顺序,是否是并行加载,还是堵塞加载. 默认情况下有八列: (1).Name:表示加载的文件名. (2).Method:表示请 ...

  3. CefSharp F12打开DevTools查看console

    winform嵌入chrome浏览器,修改项目属性 生成 平台为x86 1.nuget安装cefsharp 2.实例化浏览器 private void Form1_Load(object sender ...

  4. 慕课网 Ajax笔记

    Ajax技术实现: 运用HTML和CSS来实现页面,表达信息: 运用XMLHttpRequest和web服务器进行数据的异步交换: 运用JavaScript操作DOM,实现动态局部刷新: 同步:就是用 ...

  5. Flutter隐藏控件方法

    new Offstage( offstage: true, //这里控制 child: Container(color: Colors.blue,height: 100.0,), ),

  6. java 内存分析之this

    package Demo; /** * this 的值是当前对象的引用 * @author Aaron * */ public class Boy { private int age; public ...

  7. 关于p标签

    说p标签是不能嵌套div和p的,嵌套会被浏览器解析分离.但如果你使用了document.createElement创建div,再appendChild的话反而可以了.看来浏览器并不支持动态解析

  8. Ionic step by step (1)

    刚接触 ionic,一步一步学习,有错误的,望大家指出. 公式 Ionic = Cordova + Angular2 + ionic CSS Cordova: 提供了使用 JavaScript 调用 ...

  9. Tomcat性能监控之Probe

    目前采用java进行开发的系统居多,这些系统运行在java容器中,通过对容器的监控可以了解到java进程的运行状况,分析java程序问题.目前市面上流行的中间件有很多(Tomcat.jetty.jbo ...

  10. win10 虚拟机 hyper-v 安装 centos 7

    一.win 10 企业版 自带虚拟机 hyper-v 1.控制面板-->程序和功能-->启用或关闭Windows功能 勾上 hyper-v 确定就ok了 2.安装成功后会发现在 左下角“开 ...