36)django-jsonp跨域
一：什么是JSONP
JSONP(JSON with Padding)是JSON的一种"使用模式"，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
二:使用原生js,或者jquery访问跨域报错
<body>
<h1>后台获取结果</h1>
{{ result }}
<h1>js直接获取结果</h1>
<input type="button" value="获取数据" id="ok_button" onclick="getData();">
<div id=""container> </div> <script>
//原生js
function getData(){
var xhr=new XMLHttpRequest()
xhr.open("GET","http://127.0.0.1:8001/req")//以什么方式a
xhr.onreadystatechange=function(){//执行成功后的回调信息
console.log(xhr.responseText)
}
xhr.send() //发送信息
}
</script>
</body> #js发错报错
XMLHttpRequest cannot load http://127.0.0.1:8001/req. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.
以把请求放过去了，也收到了，但在在数据回到浏览器的时候，我浏览器拒不接受。这是浏览器策略。
三：使用script发送数据
#jsonp 存在的意义就是：由于浏览器具有同源策略（阻止ajax请求，但是无法阻止script）。
#通过script发送数据。
<body>
<h1>后台获取结果</h1>
{{ result }}
<h1>js直接获取结果</h1>
<input type="button" value="获取数据" id="ok_button" onclick="getData();">
<div id=""container> </div> <script>
//原生js
function getData(){
var tag=document.createElement("script") //创建script标签
tag.src="http://127.0.0.1:8001/req //要发送地址
document.head.appendChild(tag)//script加入头部
}
</script>
</body>
#但是返回结果会出错，原因返回的结果不是script语法，所以要把返回结果必须是JS格式
return HttpResponse("alter(123)") 正确
return HttpResponse("")报错。
四：例子
#例子：通过script跨哉访问请求（js发送数据）
工程2：
#views.py
from django.shortcuts import render,HttpResponse # Create your views here.
def req(request):
func=request.GET.get("func")
return HttpResponse('func("XXX")') #返回func是js定义的函数 #urls.py
url(r'^req$',views.req), #起动地址
http://127.0.0.1:8001/req 工程1：
#views.py
from django.shortcuts import render,HttpResponse
import requests
# Create your views here. def a(request):
return HttpResponse("ok") #urls.py
#url(r'^a/', views.a), #模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>js直接获取结果</h1>
<input type="button" value="获取数据" id="ok_button" onclick="getData();">
<div id=""container> </div> <script>
//原生js
function getData(){ var tag=document.createElement("script") //创建script标签
tag.src="http://127.0.0.1:8001/req?func=func" //要发送地址
document.head.appendChild(tag)//script加入头部
}
#func=func 把js方法传递给后台
function func(arg){
alert(arg);
}
</script>
</body>
</html>
五：JSONP跨域请求的本质
由于浏览器具有同源策略（阻止ajax跨域请求，但是无法阻止script）
1）创建script标签
2）src=远程地址
3）返回的数据必须是js格式 JSONP只能发GET请求
六：jquery跨域实现
#jsonp跨域请求jquery方式
<script src="/static/jquery-1.12.4.js"></script>
<script>
//原生js $.ajax({
url:"http://127.0.0.1:8001/req?",
type:"POST",
dataType:"jsonp",
jsonp:"callback",//发送的参数
jsonpCallback:"func",//发送参数的值 等价http://127.0.0.1:8001/req?callback=func
})
}
function func(arg){
alert(arg);
}
</script>
七：总结
就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。
36)django-jsonp跨域的更多相关文章
- Django学习---jsonp跨域请求
jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...
- django - 总结 - 跨域请求
script ->jsonp跨域 浏览器的同源策略:不能跨越网站请求信息: XMLHttpRequests遵循这个规定. 因此ajax等基于XML的都不能进行跨站请求 而我们知道img,ifra ...
- 06: AJAX全套 & jsonp跨域AJAX
目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...
- jsonp跨域简单应用（一）
转载:http://www.cnblogs.com/cyg17173/p/5865364.html ashx+jsonp+document.referrer -- 一年前学的JSONP 跨域,一年 ...
- ajax jsonp跨域 【转】
跨域的基本原理: JSONP跨域GET请求是一个常用的解决方案, JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 借助node实战JSONP跨域
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...
- jsonp跨域+ashx（示例）
前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
随机推荐
- Android允许在UI线程中使用网络访问
StrictMode.ThreadPolicy policy=new StrictMode.ThreadPolicy.Builder().permitAll().build(); StrictMode ...
- C# RestoreDirectory
OpenFileDialog与SaveFileDialog都有RestoreDirectory属性,这个属性默认是false,打开一 个文件后,那么系统默认目录就会指向刚才打开的文件.如果设为true ...
- Groovy 设计模式 -- proxy & delegate
Proxy https://en.m.wikipedia.org/wiki/Proxy 代理人 与 被代理人 是 一对一的关系. A proxy is an agent or substitute a ...
- 十八、Linux 进程与信号---进程介绍
18.1 进程的概念 程序:程序(program)是存放再磁盘文件中的可执行文件 进程 程序的执行实例被称为进程(process) 一个程序的执行实例可能由多个 进程具有独立的权限和职责.如果系统中某 ...
- cocos2dx 屏幕分辨率
http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework ...
- git操作本地仓库基本使用教程
1.创建仓库 mkdir learngit 2.初始化 cd learngit git init 3.添加文件(把要提交的所有修改放到暂存区(Stage)) git add 文件 4.提交到仓库(以 ...
- Leetcode#1.Two Sum（两数之和）
题目描述 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], ta ...
- gradle文件中自定义字段值在java代码中使用
1. 在build.gradle 中 buildConfigField 的参数有3个 第一个类型 第二个为名称 第三个是值 如果是字符串类型 请不要忘记 双引号! buildTypes { ...
- 请求神器 postman安装
1. 先下载postman(http://pan.baidu.com/s/1pLERz5p 密码:aqy2) 2.将你的包存放在文件夹中 列如名称为postman 3.在Chrome的地址栏中输入:c ...
- UVA315 Network 连通图割点
题目大意:有向图求割点 题目思路: 一个点u为割点时当且仅当满足两个两个条件之一: 1.该点为根节点且至少有两个子节点 2.u不为树根,且满足存在(u,v)为树枝边(或称 父子边,即u为v在搜索树中的 ...