Day25-JSONP跨域请求
1. json 是一种数据格式， jsonp 是一种数据调用的方式。你可以简单的理解为 带callback的json就是jsonp。
2. Python里面有个模块requests, requests.get('http://www.baidu.com')。把这段代码放到程序里面
3.创建app02备用：在terminal端输入 python manage.py startapp app02, 导入requests模块。
4. 这是一个关于天气情况的网址：http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityID=101121301。我们尝试用
requests.get 方法在页面上拿到它。
urls.py中写对应关系
from django.conf.urls import url
from django.contrib import admin
from app01 import views
from app02 import views as a2 urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^req/', a2.req),
url(r'^article-(?P<article_type_id>\d+)-(?P<category_id>\d+).html', views.article,name='article'),
]
views.py
req.html中写前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{result}}
</body>
</html>
页面效果：
5. 浏览器没有直接向天气接口发请求，而是向我们自己的URL发送了请求，我们自己的URL内部通过模块向远程进行发送了。所以说浏览器没有直接接触外部请求。
6. 尝试通过jQuery的ajax方法，越过中间的server，让浏览器直接发请求至天气接口。
7. 写req.html页面如下，用XMLHttpRequest来实现。
<!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 xhr=new XMLHttpRequest();
xhr.open('GET','http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityID=101121301')
xhr.onreadystatechange=function(){
console.log(xhr.responseText);
};
xhr.send();
} </script>
</body>
</html>
运行结果：
8. 上述两种方法进行比较：第1种方法，没有经过浏览器，往别的域名发请求是允许的；第2种方法，经过了浏览器发请求是不允许的。
由于浏览器具有同源（本域名）策略，阻止了ajax请求。通过巧妙的机制可以绕开这个限制。
例如：<script src="//cdn.bootcss.com/jquery/3.1.1/core.js"></script> 就可以越过浏览器的这个限制。凡是具有src属性的标签都不受浏览器同源策略的影响。
9. 向我自己写的另外一个网站（另外的域名）发请求，默认也会受同源策略的阻止。下面通过实验验证。
9.1: 写URL
9.2: 写后端。
9.3: 修改端口。
9.4: 打开，查看可用的域名。
9.5:
9.6:把域名添加到allower_host里面。
9.7: 直接访问没有报错。
9.8:通过浏览器给自己发请求。
9.9: 以GET方式向别的域名发请求。
9.10:
10. 用一个巧妙的方法来解决
var tag=document.createElement('script');-------创建一个script标签。
tag.src='http://wupeiqi.com:8001/jsonp.html?k1-v1&k2=v2'; -------向这个地址发请求。
document.head.appendChild(tag);--------把script标签放到head里面。
修改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 xhr=new XMLHttpRequest();
xhr.open('GET','http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityID=101121301')
xhr.onreadystatechange=function(){
console.log(xhr.responseText);
};
xhr.send();
*/
var tag=document.createElement('script');
tag.src='http://wupeiqi.com:8001/jsonp.html?k1-v1&k2=v2';
document.head.appendChild(tag);
}
</script>
</body>
</html>
页面效果：
11. 既然XMLHttprequest对象会受浏览器的影响，那么我们自己创建一个script标签放到这里就可以了。虽然访问成功了，但是返回的“OK”却没有意义，还会引起报错。
修改返回的内容，查看效果：
12. 到目前为止，通过JScript实现了跨域请求。返回的数据必须是符合JS格式的。
13. 目前为止，还没有变量去接收返回的数据。返回的字符串就叫：“callback( XXXX)”,相当于调用一个你自己写的那个callback函数。
100000相当于callback函数的实参。
所以需要自己定义一个callback函数
页面效果：拿到了这个返回的值。
14. 把callback函数改成一个动态的函数名。这样就可以区分不同的客户了。访问的时候就把自己的函数名也传过去。
func=request.GET.get('call')
return HttpResponse('call(1000000)')
页面效果：同上，没有报错。也返回了100000
15. 执行完以后，应该把script标签移除掉，让程序恢复原状。
document.head.removeChild(tag);
JSONP是用的最为广泛的跨域请求。
访问效果：
16. 一般情况下，函数名的key都叫callback，callback=要执行的那个函数名（例如：callback=list）。下面看一个示例，江西电视台的一个节目单。
17. JSONP只能发GET请求，不能发POST请求。因为所有的参数都放到了URL中的？后面了。
tag.src='http://wupeiqi.com:8001/jsonp.html?callback=list&k2=v2'
相当于通过JSONP伪造了一个ajax请求。上面的方式是通过原生的JS来写的。
下面讲怎么样通过jQuery的来写。
url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
type:'POST',
dataType:'jsonp', 表示让$.ajax内部以jsonp的形式来发送请求。
jsonp:'callback', 两句合起来相当于callback=list
jsonpCallback:'list', 两句合起来相当于callback=list
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 src="/static/jquery-1.12.4.js"></script>
<script>
function getContent(){
/*
var xhr=new XMLHttpRequest();
xhr.open('GET','http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityID=101121301')
xhr.onreadystatechange=function(){
console.log(xhr.responseText);
};
xhr.send();
*/
/*
var tag=document.createElement('script');
tag.src='http://wupeiqi.com:8001/jsonp.html?k1-v1&k2=v2';
document.head.appendChild(tag);
*/
$.ajax({
url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
type:'POST',
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'list',
})
}
</script>
</body>
</html>
页面正常获得了结果
18. 允许某个域名进行访问。参考如下的老师博客。
Day25-JSONP跨域请求的更多相关文章
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- Django学习---jsonp跨域请求
jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...
- jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
- 原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
- Django 实现组合条件搜索、jsonp跨域请求
1.类似于汽车之家的条件组合搜索那样 代码:http://pan.baidu.com/s/1nu7vZYD 2.jsonp实现跨域请求(在自己网页自动调用其他网站的接口,并将获取的数据呈现在自己网页上 ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
- 使用JSONP跨域请求数据
下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.
- jQuery jsonp跨域请求
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
随机推荐
- linux系统下php通过php_oci8扩展连接oracle数据库 Nginx
相关版本信息: PHP Version 5.6.30 nginx version: nginx/1.10.3 Linux version 2.6.32-358.el6.x86_64 (mockbuil ...
- 线程池原理及python实现
为什么需要线程池 目前的大多数网络服务器,包括Web服务器.Email服务器以及数据库服务器等都具有一个共同点,就是单位时间内必须处理数目巨大的连接请求,但处理时间却相对较短. 传统多线程方案中我们采 ...
- 20155331《网络对抗》Exp5 MSF基础应用
20155331<网络对抗>Exp5 MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode 答:exploit就是漏洞利用.exploit就是利用 ...
- EZ 2018 05 04 NOIP2018 模拟赛（十二）
这次的试卷应该是激励我们一下的,链接 然后大家的分数就都很高,然后我就210被一群秒A T2的240大佬爆踩 掉了5rating但Rank竟然发杀了 X_o_r dalao && YZ ...
- LoRa---她的简介和她的专业术语
LoRa是LPWAN(低功耗广域网)通信技术的一种,其作用距离超过 15 公里,连接节点可达 100 万个.低功耗与长距离极限的组合可将最大数据速率提升至每秒 50千比特(Kbps). LoRa 是 ...
- CCNode详解
cocos2d的所有类都以CC开头,那么实际上这个类的名字就是Node,类如其名,这个类的实例就是一个节点.Cocos2d的类是树状继承的,而在内存中,各个实例之间也是以“树”这种数据结构相关联的., ...
- .NET Core 开发之旅 (1. .NET Core R2安装教程及Hello示例)
前言 前几天.NET Core发布了.NET Core 1.0.1 R2 预览版,之前想着有时间尝试下.NET Core.由于各种原因,就没有初试.刚好,前几天看到.NET Core发布新版本了,决定 ...
- Ps矩形工具的运用
矩形工具 1.标识位置以及快捷键 位于左侧工具栏中,快键键是u,根据需求选择里面包含的工具 2.使用方法 鼠标左键点击工具,直接在图层使用,点击后拖住不放选择想要的图形后松手即可. 可以根据自身的需求 ...
- Linux/Mac 挂载远程服务器目录到本地
1. 安装 sudo apt-get installsshfs 2. 创建SSHFS 挂载目录 sudo mkdir/mnt/siyuan 3.使用SSHFS 挂载远程的文件系统 sudo sshfs ...
- 在HTML中为JavaScript传递变量
在html中为JavaScript传递变量是一个关键步骤,然后就可以通过对JavaScript变量操作,实现想要达到的目的 本节代码主要使用了JavaScript中的document对象中的getEl ...